#Using Tailwind CSS

Tailwind CSS is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.

#Using Tailwind CSS in Modern.js

To use Tailwind CSS in Modern.js, you only need to configure it according to the Rsbuild steps. Rsbuild supports Tailwind CSS versions v3 and v4:

• Tailwind CSS v3
• Tailwind CSS v4

#Tailwind Plugin Migration

#Migration Background

As Modern.js evolves, to provide a more unified build experience and stronger configuration flexibility, we have adjusted the way Tailwind CSS is supported. Modern.js V3 recommends integrating Tailwind CSS natively through Rsbuild, no longer relying on the @modern-js/plugin-tailwindcss plugin, thereby fully leveraging Rsbuild’s more flexible configuration capabilities and better build experience.

#Migration Steps

Taking Tailwind CSS V3 as an example, the migration steps are as follows:

#1. Remove the Old Plugin

• Remove the @modern-js/plugin-tailwindcss dependency
• Remove the import and usage of the @modern-js/plugin-tailwindcss plugin in the modern.config.ts file

#2. Configure PostCSS

Create or update the postcss.config.cjs file.

module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

#3. Tailwind CSS Configuration Migration

• Single Configuration Case:

  • If configured only in tailwind.config.{ts,js}, no additional action is needed
  • If configured only in modern.config.ts, migrate the Tailwind-related configuration to tailwind.config.{ts,js}

• Dual Configuration Case: If configurations exist in both tailwind.config.{ts,js} and modern.config.ts, merge the configurations and migrate the merged result to tailwind.config.{ts,js}

• Special Directory Handling: If your project contains storybook or config/html directories, supplement ./storybook/**/* or ./config/html/**/*.{html,ejs,hbs} in the content field of tailwind.config.{ts,js}

#4. CSS Style Import

• Change to use the @tailwind directive

/* Old way */
@import 'tailwindcss/base.css';
@import 'tailwindcss/components.css';
@import 'tailwindcss/utilities.css';

/* New way */
@tailwind base;
@tailwind components;
@tailwind utilities;

#5. Twin.macro Integration

If the project uses twin.macro, perform the following steps; otherwise, ignore:

• Manually install dependencies: pnpm add twin.macro styled-components babel-plugin-macros -D
• Configure the babel-plugin-macros Babel plugin:

export default defineConfig({
  plugins: [appTools()],
  tools: {
    babel: {
      plugins: [
        [
          'babel-plugin-macros',
          {
            twin: {
              preset: 'styled-components',
              config: './tailwind.config.ts',
            },
          },
        ],
      ],
    },
  },
});

#Tailwind CSS V2 Migration

If your project still uses Tailwind CSS v2, we recommend upgrading to v3 to support JIT and other features. For differences between Tailwind CSS v2 and v3, please refer to the following articles:

• Tailwind CSS v3.0
• Upgrade Guide

The migration for Tailwind CSS v2 also follows the above steps, but note that the original plugin automatically adapts to the differences between Tailwind v2 (purge configuration) and v3 (content configuration). After removal, you need to use the purge option to specify the CSS classes to retain.

#Tailwind CSS Autocomplete

Tailwind CSS provides an official extension called Tailwind CSS IntelliSense for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.

You can follow the steps below to enable the autocomplete feature:

1. Install the Tailwind CSS IntelliSense extension in VS Code.
2. If the root directory of your project does not have a tailwind.config.{ts,js} file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.

#Browser Compatibility

Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:

• Tailwind CSS v3 - Browser Support.
• Tailwind CSS v2 - Browser Support

If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.