tailwind css 在 nextjs 中无法正常工作

Question

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

除一件事外一切正常

我在 <span/> 标签上使用断点如果我使用除 default(xs) 之外的所有断点，那么我的设计工作正常，但如果将默认断点与其他断点一起使用，则 default/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 和其他依赖项重新创建了同一个项目。这对我来说可以。您能否尝试使用 npm install tailwindcss@latest

将 tailwind 升级到最新版本

或

我注意到您的 globals.css 文件中有一个拼写错误。您错过了

的右花括号

@layer components {

}

您的 CSS 文件应该为此给出错误。如果有帮助，请尝试修复它。

Answer 2

material-tailwind 正在这个项目中使用。在 _app.js 中，您应该根据 material-tailwind documentation

中给出的顺序安排导入

例子


// before >>> wrong approach

import "../styles/globals.css";
import Head from "next/head";
import "@material-tailwind/react/tailwind.css";


// after >>> valid approach

import Head from "next/head";
import "@material-tailwind/react/tailwind.css";
import "../styles/globals.css";

并且设计将正常工作

tailwind css 在 nextjs 中无法正常工作

tailwind css not working properly in nextjs

next.js

tailwind-css