Skip to main content

Add Tailwind CSS v4 to Docusaurus v3

Learn how to add Tailwind CSS v4 to a Docusaurus v3 project.

1. Install TailwindCSS packages​

npm install --save-dev tailwindcss @tailwindcss/postcss postcss

2. Create a new plugin.​

We will create a new plugin for TailwindCSS.

src/plugins/plugin-tailwindcss.ts
import type { Plugin, PostCssOptions } from '@docusaurus/types';

export default function tailwindCssPlugin(): Plugin | null {
  return {
    name: 'tailwindcss-plugin',
    configurePostCss(postcssOptions: PostCssOptions) {
      postcssOptions.plugins.push(require('@tailwindcss/postcss'));
      return postcssOptions;
    },
  };
}

3. Import plugin file in docusaurus.config.ts​

We import a plugin into a config file.

docusaurus.config.ts
const config: Config = {
  //
  plugins: ['./src/plugins/plugin-tailwindcss.ts'],
  //
};

4. Add a style​

Open stylesheet file and import a TailwindCSS file

src/style/custom.css
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
info

We do not need to import all TailwindCSS base file because Docusaurus has already reset it.

Conclusion​

Now, we can use TailwindCSS in our Docusaurus file.