跳轉到主要內容
在 popup、options、new tab、sidebar 與 content script 入口之間，用 utility class 快速打造擴充功能的 UI。 Extension.js 透過 PostCSS 整合 Tailwind，同時支援 Tailwind v3 與 v4 的設定方式。

​
什麼情況下適合使用 Tailwind CSS

  • 你需要在多個擴充功能介面之間快速迭代 UI。
  • 你偏好搭配共用 token 的 utility-first 樣式策略。
  • 你希望讓頁面與 content script 入口採用一致的樣式模式。

​
Tailwind 能做到的事

能力帶來什麼好處
多介面樣式在擴充功能頁面與 content script 之間重複使用 utility class
以 PostCSS 為基礎整合把 Tailwind 放在與專案其餘部分相同的 CSS 轉換 pipeline 中
版本彈性支援 Tailwind v3 與 Tailwind v4 的 plugin 模式
從範本起步從現成的設定起步，再逐步調整

​
範本範例

當你想要在實際的擴充功能 UI 介面中得到完整的 Tailwind 設定時，使用這個範本。 sidebar-shadcn screenshot 
npx extension@latest create my-extension --template=sidebar-shadcn
Repository: examples/sidebar-shadcn

​
在既有擴充功能中使用

​
安裝

安裝所需相依套件： 
npm install -D tailwindcss @tailwindcss/postcss postcss

​
設定

建立 postcss.config.js： 
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
對於 Tailwind v3 專案，請以 tailwindcss 作為 PostCSS plugin，並維護 tailwind.config.js 的 content 清單。

​
Tailwind v4 vs v3 快速設定

// Tailwind v4 postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

// Tailwind v3 postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

​
Tailwind content 路徑（v3 風格）

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./pages/**/*.{html,js,ts,jsx,tsx,mdx}",
    "./scripts/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

​
使用方式

建立全域樣式表並匯入 Tailwind：

​
建立全域 CSS 檔

/* styles/globals.css */
@import "tailwindcss";
在使用 Tailwind class 的入口 script 中匯入這個檔案。

​
在頁面 script（popup/options/new-tab）

import "./styles/globals.css";

export default function MyNewTabPage() {
  return <h1 className="text-4xl font-bold">Hello, Extension.</h1>;
}

​
在 content script

import "./styles/globals.css";

console.log("Tailwind styles loaded for content script");
Extension.js 會把 content script 的 CSS 走它的 content script 樣式 pipeline，並把這些資源輸出到 content_scripts/ 之下。

​
最佳實務

  • 將 Tailwind 的 source import 放在共用的樣式入口檔（styles/globals.css）。
  • 確保 content 掃描範圍視情況納入 pages/、scripts/ 與 src/。
  • 在 monorepo 中，請確認 Tailwind 的 content 路徑能從擴充功能專案根目錄解析。
  • 盡量使用範本，避免 PostCSS 與 Tailwind 版本之間的設定漂移。

​
下一步

  • 設定 PostCSS 以加入額外的 CSS 轉換。
  • 透過 Stylelint 讓 CSS 維持最佳實務。