Setting up Tailwind CSS with Docusaurus

tip

Installing Tailwind CSS adds only 575 bytes to the bundle size!

info

Credit is due to this blog post and its comments section. I just tried the clean up the info to make it more presentable.

1. Install dependencies

pnpm add tailwindcss postcss autoprefixer

2. Add Tailwind CSS config file

Add the following config file to the root directory:

./tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx,md,mdx}", "./docs/**/*.{md,mdx}"],
    theme: { extend: {} },
    plugins: [],
    darkMode: ["class", '[data-theme="dark"]'], // Support dark mode
    corePlugins: { preflight: false }, // Prevent Docusaurus defaults to be overwritten
    blocklist: ["container"], // Disable built-in classes to not interfere with Docusaurus classes
}

3. Add Tailwind CSS plugin to docusaurus.config.js

./docusaurus.config.js

    //...

    plugins: [
        async function myPlugin(context, options) {
            return {
                name: "docusaurus-tailwindcss",
                configurePostCss(postcssOptions) {
                    // Appends TailwindCSS and AutoPrefixer.
                    postcssOptions.plugins.push(require("tailwindcss"))
                    postcssOptions.plugins.push(require("autoprefixer"))
                    return postcssOptions
                },
            }
        },
    ],

    //...

4. Update global css file to load Tailwind CSS

./src/css/custom.css

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

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* ... */

5. Testing

Make a new mdx file add the contents below

# Testing Tailwind

Try both light and dark mode.

#### Custom component

export function Tailwinded() {
return (

<div className="text-red-500 dark:text-yellow-500">In light, I'm red, a vibrant sight,</div>) }

<Tailwinded />

#### Plain html

<div className="text-red-500 dark:text-yellow-500">In darkness, yellow, Tailwind set right!</div>

Final

Try both light and dark mode.

Custom component

In light, I'm red, a vibrant sight,

Plain html

In darkness, yellow, Tailwind set right!