顺风 css 在 nextjs 中无法正常工作答案

【问题标题】：tailwind css not working properly in nextjs顺风 css 在 nextjs 中无法正常工作
【发布时间】：2022-02-16 01:33:26
【问题描述】：

我正在 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 文件时出现了问题，我不知道应该定位哪些文件。

每个人的意见都可以接受

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

【问题讨论】：

也许尝试按照 tailwindcss 的建议初始化您的项目？ tailwindcss.com/docs/guides/nextjs
请不要发布代码图片，任何基于文本的内容都应直接作为文本发布在问题本身中，并正确格式化为minimal reproducible example。你可以得到更多formatting help here。您还可以阅读why you shouldn't post images/links of code。

标签： next.js tailwind-css

【解决方案1】：

我用相同版本的 tailwind 和其他依赖项重新创建了同一个项目。这对我来说可以。请尝试使用npm install tailwindcss@latest将tailwind升级到最新版本

或

我注意到您的 globals.css 文件中有一个错字。你错过了结束大括号

@layer components {

}

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

【讨论】：

不抱歉 @layer components{} 很好，只是在截屏时错过了括号

【解决方案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";

并且设计将正常工作

【讨论】：