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.

Mar 1, 2025 - 22:08

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.