CODEWITHSUNDEEP
javascriptnext.jstailwind-css
Sina Rahimi
Sina Rahimi

Reputation: 281

TailwindCSS styles are not applied in my Next js app

I have created a Next js app. As they said in their documentation, I integrated TailwindCSS into my project. Everything went well. However, the result I got was a web page where no TailwindCSS styles were applied on.

I will provide the files that I think are causing this issue.

I would appreciate it if someone could clarify where I am wrong.

Index.js file

return (
    <div className="flex justify-center">
      <div className="px-4" style={{maxWidth: "1600px"}}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2> Test
        </div>
      </div>
    </div>
       )

postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  content: [
   "./pages/**/*.{js,ts,jsx,tsx}",
   "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
   extend: {},
  },
  plugins: [],
  }

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Upvotes: 3

Views: 8465

Answers (5)

Sina Rahimi
Sina Rahimi

Reputation: 281

A missing import line import '../styles/globals.css' ( My case ) at the beginning of the _app.js file could cause the issue.

I had mistakenly commented out this line in my _app.js file, and everything started to work out fine when I fixed it.

It is also clear that the content property of the module.exports object in tailwind.config file should be set properly, as explained above a couple of times.

Upvotes: 5

Ahmed Chabayta
Ahmed Chabayta

Reputation: 26

your tailwind.config.js doesnt have the code connecting it to the pages you want processed. you should include this.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}", //path to components/pages
    "./components/**/*.{js,ts,jsx,tsx}", //path to components/pages
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

the code above (minus the comments) is from their website,

https://tailwindcss.com/docs/guides/nextjs

Upvotes: 0

Sanusi hassan
Sanusi hassan

Reputation: 301

What worked for me:

  1. add a watch script to your scripts in package.json file

Make sure to give it the correct path for your input/output css files

"scripts": {
    "watch": "npx tailwindcss -i src/input.css -o dist/output.css --watch"
 }

2: run it:

npm run watch

Upvotes: 0

Prashant Singh
Prashant Singh

Reputation: 50

You should add following code in your tailwind.config.js file

module.exports = {
content: [
 "./pages/**/*.{js,ts,jsx,tsx}",
 "./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
 extend: {},
},
plugins: [],
} ```

It should work fine.

Upvotes: 1

Samathingamajig
Samathingamajig

Reputation: 13245

Your tailwind.config.js needs a content field so that Tailwind knows where to look for their utility classes being called.

content: ["./src/**/*.{js,ts,jsx,tsx}"],

Here's my entire config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tailwind does not apply any classes (including their reset classes) until you use one of their utility classes in your code, so if it doesn't know you used any of them then no styles will be applied.

Upvotes: 2

Related Questions