2023年6月26日 16:51:18go评论80阅读模式

英文:

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 &#39;./globals.css&#39;
import { Inter } from &#39;next/font/google&#39;

const inter = Inter({ subsets: [&#39;latin&#39;] })

export const metadata = {
  title: &#39;Create Next App&#39;,
  description: &#39;Generated by create next app&#39;,
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;body className={inter.className}&gt;{children}&lt;/body&gt;
    &lt;/html&gt;
  )
}

tailwind.config.js:

/** @type {import(&#39;tailwindcss&#39;).Config} */
module.exports = {
  content: [
    &#39;./app/**/*.{js,ts,jsx,tsx,mdx}&#39;, // Note the addition of the `app` directory.
    &#39;./pages/**/*.{js,ts,jsx,tsx,mdx}&#39;,
    &#39;./components/**/*.{js,ts,jsx,tsx,mdx}&#39;,

    // Or if using `src` directory:
    &#39;./src/**/*.{js,ts,jsx,tsx,mdx}&#39;,
  ],
  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 (
        &lt;&gt;
            &lt;h1&gt;Showing news for catgory &lt;i&gt;{category}&lt;/i&gt;&lt;/h1&gt;
            {
                articles.map((article: Article) =&gt; (
                    &lt;div key={article.id}&gt;
                                       \/\/\/\/\/\/\/
                        &lt;h2 className=&quot;text-red-500&quot;&gt;
                            {article.id} {article.title}
                        &lt;/h2&gt;
                        &lt;p&gt;{article.description}&lt;/p&gt;
                        &lt;hr /&gt;
                    &lt;/div&gt;
                ))
            }
        &lt;/&gt;
    )
}

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 (
        &lt;&gt;
            &lt;h1 className=&quot;text-red-500&quot;&gt;Hello&lt;/h1&gt;
        &lt;/&gt;
    )
}

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: &#39;transparent&#39;,
      current: &#39;currentColor&#39;,
      &#39;white&#39;: &#39;#ffffff&#39;,
      &#39;purple&#39;: &#39;#3f3cbb&#39;,
      &#39;midnight&#39;: &#39;#121063&#39;,
      &#39;metal&#39;: &#39;#565584&#39;,
      &#39;tahiti&#39;: &#39;#3ab7bf&#39;,
      &#39;silver&#39;: &#39;#ecebff&#39;,
      &#39;bubble-gum&#39;: &#39;#ff77e9&#39;,
      &#39;bermuda&#39;: &#39;#78dcca&#39;,
    },
  },
}

If you want to use their different variants then you can do something like that

module.exports = {
  theme: {
    colors: {
      transparent: &#39;transparent&#39;,
      current: &#39;currentColor&#39;,
      &#39;white&#39;: &#39;#ffffff&#39;,
      &#39;tahiti&#39;: {
        100: &#39;#cffafe&#39;,
        200: &#39;#a5f3fc&#39;,
        300: &#39;#67e8f9&#39;,
        400: &#39;#22d3ee&#39;,
        500: &#39;#06b6d4&#39;,
        600: &#39;#0891b2&#39;,
        700: &#39;#0e7490&#39;,
        800: &#39;#155e75&#39;,
        900: &#39;#164e63&#39;,
      },
      // ...
    },
  },
}

Now you can use it like that

&lt;h2 class=&quot;text-tahiti-500&quot;&gt;Some Text&lt;/h2&gt;

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 &#39;../styles/globals.css&#39;;

const App = ({ Component, pageProps }) =&gt; {
    return &lt;Component {...pageProps} /&gt;
}

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 = () =&gt; {
    return (
        &lt;&gt;
            &lt;h1 className=&quot;text-tahiti-500&quot;&gt;Hello&lt;/h1&gt;
        &lt;/&gt;
    )
}

export default Test;

Build the entire application again