tailwind css 在 nextjs 中无法正常工作

Question

我正在 Next.js 中使用 tailwind，并使用以下命令创建环境：npx create-next-app --example with-tailwindcss with-tailwindcss-app

除了一件事之外，一切都正常

• 我在<span/>标签上使用断点，如果我使用除默认（xs）之外的所有断点，那么我的设计工作正常，但如果将默认断点与其他断点一起使用，则默认/xs适用于所有其他断点。

 <span className=" text-xl text-red-500  sm:text-blue-500 md:text-indigo-500 lg:text-violet-500 font-semibold  "> Hy, I am </span>

在我的代码中text-red-500适用于每个断点

我知道我的语法是正确的，但不知何故在加载 CSS 文件时出现问题，并且我不知道应该定位哪些文件。

大家的意见都可以接受

我还附上了我的项目中的一些文件。

Answer 1

就我而言，问题是，我在tailwind.config.js中有错误的路径：

前：

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}

固定的：

module.exports = {
  content: ["./src/pages/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}

您应该指定相对于 tailwind.config.js 的路径