next.js tailwindcss not loading style

Question

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.

Please Provide all code, maybe index.js from pages folder ?

MarioG8
– MarioG8

2021-12-31 12:09:32 +00:00
Commented Dec 31, 2021 at 12:09 — MarioG8
– MarioG8, Commented Dec 31, 2021 at 12:09
Added index.js file

QI10
– QI10

2021-12-31 12:13:18 +00:00
Commented Dec 31, 2021 at 12:13 — QI10
– QI10, Commented Dec 31, 2021 at 12:13

MarioG8 · Accepted Answer · 2021-12-31 12:34:05Z

1

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:

edited Dec 31, 2021 at 12:34

answered Dec 31, 2021 at 12:31

MarioG8

6,1014 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

QI10 Over a year ago

I installed everything correctly.

MarioG8 Over a year ago

@QI10 So try my code in action and everything should work as it should ;-) Good Luck! Best Regards!

QI10 Over a year ago

I tried, but it didn't work.

QI10 Over a year ago

Found the issue, it was related with tailwind.config.js. Thanks!

MarioG8 Over a year ago

You 're Welcome Best regards !

Raúl Berna Riera · Accepted Answer · 2022-12-30 11:25:31Z

0

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: [],
}

answered Dec 30, 2022 at 11:25

Raúl Berna Riera

11 bronze badge

Collectives™ on Stack Overflow

next.js tailwindcss not loading style

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related