next.js tailwindcss 未加载样式

Question

我 next.js 安装了 tailwind CSS。我根据说明配置了所有内容。所有代码如下。

_app.js

import '../styles/index.css';

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

export default MyApp

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
    plugins: ["tailwindcss"],
}

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      
    </div>
  )
}

index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

当我在 index.css 上查找来自浏览器的任何更改时（我使用 chrome）它保持不变。我不确定哪里出了问题。

Answer 1

首先确保您正确安装了 tailwindcss 和 next.js。此处参考docs

那就用吧，例子index.js页

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="flex items-center justify-center h-screen flex-col gap-5">
        <h1 className="text-3xl text-red-500 font-semibold">Tailwind CSS</h1>
      </div>
    </div>
  );
}

输出：

next.js tailwindcss 未加载样式

next.js tailwindcss not loading style

next.js

tailwind-css