Following the installation guide for Tailwind CSS, I ran the command
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -pbg-black) is not working as expected.
Here are the file paths:
In src/styles/global.css:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
In tailwind.config.js:
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {}
},
plugins: []
}
In 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>
</>
)
}
The HTML result in the browser can be seen here: enter image description here
I have also attempted:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
However, what I am hoping for is a homepage with a black background, like so: home with background black