React+Next.js环境下Tailwind CSS指定类不生效求助

你的Tailwind样式未渲染的核心问题是**tailwind.config.js中重复声明了content属性**。在JavaScript对象里，重复的键会被最后一个值覆盖，所以当前实际生效的扫描路径只有./components/**/*.{js,ts,jsx,tsx}。如果你的Home组件位于app或pages目录下，Tailwind无法扫描到该组件内的类名，自然不会生成对应的CSS样式。

修正后的配置 #

把所有需要扫描的路径合并到同一个content数组中：

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

后续操作 #

修改配置后，重启你的Next.js开发服务器，Tailwind会重新扫描所有指定目录下的文件，生成对应的样式类，此时text-2xl text-green-500样式就能正常渲染了。

内容的提问来源于stack exchange，提问作者Fabio Marinho