我使用自己的指南npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p安装了顺风css我想使用不起作用的背景className(bg-black)
目录文件路径：目录
在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结果：在此处输入图像描述
我试过
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
但我期待着背景为黑色的家
如果你想让Tailwindcss工作，你也必须导入global.css。
import styles from '@/styles/global.css'