在浏览器扩展中使用 Tailwind CSS

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

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

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

/** @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: [],
};

/* styles/globals.css */
@import "tailwindcss";

import "./styles/globals.css";

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

import "./styles/globals.css";

console.log("Tailwind styles loaded for content script");

@import "tailwindcss";

:root body {
  font-family: "Inter", sans-serif;
}