英文:
Tailwind not applying styles to pages in Nextjs but applies to index page
问题
全新使用Tailwind和Nextjs，但之前使用create-react-app制作过一些项目。我正在努力弄清楚为什么Tailwind不会将样式应用于我的页面，但会将样式应用于我的首页（page.tsx）。直接在test.tsx中导入Tailwind会应用样式，但我更希望只需在layout.tsx中进行单一导入就可以将Tailwind应用于所有内容。
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
英文:
Brand new to Tailwind and Nextjs, but have made some projects in the past with create-react-app. I'm struggling to figure out why Tailwind is not applying styles to my pages, but applies styles to my index page (page.tsx). Directly importing Tailwind to test.tsx applies the styles but I would rather have Tailwind be applied to everything with just the single import in 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>
)
}
Folder Structure (Only showing relevant files and folders):
.
├── app
│ ├── globals.css
│ └── layout.tsx
│ └── page.tsx
├── pages
│ └── test.tsx
├── tailwind.config.js
└── package.json
答案1
得分: 2
一切都已正确配置。我必须以某种方式刷新我的 tailwind.config.js 文件，以将 Tailwind 类应用于 test.tsx。有关更多详细信息，请参阅 Victor L 的评论。
英文:
Everything was configured correctly. I had to somehow refresh my tailwind.config.js file to apply the Tailwind classes to test.tsx. See Victor L's comments for more detail.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论