如何在Next 13的app文件夹中应用Tailwind CSS？

Question

如何在Next 13的app文件夹中应用Tailwind CSS？

23

Tailwind CSS在next.js v13中未应用于app文件夹，但在Pages和Components文件夹中可以正常工作。在tailwind.config文件中，我已经添加了

然而，在app文件夹中的组件上没有应用任何CSS！

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

- Ateeb Khan

15个回答

8

我遇到了相同的问题。

我将globals.css从/app移动到/styles，然后在app/layout.tsx中进行导入。

现在可以正常工作了。

- Arne Pedersen

1

谢谢，因为这解决了我的问题，之前花了一个小时尝试别人的修复方法。我快要放弃了。我不知道为什么这样能行。感觉像是 NextJs 13 内部配置出了问题。 - Reactgular

这应该是答案。我把 global.css 放在 app 文件夹下（_app/global.css_），但没有起作用。后来在 app 文件夹下创建了一个新的 styles 文件夹（_app/styles/global.css_），并在 layout.tsx 中更新了导入引用，现在它正常工作了。 - Jeaf Gilbert

这应该是答案。我把 global.css 放在 app 文件夹下（_app/global.css_），但没有起作用。后来在 app 文件夹下创建了一个新的 styles 文件夹（_app/styles/global.css_），并在 layout.tsx 中更新了导入引用，现在它正常工作了。 - undefined

这对我来说也是个解决办法。很奇怪。 - undefined

7

使用tailwindcss与Nextjs 13和Turbopack

更新依赖项

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

配置 `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置`next.config.js`

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

更新`package.json`

// ...
"scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input ./styles/input.css --output ./styles/output.css --watch\"",
    "build": "tailwindcss ./styles/input.css --output ./styles/output.css && next build",
    "start": "next start",
    "lint": "next lint"
},
// ...

创建`./styles/input.css`

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

创建空的`./styles/output.css`文件

创建 `./app/layout.tsx` 文件

import "../styles/output.css";

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

在`./app/page.tsx`中添加样式

export default function Home() {
  return (
    <h1 className="m-12 text-4xl text-red-600">
      Welcome to NextJS 13 with tailwindcss and turbopack
    </h1>
  );
}

运行项目

npm run dev

参考文献:

- mikolaj semeniuk

5

啊……我找到了解决我的评论问题的方法。

在我的情况下，我需要对我的next配置进行额外的更新，因为我正在使用Turborepo。

在NextJS 12中，以下是我在next.config.js中的内容。

const withTM = require("next-transpile-modules")(["ui"]);

module.exports = withTM({
  reactStrictMode: true,
  experimental: { appDir: true }
});

然而，我通过从最新版本开始创建一个新的turborepo，意识到代码转译的方式已经改变。现在，这也需要在实验性块中声明。

module.exports = {
  reactStrictMode: true,
  experimental: {
    transpilePackages: ["ui"],
    appDir: true
  }
};

如果您按照Next.js文档中列出的步骤操作，再执行此操作，那么您就能在Next.js + Turborepo中使用Tailwind了 :)

- Ryan Brink

3

我认为@lorekkusu是正确的，但他漏掉了一些东西。

假设我正在处理/app/blog/page.tsx，即使它已经在/app/layout.tsx中被导入，globals.css仍需要重新导入。

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

- Amark Wong

13.0.7版本存在这个问题，而13.0.8-canary.2版本则没有。 - Henrik

2

如果您在安装nextjs时选择了"use /src"选项，则需要按以下方式配置tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/app/**/*.{js,ts,jsx,tsx}',
        './src/pages/**/*.{js,ts,jsx,tsx}',
        './src/components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

- Sarthak Malhotra

1

您可以按照以下步骤操作：

在根布局（app/layout.js）中，导入global.css样式表，以将样式应用于应用程序中的每个路由。

- Ed5010

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

1

修改 postcss.config.js 文件并在其中添加 tailwind 插件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

- Thành Trung Phạm

1

确保所有文件夹完好无损。

意思是，如果你正在使用src，

你会得到...

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

所以请确保你的组件文件夹位于app目录下。(呵呵)

示例文件夹结构： app > src, components, utils

在测试和减少项目来解决问题之后，按照上面的答案仍然无法解决问题，很高兴我找到了这个解决方案。

希望能对你有所帮助！

- eloy guides

0

记得在 Nextjs 项目中将文件夹结构更改为 /app 样式时，您需要将此行添加到 tailwind.config.js 中。

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",   // <-------------------
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

接下来请检查以下内容：

在 next.config.js 文件中

const nextConfig = {
  experimental: {
    appDir: true,
  },
}

在globals.css中

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

最后，无论您在何处导入globals.css

都要这样做：

import './globals.css';

您可以参考此文档这里。

- Lonare

这是完全相同的答案：stackoverflow.com/a/74260597/6348157，由@lorekkusu发布。 - Jalal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lorekkusu · Accepted Answer

尝试检查以下内容（这对我起作用）：

在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中

在layout中导入CSS => 可以正常工作

在页面中导入CSS => 不起作用

import './globals.css';
...

如何在Next 13的app文件夹中应用Tailwind CSS？

使用tailwindcss与Nextjs 13和Turbopack

更新依赖项

配置 tailwind.config.js

配置next.config.js

更新package.json

创建./styles/input.css

创建空的./styles/output.css文件

创建 ./app/layout.tsx 文件

在./app/page.tsx中添加样式

运行项目

参考文献:

配置 `tailwind.config.js`

配置`next.config.js`

更新`package.json`

创建`./styles/input.css`

创建空的`./styles/output.css`文件

创建 `./app/layout.tsx` 文件

在`./app/page.tsx`中添加样式