tools.tailwindcss#

• Type: Object | Function
• Default:

const tailwind = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './config/html/**/*.{html,ejs,hbs}',
    './storybook/**/*',
  ],
};

Used to modify the configuration of Tailwind CSS.

Enabling Tailwind CSS#

Before using tools.tailwindcss, you need to enable the Tailwind CSS plugin for Modern.js.

Please refer to the section Using Tailwind CSS for instructions on how to enable it.

Function Type#

When tools.tailwindcss's type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.

export default {
  tools: {
    tailwindcss(config) {
      config.content.push('./some-folder/**/*.{js,ts}');
    },
  },
};

Object Type#

When tools.tailwindcss's type is Object, the config will be shallow merged with default config by Object.assign.

export default {
  tools: {
    tailwindcss: {
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
      ],
    },
  },
};

Notes#

Please note:

• If you are using both the tailwind.config.{ts,js} file and tools.tailwindcss option, the configuration defined in tools.tailwindcss will take precedence and override the content defined in tailwind.config.{ts,js}.
• If you are using the source.designSystem configuration option simultaneously, the theme configuration of Tailwind CSS will be overridden by the value of source.designSystem.

The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to tailwindcss - Configuration for more details.

About source.designSystem#

source.designSystem is a deprecated configuration option in Modern.js.

Starting from Modern.js v2.33.0, you can use the theme configuration option of Tailwind CSS as a replacement for source.designSystem. It is no longer necessary to split the theme configuration and set it on designSystem.

• Previous usage:

const { theme, ...rest } = tailwindConfig;

export default {
  tools: {
    tailwindcss: rest,
  },
  source: {
    designSystem: theme,
  },
};

• Current usage:

export default {
  tools: {
    tailwindcss: tailwindConfig,
  },
};