Tailwind 未加载 nextjs

Question

我正在尝试使用 tailwindcss 和 next.js 构建一个应用程序

我开始创建 nextjs 应用程序，然后运行以下命令：

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

之后我更新了 tailwind.config.js，如下所示：

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

然后我创建并填充了./syles/globals.css：

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

所有这些步骤都在网站上：https://tailwindcss.com/docs/guides/nextjs 但仍然任何自定义尝试都不起作用，有什么方法可以知道顺风车是否已加载？是不是还有什么事情没做完？

Answer 1

首先将globals.css导入_app.js

import '../styles/globals.css'

也可以代替 @tailwind 执行以下操作，将 tailwind 添加到 globals.css 中

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

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

Answer 2

作为一名学习 Next 的非 JS 前端框架人员，我在

layout.js

文件上的导入路径上遇到了问题。

对我有用并且似乎已经被困住的是老式的路径。我在

import '../app/styles/globals.css'

似乎出现问题后使用了

@

。

我作为一个一直在这个问题上追寻线索一段时间的人提出我的评论。关于损坏的设置有很多意见。