我正在尝试在 Tailwind CSS 中添加一个类：

Question

export default function Home() {
  return (
    <>
      <h1 className="text-2xl text-green-500">Netflix Clone</h1>
    </>
  );

This is my tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./app/**/*.{js,ts,jsx,tsx}"],
      content: ["./pages/**/*.{js,ts,jsx,tsx}"],
      content: ["./components/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    }

我正在使用 React、nextjs 和 tailwind。

但这不是渲染；我已经正确安装了依赖项。实际上，Tailwind 样式有效，只是这个类不起作用。在我遵循的代码中，讲师做到了并且有效，但我不明白为什么它在这里不起作用。如果有人能对此有所了解，我将不胜感激。

Answer 1

您可以通过扩展 tailwind.config.js 文件中的主题对象来实现此目的。

module.exports = {
  content: ....,
  theme: {
    extend: {
      colors: {
        customGreen: "#00FF00", // Define your custom color here
      },
    },
  },
  plugins: [],
};

然后可以在下面使用这个

<h1 className="text-2xl text-customGreen">Netflix Clone</h1>