最近在重新撸我们Kratos文档的landing page。我们的文档站用了facebook开源的Docusaurus作为文档平台,这里写样式想偷懒用一下TailwindCSS,就需要把Tailwind集成到现有的Docusaurus项目中,我在官方仓库中找到了这个issue,稍做调整后用在了我们自己的项目里,该方法在2.0.0-beta6可用。

Docusaurus是基于React的项目,它的landing page是一个独立的component,另外想修改其它组件,比如navbar或者footer,可以参考Swizzling theme components把相应的组件代码暴露出来以便修改。

我们这次主要想实现的是,能够使用tailwind定义我们新组件的样式,并且不与docusaurus自带的样式冲突。

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"即可生效。

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

Reference