英文:
Tailwind doesn't apply styles on components in pages folder
问题
Sure, here's the translated content:
NextJS项目已经创建并带有tailwind支持，所以我没有自己设置它。
当我在pages/文件夹中的组件上的HTML元素上添加className时，它似乎根本不起作用，即使DevTools的Elements面板显示className已存在。
我尝试在src/app/目录中添加一个带有tailwind类的组件，它可以正常工作。
我在某个地方看到了对同样问题的答案，可能是因为tailwind.config.js中没有添加**pages/**路径，但在我的配置中已添加。
以下是代码：
更新：
layout.tsx:
import './globals.css';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // 注意添加了`app`目录。
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// 或者如果使用`src`目录：
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
这是在pages/news/[category].tsx中的用法：
export default function ArticleListByCategory({ articles, category }: { articles: Article[], category: string }): JSX.Element {
return (
<>
<h1>显示类别新闻 <i>{category}</i></h1>
{
articles.map((article: Article) => (
<div key={article.id}>
\/\/\/\/\/\/\/
<h2 className="text-red-500">
{article.id} {article.title}
</h2>
<p>{article.description}</p>
<hr />
</div>
))
}
</>
)
}
这是我在网站上看到的内容：
然而，这是src/app/example路由的代码：
src/app/example/page.tsx:
export default function Example(): JSX.Element {
return (
<>
<h1 className="text-red-500">你好</h1>
</>
)
}
这是**/example/**的结果：
英文:
NextJS project has been created already with tailwind support so I didn't set up it by myself
When I add className on html element on component in pages/ folder it simply doesn't work even thought Elements panel in DevTools shows that className is present
I tried to add a component in src/app/ directory with tailwind classes and it works fine
I saw somewhere in answers for the same problem that probably path pages/ is not present in tailwind.config.js but it is added in my config
here is code:
UPD:
layout.tsx:
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
here is usage in pages/news/[category].tsx:
export default function ArticleListByCategory({ articles, category }: { articles: Article[], category: string }): JSX.Element {
return (
<>
<h1>Showing news for catgory <i>{category}</i></h1>
{
articles.map((article: Article) => (
<div key={article.id}>
\/\/\/\/\/\/\/
<h2 className="text-red-500">
{article.id} {article.title}
</h2>
<p>{article.description}</p>
<hr />
</div>
))
}
</>
)
}
and here is what I see on the site:
However, here is src/app/example route code:
src/app/example/page.tsx:
export default function Example(): JSX.Element {
return (
<>
<h1 className="text-red-500">Hello</h1>
</>
)
}
and here is result for /example/
答案1
得分: 1
请阅读本部分
https://tailwindcss.com/docs/customizing-colors
> 如果您想完全替换默认颜色调色板为您自定义的颜色，请将您的颜色直接添加到配置文件的theme.colors部分：
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'purple': '#3f3cbb',
'midnight': '#121063',
'metal': '#565584',
'tahiti': '#3ab7bf',
'silver': '#ecebff',
'bubble-gum': '#ff77e9',
'bermuda': '#78dcca',
},
},
}
如果您想要使用它们的不同变体，可以像这样做：
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'tahiti': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
// ...
},
},
}
现在您可以像这样使用它：
<h2 class="text-tahiti-500">Some Text</h2>
更新
要在页面文件夹中使用tailwindcss，我们应该按照以下步骤进行操作：
在页面文件夹下添加一个_app.js文件并导入样式
import '../styles/globals.css';
const App = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
}
export default App;
在页面文件夹下添加一个test文件夹，然后在新生成的test文件夹下添加一个index.tsx文件
const Test = () => {
return (
<>
<h1 className="text-tahiti-500">Hello</h1>
</>
)
}
export default Test;
重新构建整个应用程序
npm run build
然后启动您的应用程序并导航到localhost:3000/test
英文:
To get this
Please read this section
https://tailwindcss.com/docs/customizing-colors
> If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'purple': '#3f3cbb',
'midnight': '#121063',
'metal': '#565584',
'tahiti': '#3ab7bf',
'silver': '#ecebff',
'bubble-gum': '#ff77e9',
'bermuda': '#78dcca',
},
},
}
If you want to use their different variants then you can do something like that
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'tahiti': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
// ...
},
},
}
Now you can use it like that
<h2 class="text-tahiti-500">Some Text</h2>
UPDATE
To use tailwindcss for the pages folder, we should do the following
Add an _app.js file under the pages folder and import styles
import '../styles/globals.css';
const App = ({ Component, pageProps }) => {
return <Component {...pageProps} />
}
export default App;
Add a test folder under the pages folder and then add an index.tsx file under newly generated test folder
const Test = () => {
return (
<>
<h1 className="text-tahiti-500">Hello</h1>
</>
)
}
export default Test;
Build the entire application again
npm run build
Then start your application and navigate to localhost:3000/test
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论