---
layout: "@/layouts/BlogPostLayout.astro"
title: "Docusaurus v3中使用Tailwind CSS的样式"
description: "本文详细介绍了如何在Docusaurus v3中集成和配置Tailwind CSS，包括安装依赖、配置tailwind.config.js、创建tailwind.css和postcss.config.js等步骤。"
date: "2023-11-05"
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop"
tags: ["Docusaurus", "TailwindCSS", "前端框架"]
tagId: ["docusaurus", "tailwindcss", "frontend-framework"]
category: "前端开发"
categoryId: "frontend"
readTime: "4 min read"
---

## 安装相关依赖

```bash
npm install tailwindcss
```
## 配置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"],
}
```
## 创建tailwind.css

在`src/css`目录下创建`tailwind.css`文件，并写入以下内容：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
**注意：创建完成后是需要在custom.css中导入tailwind.css的，否则tailwind样式不会生效**

## 创建postcss.config.js

在项目根目录下创建`postcss.config.js`文件，并写入以下内容：

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

## 在custom.css中导入tailwind.css

找到项目中的`src/css/custom.css`文件，在文件顶部添加以下内容：

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

## 使用Tailwind CSS

现在，你可以在项目中使用Tailwind CSS的样式了。例如：

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

## 注意事项

1. 由于Docusaurus已经有自己的CSS样式，所以我们在配置Tailwind CSS时禁用了`preflight`，这样可以避免样式冲突。

2. 我们使用了`darkMode: ["class", '[data-theme="dark"]']`配置，这样可以让Tailwind CSS的暗黑模式与Docusaurus的暗黑模式保持一致。

3. 我们在`theme.extend.colors`中添加了一些变量，这些变量使用了Docusaurus的CSS变量，这样可以让Tailwind CSS的颜色与Docusaurus的主题颜色保持一致。

4. 我们在`blocklist`中添加了`container`，这是因为Docusaurus已经有自己的容器样式，我们不希望Tailwind CSS的容器样式覆盖它。

## 总结

通过以上步骤，我们成功地在Docusaurus v3中集成了Tailwind CSS。现在，我们可以使用Tailwind CSS的所有功能，同时保持与Docusaurus主题的一致性。

希望这篇文章对你有所帮助！如果你有任何问题，欢迎在评论区留言。