全新的Tailwind和Nextjs，但在过去的一些项目与react-app。我很难弄清楚为什么Tailwind不应用样式到我的网页，但应用样式到我的索引页（page.tsx）。直接导入Tailwind到test.tsx应用的样式，但我宁愿有Tailwind被应用到一切只有一个导入在layout.tsx。
globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;字符串
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}型
layout.tsx:
import type { Metadata } from 'next'
import './globals.css'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}型
文件夹结构（仅显示相关文件和文件夹）：
.
├── app
│ ├── globals.css
│ └── layout.tsx
│ └── page.tsx
├── pages
│ └── test.tsx
├── tailwind.config.js
└── package.json型
2条答案
按热度按时间b1uwtaje1#
一切都配置正确。我不得不以某种方式刷新我的
tailwind.config.js文件，以将Tailwind类应用于test.tsx。更多细节请参见维克托L的评论。axzmvihb2#
它没有将样式应用于页面路由，因为它只在app/layout中导入，并且只适用于app目录中的路由。
要在页面中申请路由，您需要在/pages上的路由中导入globals.css。
第一个月