Tailwind CSS在Next.js中无法正常工作

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文件加载上存在问题，我不知道应该针对哪些文件进行处理。

所有人的意见都可以接受。

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

- Usama Abdul Razzaq

---

也许尝试按照 tailwindcss 的建议初始化您的项目？https://tailwindcss.com/docs/guides/nextjs - MarioG8

请不要发布代码图片，任何基于文本的内容都应该直接以文本形式发布在问题中，并且适当地进行格式化，比如使用 [mre]。您可以在此处获取更多的格式化帮助。您也可以了解一下为什么不应该发布代码的图片/链接。 - juliomalves

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 的路径

- Helias

Answer 2

在 globals.css 文件中

之前

@tailwind base;
@tailwind components;
@tailwind utilities;

试一下这个

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

- Faisal Hani

Answer 3

material-tailwind 正在被使用于该项目中。在 _app.js 文件中，你应该按照 material-tailwind 文档 中给出的顺序安排导入。

示例

// 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";

而且设计将正常工作

- Usama Abdul Razzaq

Answer 4

我已经使用相同版本的tailwind和其他依赖项重新创建了相同的项目。对我来说运行良好。 请尝试使用npm install tailwindcss@latest将tailwind升级到最新版本。

或者

我注意到你的globals.css文件中有一个错别字。你忘记了关闭大括号。

@layer components {

}

你的CSS文件应该因为这个出现了错误。如果有帮助，请尝试修复它。

- Simran Singh

---

没有关系，@layer components{} 是正确的，只是在截图时漏掉了括号。 - Usama Abdul Razzaq