CODEWITHSUNDEEP
next.jstailwind-css
QI10
QI10

Reputation: 37

next.js tailwindcss not loading style

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

Answers (2)

Ra&#250;l Berna Riera
Ra&#250;l Berna Riera

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

MarioG8
MarioG8

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:

enter image description here

Upvotes: 1

Related Questions