Skip to main content

引入TailwindCSS

方案1 来自互联网​

Step 0: 安装依赖​

首先安装 tailwind 需要的依赖

yarn add -D tailwindcss postcss autoprefixer postcss-cli postcss-nested postcss-preset-env

Step 1: 定义插件​

在项目里创建一个 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
        },
    }
}

Step 2: 引入插件​

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

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

Step 3: 创建 tailwind 配置

创建 tailwind.config.js

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

Step 4: CSS 中引入 Tailwind​

修改 src/css/custom.css，在里面添加

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

与 issue 中提到的方式不太一样，我们这里使用了 postcss-nested，这样可以把 tailwind 的样式限制在带有有 classtailwind 的容器中，不会干扰 docusaurus 已有的样式。你也可以根据具体需要直接全局应用。

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

具体完整代码可以参考列在后面的我们的文档仓库。

原文链接​

参考文献​

方案2 来自ChatGPT​

  1. 安装Tailwind CSS和相关依赖项：可以使用npm或yarn安装。在终端中运行以下命令：

    npm install tailwindcss postcss-cli autoprefixer --save-dev
    # 或
    yarn add tailwindcss postcss-cli autoprefixer --dev

  2. 创建并配置postcss.config.js文件：在项目根目录下创建postcss.config.js文件，并将以下内容添加到其中：

    module.exports = {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    };

    这将告诉Docusaurus在构建过程中使用Tailwind CSS和Autoprefixer。

  3. 在Docusaurus中使用Tailwind CSS：可以将Tailwind CSS的样式表文件添加到Docusaurus的自定义样式表中。在Docusaurus项目的根目录中，打开docusaurus.config.js文件，并将以下内容添加到themeConfig对象中：

    module.exports = {
      // ...
      themeConfig: {
        // ...
        customCss: [
          require.resolve('./src/css/custom.css'),
          // 将Tailwind CSS添加到自定义CSS文件中
        ],
      },
    };

    在此示例中，我们将自定义CSS文件命名为custom.css，并将其放置在src/css目录中。在该文件中，您可以使用@tailwindcss指令引入Tailwind CSS的样式表文件：

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

    这将导入Tailwind CSS的基础样式、组件和实用程序类。

  4. 构建并运行Docusaurus：最后，运行Docusaurus以查看您的网站。在终端中，使用以下命令构建并启动Docusaurus：

    yarn start