How to use Tailwind CSS in Docusaurus?

[codayon]

Can Tailwind CSS be used with Docusaurus? If yes, how can I do that?

Reference #2961

[InlitX]

Yeah, you can use Tailwind with Docusaurus.
The easiest way is to install this package:

npm install --save docusaurus-tailwindcss

Then add it to your docusaurus.config.js:

module.exports = {
  plugins: ['docusaurus-tailwindcss'],
};

And in your src/css/custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Here's the NPM package with more details.

I also found this guide if you need it as an additional reference.

[InlitX]

Oh got it, yeah for Tailwind v4 I found this guide that covers the updated setup. It's different from v3

Install dependencies:

yarn add postcss tailwindcss @tailwindcss/postcss autoprefixer

Add the plugin to docusaurus.config.js:

plugins: [
  async function tailwindcssPlugin(context, options) {
    return {
      name: "tailwindcss-plugin",
      configurePostCss(postcssOptions) {
        postcssOptions.plugins.push(require("@tailwindcss/postcss"))
        return postcssOptions
      },
    }
  },
],

In src/css/custom.css add this:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

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

The prefix(tw) is optional but helps avoid conflicts.

[codayon]

This also does not work. By the way, is there any official guide from Tailwind CSS, which shows how to configure Tailwind CSS for non supported frameworks? I have not seen anything related to the snippet you have sent, that is supposed to go inside custom.css. Also, how do CSS work in Docusaurus? The only mention of custom.css I have seen is inside docusaurus.config.js which is also for presets.theme.customCSS.

[slorber]

Docusaurus v3.2 is 2y old, maybe it's worth upgrading it first before adding new things?

---

Tailwind 4.2 just released a new webpack plugin (actually, it's a loader): https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0

That's probably going to change how we integrate Tailwind with Docusaurus

[codayon]

Docusaurus v3.2 is 2y old, maybe it's worth upgrading it first before adding new things?

Sorry, that was a typo, I wanted to write Docusaurus v3.9.2

Tailwind 4.2 just released a new webpack plugin (actually, it's a loader): https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0

That's probably going to change how we integrate Tailwind with Docusaurus

I'll check it out!

[codayon]

Sorry, I wasn't able to use Tailwind CSS.

[codayon]

You can use Tailwind CSS in a Docusaurus project by integrating it through PostCSS.

I have tried this method before, it doesn't work. The issue, we are having is mainly with the bundler what I understood.