Reputation: 37
I have next.js with tailwind CSS installed. I configured everything accordingly to the instructions. All codes are below.
_app.js
import '../styles/index.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: ["tailwindcss"],
}
index.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>
)
}
index.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
When I look up on index.css for any changes from browser (I use chrome) it stays the same. I'm not sure what's wrong.
Upvotes: 1
Views: 5005
Reputation: 1
on tailwind.config.js make sure that in content include the extensions
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Upvotes: 0
Reputation: 5951
Firstly make sure that You installed tailwindcss
with next.js
properly.
Here you have reference to docs
Then Just use it, example index.js page.
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>
);
}
Output:
Upvotes: 1