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};