Adding Tailwind v4 to Docusaurus v3

Adding Tailwind v4 to Docusaurus v3 (转载)

This is a very basic Tailwind v4 setup for Docusaurus v3.

Install Tailwind and Postcss:

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

Create docosaurus plugin in src/plugins/tailwind-config.js:

module.exports = function tailwindPlugin(context, options) {
  return {
    name: "tailwind-plugin",
    configurePostCss(postcssOptions) {
      postcssOptions.plugins = [require("@tailwindcss/postcss")];
      return postcssOptions;
    },
  };
};

Add this plugin to docosaurus config object in docusaurus.config.ts:

const config: Config = {
  //...
  plugins: ["./src/plugins/tailwind-config.js"],
  //...
};

Add tailwind setup somewhere in src/css/custom.css file:

@import "tailwindcss";

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

And voila! From now on, Tailwind classes should be picked up by Docosaurus and the dark theme will also sync up correctly.