---
layout: "@/layouts/BlogPostLayout.astro"
title: "Using Tailwind CSS in Docusaurus v3"
description: "This article details how to integrate and configure Tailwind CSS in Docusaurus v3, including installing dependencies, configuring tailwind.config.js, creating tailwind.css and postcss.config.js, and more."
date: "2023-11-05"
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop"
tags: ["Docusaurus", "TailwindCSS", "Frontend Framework"]
tagId: ["docusaurus", "tailwindcss", "frontend-framework"]
category: "Frontend Development"
categoryId: "frontend"
readTime: "4 min read"
---

## Installing Dependencies

```bash
npm install tailwindcss
```
## Configuring tailwind.config.js

```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:

```css
@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:

```js
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:

```css
@import './tailwind.css';
```

## Using Tailwind CSS

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

```jsx
<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.