使用 TailwindCSS 快速开始

由于与 PostCSS 的内置集成，在 Plasmo 中使用 Tailwind CSS 非常容易。设置与官方 Tailwind CSS 文档指南相同。

您也可以使用任何 PostCSS 插件，例如 Autoprefixer、PurgeCSS 等。本指南将引导您完成开始使用 Tailwind CSS 的步骤。

🎉

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

示例

要查看此快速入门的完整示例，请转到 with-tailwindcss 示例。

使用 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">
      计数:
      <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 中

要在内容脚本 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">
      计数:
      <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，请注意内容脚本 UI 样式 CSS 变量注意事项。

例如，如果您计划使用 DaisyUI ，您需要在将样式附加到 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
}