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.

To use Tailwind CSS in Modern.js, you can follow the steps below:

1. Run pnpm run new in the root directory of your project and make the following selections:

? Please select the operation you want: Enable features
? Please select the feature name: Enable Tailwind CSS

After successful initialization, you will see that the package.json has added dependencies for tailwindcss and @modern-js/plugin-tailwindcss.

2. Register the Tailwind plugin in modern.config.ts:

import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';

export default defineConfig({
  plugins: [..., tailwindcssPlugin()],
});

3. Create a index.css file and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import the index.css file, for example, add the following code in the root component src/App.jsx:

import './index.css';

5. Now you can use the Utility Classes provided by Tailwind CSS in your components:

const Hello = () => (
  <div className="h-12 w-48">
    <p className="text-xl font-medium text-black">hello world</p>
  </div>
);

Configuring Tailwind CSS#

In Modern.js, you have two ways to configure Tailwind CSS:

1. Using the tailwind.config.{ts,js} file, which follows the official usage of Tailwind CSS. Please refer to "Tailwind CSS - Configuration" for more details.

import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
} as Config;

2. Using the tools.tailwindcss configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the tailwind.config.{ts,js} file for configuration.

export default {
  tools: {
    tailwindcss: {
      content: ['./src/**/*.{js,jsx,ts,tsx}'],
    },
  },
};

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}.

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.

Tailwind CSS Version#

Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the tailwindcss dependency in the project package.json file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.

If your project is still using Tailwind CSS v2, we recommend that you upgrade to v3 to support JIT and other capabilities. For the differences between Tailwind CSS v2 and v3 versions, please refer to the following articles:

• Tailwind CSS v3.0
• Upgrade Guide

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.