跳到主要内容

如何在 Docusaurus 中引入 TailwindCSS

👁️‍🗨️阅读需 2 分钟
cq329

把 TailwindCSS 集成到现有的 Docusaurus 项目中，使用 TailwindCSS 定义我们新组件的样式，并且不与 Docusaurus 自带的样式冲突。

安装依赖​

首先安装 TailwindCSS 需要的依赖

npm i -D tailwindcss postcss autoprefixer postcss-cli postcss-nested postcss-preset-env
npm i postcss-import --save

定义插件​

在项目里创建一个 Docusaurus 的插件放在根目录下，比如我这里插件名字叫 postcss-tailwind-loader.js 代码从下面抄一下。

module.exports = function (context, options) {
    return {
        name: 'postcss-tailwindcss-loader',
        configurePostCss(postcssOptions) {
            postcssOptions.plugins.push(
                require('postcss-import'),
                require('tailwindcss'),
                require('postcss-nested'),
                require('autoprefixer'),
            )
            return postcssOptions
        },
    }
}

引入插件​

在 docusaurus.config.js 的 plugins 里面，把上面创建的文件引入进来，以便生效。

plugins: [
    "./postcss-tailwind-loader"
  ],

创建 TailwindCSS 配置​

在项目根目录下创建 tailwind.config.js 文件，写入下面的代码：

module.exports = {
    purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
    darkMode: false, 
    theme: {},
    variants: {
        extend: {},
    },
    plugins: []
}

如何使用？​

方式一​

使用时在 .js 文件中引入 TailwindCSS 即可。

import "tailwindcss/tailwind.css"

方式二​

在自定义CSS 中引入 TailwindCSS，修改 src/css/custom.css，在里面添加：

.tw{
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @tailwind screens;
}

我们这里使用了 postcss-nested，这样可以把 TailwindCSS 的样式限制在带有有 tw 类名的容器中，不会干扰 Docusaurus 已有的样式。你也可以根据具体需要直接全局应用。

如果是像我们这样定义，则在所有需要用 TailwindCSS 写样式的部分，就在最外层容器加一个 className="tw" 即可生效。

文章目录