样式不适用于带有 TailwindCSS 的 NextJS

Question

我一直在尝试使用 TailwindCSS 为组件设置样式，但该样式不适用。

代码如下：

import Image from 'next/image';

function Header() {
    return (
        <header className="sticky top-0 z-50 grid grid-cols-3 bg-red-500">
            {/* Left */}
            <div className="relative flex items-center h-10 cursor-pointer my-auto">
                <Image src="https://links.papareact.com/qd3" 
                       layout="fill" 
                       objectFit="contain"
                       objectPosition="left"
                />
            </div>

            {/* Middle */}
            <div>

            </div>

            {/* Right */}
            <div>

            </div>


        </header>
    );
}

export default Header;

我正在阅读 documentation，发现我需要在名为 tailwind.config.js 的文件中指定一些信息，所以我这样做了：

module.exports = {
  content: [
    './components/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这有什么问题吗？

Answer 1

确保将此添加到 styles/global。css

@tailwind base;
@tailwind components;
@tailwind utilities;

并在 pages/_app.js

中导入 global.css

 import "../styles/global.css"; 

 function MyApp({ Component, pageProps }) {
 return (
    <Component {...pageProps} /> 
  );
 }
export default MyApp;

并在您的应用程序的根目录中创建 postcss.config.js 并插入此代码

  module.exports = {
    plugins: {
    tailwindcss: {},
   autoprefixer: {},
  },
 }

样式不适用于带有 TailwindCSS 的 NextJS

Style doesn't apply in NextJS with TailwindCSS

next.js

tailwind-css