Skip to main content

Install TailwindCSS in Docusaurus

· 2 min read
Rajiv Seelam
Rajiv Seelam
Engineer @ LoCoSpec

We used Docusaurus for documentation and blog of LoCoSpec. We have used TailwindCSS in places. This tutorial is a "how-to" on the same topic.

Install & Configure Tailwind​

Install​

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts

Configure tailwind.config.js​

import { type Config } from "tailwindcss";
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.tsx"],
  corePlugins: { preflight: false },
  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Highlights

  • Preflight is false
  • darkMode is configured to work with Docusaurus

Add to custom.css​

/**
 * 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.
 */

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

/* You can override the default Infima variables here. */

Docusaurus Tailwind Plugin​

Add Docusaurus Plugin​

module.exports = function (context, options) {
  return {
    name: "postcss-tailwindcss-loader",
    // https://github.com/facebook/docusaurus/issues/2961#issuecomment-1531243979
    injectHtmlTags() {
      return {
        headTags: [
          {
            tagName: "link",
            attributes: {
              rel: "stylesheet",
              href: "https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css",
            },
          },
        ],
      };
    },
    configurePostCss(postcssOptions) {
      // https://github.com/facebook/docusaurus/issues/2961#issuecomment-1531243979
      postcssOptions.plugins.push(require("tailwindcss"));
      postcssOptions.plugins.push(require("autoprefixer"));
      return postcssOptions;
    },
  };
};

Add plugin dependency to package.json​

  "devDependencies": {
    ...
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14",
    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader"
  },

Run npm install after above

Excluded some packages for brevity

Add plugin to docusaurus.config.js​

{
  ... // excluded for brevity
  onBrokenMarkdownLinks: "warn",
  plugins: ["docusaurus-tailwindcss-loader"],
}