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.jsplugins 里面,把上面创建的文件引入进来,以便生效

  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