跳至主要内容

[Docusaurus] TailwindCSS

TailwindCSS

安裝​

安裝 TailwindCSS：

pnpm add -D tailwindcss postcss autoprefixer

輸入初始化指令，建立 tailwind.config.js 檔案：

npx tailwindcss init

可以在 tailwind.config.js 檔案中看到目前的預設值：

tailwind.config.js
/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

我們要的是 typescript 版本，所以將檔案改成 tailwind.config.ts：

tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config;

設定​

TailwindCSS Configuration

根據需求調整 config 檔案，將 src 資料夾設定在 content 路徑中：

tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  corePlugins: {
    preflight: false,
    container: false,
  },
  content: ["./src/**/*.{jsx,tsx,mdx,html}"],
  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config;
注意

如果要保留原本 docusaurus 的 css 設定，可以將 preflight 設定為 false (Ref: Docusaurus and Tailwind CSS)

Docusaurus Config​

接下來要將 TailwindCSS 作為 plugin 加入到 Docusaurus 的 config 檔裡。

前往 docusaurus.config.ts 檔案，可以看到有一個 plugins 的屬性，待會要將 Taiwin

docusaurus.config.ts
const config: Config = {
	title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',
  .
  .
  .
	plugins: [],
}

建立 TailwindCSS plugin​

在 root 目錄底下建立 plugins 資料夾，然後建立 tailwind-config.cjs 檔案

Untitled

將以下 script 放入 tailwind-config.cjs：

tailwind-config.cjs
function tailwindPlugin(context, options) {
  return {
    name: 'tailwind-plugin',
    configurePostCss(postcssOptions) {
      postcssOptions.plugins = [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
      ];
      return postcssOptions;
    },
  };
}

module.exports = tailwindPlugin;

加入 TailwindCSS plugin​

接著回到 docusaurus.config.ts 檔案，加入 tailwindPlugin：

docusaurus.config.ts
import tailwindPlugin from "./plugins/tailwind-config.cjs"; // add this
//...
const config: Config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',
  //...
  plugins: [tailwindPlugin], // update this
}

開始使用 TailwindCSS​

pnpm run start

Untitled

Untitled

Untitled

Ref​