reactjs Tailwind样式显然没有在我的Next.js项目中应用

vfhzx4xs 于 2023-08-04 发布在 React

关注(0)|答案(3)|浏览(134)

我正在沿着一个Next.js教程项目，并注意到我的项目相当不正常......我想是我的顺风风格因为某种原因没有得到应用，试图调整'tailwind.config.js'一点，但似乎没有任何效果。
然后，我尝试完全用create-next-app@latest创建一个新的Next项目，并直接用npm run dev运行它--我保留了所有未编辑的代码。
我本来以为会得到这样的东西：The normal boilerplate "Get Started" page for Next.js
但我得到了这个How the default "Get Started" page for Next.js looks on my pc。
所以在这一点上我有点难住了...我不知道我还能做什么。
谢谢你帮忙！

reactjs

来源：https://stackoverflow.com/questions/76815898/tailwind-styles-are-apparently-not-getting-applied-in-my-next-js-project

3条答案

按热度按时间

nvbavucw1#

我可以想到两个原因为什么顺风风格可能不起作用。您应该检查的第一件事是Tailwind样式表是否包含在页面文档的<head>中。

如果您的网站上没有出现样式表或样式表为空，那么您应该检查：

您是否在global.css文件中包含了tailwind指令？

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

字符串

是否运行tailwindcss监视进程以在样式表中包含使用过的实用程序类？

yarn tailwindcss:build --watch

型
希望能帮上忙

赞(0）回复(0）举报 2023-08-04

cigdeys32#

我很遗憾听到你在Next.js项目中遇到了困难。让我们尝试一步一步地解决问题：
1.检查Node.js和npm版本：确保您的系统上安装了最新版本的Node.js和npm。您可以通过在终端中运行以下命令来检查它们的版本：

node -v
npm -v

字符串
如果您的版本不是最新的，您可以从Node.js官方网站（https://nodejs.org/）下载最新版本并安装它们。
1.验证create-next-app安装：再次检查是否已成功全局安装create-next-app。您可以使用以下npm命令安装它：

npm install -g create-next-app

型
1.新建项目：确认安装了create-next-app后，使用以下命令创建一个新的Next.js项目：

npx create-next-app my-next-app

型
这将创建一个名为my-next-app的新Next.js项目。
1.运行开发服务器：切换到项目目录并启动开发服务器：

cd my-next-app
npm run dev

型
现在，检查默认的“开始”页面是否在浏览器中正确显示。如果它看起来很好，这表明你的Next.js安装工作正常。
1.检查错误：如果默认页面看起来仍然不像预期的那样，打开浏览器的开发工具（通常通过按F12键）并检查控制台是否有任何错误消息。这些错误消息可以为您提供有关可能导致问题的原因的有价值的信息。
1.检查网络请求：确保正确加载所有必要的资源，例如Tailwind CSS或其他依赖项中的CSS文件。检查浏览器开发工具中的“网络”选项卡，查看是否有任何失败或丢失的网络请求。
1.验证Tailwind CSS：如果问题似乎与Tailwind CSS有关，请确保在项目中正确安装和设置了Tailwind。仔细检查tailwind.config.js和postcss.config.js文件中的安装步骤和配置。
1.清空缓存：如果已更改配置文件或安装了新的依赖项，请尝试清除浏览器缓存并重新启动开发服务器。
如果在完成这些步骤之后，您仍然面临问题，那么可能是特定的兼容性问题或导致问题的外部因素。在这种情况下，您可以考虑在Next.js社区论坛或GitHub存储库中寻求帮助，因为其他人可能也遇到过类似的问题。请确保提供尽可能详细的设置信息以及遇到的任何错误消息，以便获得更具体的帮助。

赞(0）回复(0）举报 2023-08-04

yeotifhr3#

首先检查您的package.json，看看是否安装了tailwindcss、postcss和autoprefixer。如果没有，让我们安装它们：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

字符串

然后在tailwin.config.js中检查content中的路径，并确保它们是这样的：

content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],

型
如果你使用的是src目录，则如下所示：

content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],

型

然后在你的css文件中添加tailwind指令，通常是global.css：

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

型
现在运行npm run dev，希望一切都能按预期工作。

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs Tailwind样式显然没有在我的Next.js项目中应用

3条答案

相关问题

热门标签

最新问答