Skip to main content

使用 tailwindcss 美化 Docusaurus

安装 tailwindcss​

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

取代 tailwind.config.js 的内容​

将 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: [],
};

将 tailwindcss 添加到 CSS​

将

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

添加到 /src/css/custom.css 中

添加 tailwindcss 插件到 docusaurus 中​

在 docusaurus.config.js 的 plugins 中添加内容，结构如下

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

开始使用 tailwindcss​

参考 tailwindcss 的说明文档，就开始在 docusaurus 使用 tailwindcss