next.js tailwindcss未加载样式

lnvxswe2 于 2023-01-02 发布在其他

关注(0)|答案(2)|浏览(194)

我有next.js与顺风CSS安装。我配置一切相应的指示。所有代码如下。

_应用程序. js*

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

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

export default MyApp

- 顺风配置js**

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

- 邮政配置js**

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

- 索引. 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>
  )
}

- 索引. css**

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

当我从浏览器（我用chrome）上查找index.css的任何变化时，它保持不变，我不知道出了什么问题。

next.js

来源：https://stackoverflow.com/questions/70542059/next-js-tailwindcss-not-loading-style

2条答案

按热度按时间

33qvvth11#

首先确保您正确安装了tailwindcss和next.js。这里您可以参考docs
然后就使用它，例如index.jspage.

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>
  );
}

输出：

赞(0）回复(0）举报 2023-01-02

jmo0nnb32#

在tailwind.config.js上，确保内容中包含扩展名

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

赞(0）回复(0）举报 2023-01-02

我来回答

next.js tailwindcss未加载样式

2条答案

相关问题

热门标签

最新问答