next.js tailwindcss 未加载样式答案

【问题标题】：next.js tailwindcss not loading stylenext.js tailwindcss 未加载样式
【发布时间】：2021-12-31 23:14:54
【问题描述】：

我安装了带有 tailwind CSS 的 next.js。我根据说明配置了所有内容。所有代码都在下面。

_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）时，它保持不变。我不确定出了什么问题。

【问题讨论】：

请提供所有代码，可能是 pages 文件夹中的 index.js ？
添加 index.js 文件

标签： next.js tailwind-css

【解决方案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>
  );
}

输出：

【讨论】：

我安装正确。
@QI10 所以试试我的代码，一切都会正常运行 ;-) 祝你好运！最好的问候！
我试过了，但是没用。
发现问题，与tailwind.config.js有关。谢谢！
不客气，致以最诚挚的问候！