Ate*_*han 23 next.js tailwind-css
Tailwind CSS 不适用于 next.js v13 中的应用程序文件夹，但它适用于 Pages 和 Components 文件夹。在 tailwind.config 文件中，我添加了
但是，没有 CSS 应用于应用程序文件夹中的组件！
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./app/**/*.{js,ts,jsx,tsx}",
],
lor*_*usu 26
try to check the following: (works for me)
set
experimental.appDir: trueto enable app directory feature
const nextConfig = {
experimental: {
appDir: true,
},
}
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
...
}
@tailwind base;
@tailwind components;
@tailwind utilities;
import css in layout => works fine
import css in page => not working
import './globals.css';
...
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.tsximport "../styles/output.css";
export default function Root({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
./app/page.tsxexport 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
啊...找出问题来解决我的评论。
就我而言，我必须对下一个配置进行额外的更新，因为我正在使用 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
}
};
一旦完成此操作，以及 nextjs 文档中列出的步骤，您应该能够在 Next + Turborepo 中使用 tailwind :)
| 归档时间： |
|
| 查看次数： |
21469 次 |
| 最近记录： |