Add TailwindCSS to Docusarus v3

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/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

docusaurus.config.ts

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