sung.codes

How to add Tailwind CSS for Docusaurus

tailwindcssdocusaurus

Steps

  1. Install Docusaurus

    • npx @docusaurus/init@latest init site-name class
    • https://docusaurus.io/docs/installation

  2. Install and Configure Tailwind CSS

    • Documentation: https://tailwindcss.com/docs/installation

    1. Install Tailwind CSS:

      • npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

    2. Configure Tailwind CSS

      • Generate postcss.config.js and tailwind.config.js: npx tailwindcss init -p

    3. Purge configuration

      • Update tailwind.config.js
      1module.exports = {2   purge: [ './src/**/*.{js,jsx,ts,tsx}' ],3 };4	```

    4. Apply Tailwind CSS prefix

      • to prevent Docusaurus class nameing collision

      • Update tailwind.config.js.

        1module.exports = {2  prefix: "tw-",3};

    5. Include Tailwind CSS.

      • Create src/css/tailwind.css

      • Do NOT include @tailwind base; because it will reset CSS breaking Docusaurus styles.

        1@tailwind components;2@tailwind utilities;

    6. Configure docusaurus.config.js to include Tailwind CSS file

    1module.exports = {2  /** ... **/3  presets: [4    [5      "@docusaurus/preset-classic",6      {7        docs: {8          ...9        blog: {10          ...11        },12        theme: {13          - customCss: require.resolve('./src/css/custom.css'),14          + customCss: [require.resolve("./src/css/custom.css"), require.resolve("./src/css/tailwind.css")],15        },16      },17    ],18  ],19};