Docusaurus 如何集成 tailwindCSS

Step 0: 安装依赖

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

Step 1: 定义插件

 // docusaurus.config.ts
 
 async function myPlugin(context, options) {
            return {
                name: 'docusaurus-tailwindcss',
                configurePostCss(postcssOptions) {
                    postcssOptions.plugins.push(require('tailwindcss'));
                    postcssOptions.plugins.push(require('autoprefixer'));
                    return postcssOptions;
                },
            };
        },

Step 3: 创建 tailwind 配置

方法 1：

创建 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ['./src/**/*.{js,jsx,ts,tsx}', '../docs/**/*.mdx'],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [],
};

方法 2：

运行该命令会自动创建 tailwind.config.js 文件 ，然后进行替换即可

npx tailwindcss init

Step 4: CSS 中引入 Tailwind

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

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

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

为什么加 tailwind？当然是防止干扰docusaurus 已有的样式了！