我如何在 Next 13 的 app 文件夹中应用 tailwind css答案

【问题标题】：How can i apply tailwind css in app folder in Next 13我如何在 Next 13 的 app 文件夹中应用 tailwind css
【发布时间】：2022-11-02 10:24:59
【问题描述】：

Tailwind CSS 不适用于 next.js v13 中的 app 文件夹，但它适用于 Pages 和 Components 文件夹。在 tailwind.config 文件中，我添加了

但是，没有 CSS 被应用到 app 文件夹中的组件！请指导我！

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

【问题讨论】：

标签： next.js tailwind-css next

【解决方案1】：

尝试检查以下内容：（对我有用）

在next.config.js

设置experimental.appDir: true 启用应用目录功能
const nextConfig = {
  experimental: {
    appDir: true,
  },
}
在tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}
在./app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
在./app/layout.tsx
在布局中导入 css => 工作正常

在页面中导入 css => 不工作
import './globals.css';
...

【讨论】：

【解决方案2】：

我认为@lorekkusu 是对的，但遗漏了一些东西。

假设我正在处理 /app/blog/page.tsx，全局的.css将需要再次导入，尽管它是在 /app/layout.tsx 中导入的

import '../globals.css' //at /app/blog/page.tsx

【讨论】：