我安装顺风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";
1条答案
按热度按时间xuo3flqw1#
如果你想让Tailwindcss工作，你必须导入global.css。
import styles from '@/styles/global.css'