快速开始使用 TailwindCSS

使用 Tailwind CSS 与 Plasmo 非常简单，得益于内置的 PostCSS 集成。设置过程与官方 Tailwind CSS 文档指南 (opens in a new tab) 完全相同。

你还可以使用任何 PostCSS 插件，例如 Autoprefixer、PurgeCSS 等。本指南将带你了解如何开始使用 Tailwind CSS。

🎉

在 Chrome 扩展中轻松使用 Tailwind CSS！

示例

要查看此快速入门的完整示例，请访问 with-tailwindcss 示例 (opens in a new tab)。

创建一个带有 TailwindCSS 的 Plasmo 项目

pnpm create plasmo --with-tailwindcss

手动安装

如果你已经有一个 Plasmo 扩展项目，并希望手动添加 TailwindCSS v3，本节适合你！

添加依赖

pnpm i -D tailwindcss@3 postcss autoprefixer

生成你的 tailwind.config.js 文件

npx tailwindcss init -p

定义你的 PostCSS 配置

postcss.config.js

/**
 * @type {import('postcss').ProcessOptions}
 */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

⚠️

确保文件名扩展不是 .cjs，而是 .js —— 否则配置可能会被错误解析为 JSON 并导致失败。

设置 Tailwind 配置

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}

添加根样式

style.css

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

使用

在扩展页面中

一旦所有配置都已就绪，就可以在 React 组件中开始使用 Tailwind！以下是如何在弹出页面中使用 Tailwind 的示例：

popup.tsx

import { useReducer } from "react"
 
import "./style.css"
 
function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default IndexPopup

在内容脚本 UI 中

要在 Content Scripts UI 中使用 Tailwind，你需要将 style.css 文件作为文本数据导入，并通过 getStyle 方法将其暴露给 CSUI 生命周期，以将样式注入到 CSUI shadowDOM 中：

content.tsx

import cssText from "data-text:~style.css"
import { useReducer } from "react"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}
 
const PlasmoOverlay = () => {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default PlasmoOverlay

ℹ️

由于 Tailwind 及其插件通常依赖于 :root 声明 CSS 变量，如果使用内置的 Root Container，请留意 Content Scripts UI 样式 CSS 变量注意事项。

例如，如果你计划使用 DaisyUI (opens in a new tab)，需要在附加样式到 shadowDOM 之前将 :root 范围替换为 :host。

content.tsx

import cssText from "data-text:~style.css"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
  return style
}

快速入门: Redux 快速入门: Supabase