javascript 我安装了顺风css使用自己的指南,我想使用的背景className(`bg-black`)这是不工作的

mbjcgjjk  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(75)

我安装顺风css使用自己的指南npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p我想使用的背景className(bg-black)这是不工作
目录文件路径:Directory
src/styles/global.css

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/pages/index.js

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className='bg-black'>
        Home
      </main>
    </>
  )
}

浏览器结果中的HTML:enter image description here
我试过了

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

但我期待home with background black

xuo3flqw

xuo3flqw1#

如果你想让Tailwindcss工作,你必须导入global.css。
import styles from '@/styles/global.css'

相关问题