Using Tailwind CSS in Docusaurus v3

Installing Dependencies

npm install tailwindcss

Configuring tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,md,mdx}",
    "./docs/**/*.{md,mdx}",
  ],
  theme: {
    screens: {
      xs: '480px',
      sm: '576px',
      md: '768px',
      lg: '998px',
      xl: '1200px',
      '2xl': '1400px',
    },
    extend: {
      fontFamily: {
        sans: 'var(--ifm-font-family-base)',
        firacode: 'var(--font-family-firacode)',
        kaiti: 'var(--font-family-kaiti)',
      },
      colors: {
        'font-color': 'var(--ifm-font-color-base)',
        'link-color': 'var(--ifm-link-color)',
        'link-hover-color': 'var(--ifm-link-hover-color)',
        primary: 'var(--ifm-color-primary)',
        'primary-light': 'var(--ifm-color-primary-light)',
        'primary-lighter': 'var(--ifm-color-primary-lighter)',
        'primary-lightest': 'var(--ifm-color-primary-lightest)',
        'primary-dark': 'var(--ifm-color-primary-dark)',
        'primary-darker': 'var(--ifm-color-primary-darker)',
        'primary-darkest': 'var(--ifm-color-primary-darkest)',
      },
      boxShadow: {
        nysm: '0 0 2px 0 rgb(0 0 0 / 0.05)',
        ny: '0 0 3px 0 rgb(0 0 0 / 0.1), 0 0 2px - 1px rgb(0 0 0 / 0.1)',
        nymd: '0 0 6px -1px rgb(0 0 0 / 0.1), 0 0 4px -2px rgb(0 0 0 / 0.1)',
        nylg: '0 0 15px -3px rgb(0 0 0 / 0.1), 0 0 6px -4px rgb(0 0 0 / 0.1)',
        spread: '0 5px 40px rgb(0 0 0 / 0.1)',
      },
    },
  },
  plugins: [],
  darkMode: ["class", '[data-theme="dark"]'],
  corePlugins: {
    preflight: false,
  },
  blocklist: ["container"],
}

Creating tailwind.css

Create a tailwind.css file in the src/css directory and add the following content:

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

Note: After creation, you need to import tailwind.css in custom.css, otherwise the tailwind styles will not take effect

Creating postcss.config.js

Create a postcss.config.js file in the project root directory and add the following content:

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
}

Importing tailwind.css in custom.css

Find the src/css/custom.css file in your project and add the following content at the top of the file:

@import './tailwind.css';

Using Tailwind CSS

Now, you can use Tailwind CSS styles in your project. For example:

<div className="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
  <h2 className="text-2xl font-bold text-primary mb-2">Hello Tailwind CSS</h2>
  <p className="text-gray-700 dark:text-gray-300">This is a paragraph styled with Tailwind CSS</p>
</div>

Notes

1. Since Docusaurus already has its own CSS styles, we disabled preflight in the Tailwind CSS configuration to avoid style conflicts.

2. We used the darkMode: ["class", '[data-theme="dark"]'] configuration to make Tailwind CSS’s dark mode consistent with Docusaurus’s dark mode.

3. We added some variables in theme.extend.colors that use Docusaurus’s CSS variables, making Tailwind CSS colors consistent with Docusaurus theme colors.

4. We added container to the blocklist because Docusaurus already has its own container styles, and we don’t want Tailwind CSS’s container styles to override them.

Summary

Through the above steps, we have successfully integrated Tailwind CSS into Docusaurus v3. Now, we can use all the features of Tailwind CSS while maintaining consistency with the Docusaurus theme.

I hope this article has been helpful to you! If you have any questions, feel free to leave a comment.