在 Docusaurus 里使用 TailwindCSS

ref Using TailwindCSS v3 in Docusaurus in 5 steps

创建 Docusaurus 项目

echo "registry=https://registry.npmmirror.com" >> .npmrc
npm init -y
npm install -D create-docusaurus
npx create-docusaurus@latest hello-world classic --typescript
cd hello-world

CDN方式

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
// https://docusaurus.io/docs/api/docusaurus-config

import type { Config } from '@docusaurus/types';

const config: Config = {
  // ...其他配置
  headTags: [{
    tagName: "script",
    attributes: {
      src: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
    },
  }, {
    tagName: "style",
    attributes: {
      type: "text/tailwindcss",
    },
    // 在 innerHTML 设置自定义样式
    innerHTML: `@theme {
  --color-clifford: #da373d;
}`
  }],
  // ... 其他配置
};


export default config;

插件方式

安装 TailwindCSS 依赖

npm install tailwindcss postcss autoprefixer --save
npx tailwindcss init --ts # => 会生成一个 tailwind.config.ts 文件

编辑 tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

设置插件

在 docusaurus.config.ts 文件找到 plugin 配置项,新增一下配置:

docusaurus.config.ts

import { themes as prismThemes } from 'prism-react-renderer';
import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)

const editUrl = "edit url address";

const config: Config = {
  // ... 其他配置
  plugins: [
    // tailwindcss 插件
    async function myPlugin(context, options) {
      return {
        name: "docusaurus-tailwindcss",
        configurePostCss(postcssOptions) {
          // Appends TailwindCSS and AutoPrefixer.
          postcssOptions.plugins.push(require("tailwindcss"));
          postcssOptions.plugins.push(require("autoprefixer"));
          return postcssOptions;
        },
      };
    },
  ],
};

export default config;

相对完整的配置如下:

docusaurus.config.ts

import { themes as prismThemes } from 'prism-react-renderer';
import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)

const editUrl = "edit url address";

const config: Config = {
  title: '...',
  tagline: '...',
  url: '...',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  
  // ... 其他配置
  presets: [
    [
      'classic',
      {
        docs: {
          sidebarPath: './sidebars.ts',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl: editUrl,
          showLastUpdateTime: true,
          sidebarCollapsible: true
        },
        blog: {
          showReadingTime: true,
          feedOptions: {
            type: ['rss', 'atom'],
            xslt: true,
          },
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl: editUrl,
          // Useful options to enforce blogging best practices
          onInlineTags: "ignore", // 'ignore' | 'log' | 'warn' | 'throw'
          onInlineAuthors: 'warn',
          onUntruncatedBlogPosts: 'warn',

          truncateMarker: /<!--\s*(truncate|splitor)\s*-->/,
          blogSidebarCount: 20
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],

  plugins: [
    //  多文档配置
    ['@docusaurus/plugin-content-docs', {
      id: 'front-end',
      path: 'docs/front-end',
      routeBasePath: 'wiki/front-end',
      sidebarPath: require.resolve('./docs/sidebars.FrondEnd.js'),
      editUrl: editUrl,
      showLastUpdateTime: true,
      sidebarCollapsible: true
    }],
    ['@docusaurus/plugin-content-docs', {
      id: 'back-end',
      path: 'docs/back-end',
      routeBasePath: 'wiki/back-end',
      sidebarPath: require.resolve('./docs/sidebars.BackEnd.js'),
      editUrl: editUrl,
      showLastUpdateTime: true,
      sidebarCollapsible: true
    }],
    // tailwindcss 插件
    async function myPlugin(context, options) {
      return {
        name: "docusaurus-tailwindcss",
        configurePostCss(postcssOptions) {
          // Appends TailwindCSS and AutoPrefixer.
          postcssOptions.plugins.push(require("tailwindcss"));
          postcssOptions.plugins.push(require("autoprefixer"));
          return postcssOptions;
        },
      };
    },
  ],
  themes: [
  // 搜索
    [
      require.resolve("@easyops-cn/docusaurus-search-local"),
      /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
      ({
         // `hashed` is recommended as long-term-cache of index file is possible.
         hashed: true,
         // For Docs using Chinese, The `language` is recommended to set to:
         language: ["en", "zh"],
         indexPages: true,
         // docsRouteBasePath: ["/docs", ""],
         docsDir: ["docs"]
      }),
    ],
  ],
};

export default config;

加载 TailwindCSS

修改文件 src/css/custom.css, 在文件顶部增加以下代码:

src/css/custom.css

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