DEV Community

Cover image for Adding Tailwind v4 to Docusaurus v3
Michał Wrzosek
Michał Wrzosek

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
    },
  };
};
Enter fullscreen mode Exit fullscreen mode

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

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

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

@import "tailwindcss";

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

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

Top comments (5)

Collapse
 
namnguyenthanhwork profile image
Thanh Nam Nguyen •

It works, but some classes are overridden by Infima. How can I fix this?

For example, I have an h1 tag with Infima’s default styles. I apply Tailwind classes, but they don’t take priority and get overridden by Infima.

Do you have any solution? I add default important, it work but i think it not good, it make default any class has !important.

Collapse
 
thomaschu30 profile image
thomas chu •

thanks ~~
My docusaurus can use tailwindcss

Collapse
 
jim876633 profile image
Jim •

Thanks!! That's all I need.

Collapse
 
meierschlumpf profile image
Meier Lukas •

Awesome, that helped me upgrade to v4, thanks ❤️

Collapse
 
everhard profile image
Andrew Dorokhov •

Thanks, Michał! You're the best!