CODEWITHSUNDEEP
next.jstailwind-css
Moh3n.As
Moh3n.As

Reputation: 43

tailwind stop working after add custom color to tailwind.config.js

im using tailwind in my Nextjs project. i decided to add my own color set to tailwind.config.js. then when i go back to my project i saw some tailwind classes for some elements not working and some of them works like before. the codes that should be in global css are there. @tailwind base; @tailwind components; @tailwind utilities; and global css imported in layout. it was working fine whole the time. i changed nothing but just i said earlier. maybe its worth to know that im using experimental feature (appDir) in next.config.js.

its now my tailwind.config.js file:

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

portcss file:

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

also has the tailwind in package.json: "tailwindcss": "^3.2.4"

i removed the color set but didnt fixed the problem. i tried npm run dev -- --no-cache but didnt helped. deleting .next also not worked. even moved the folder but the problem exist. then i deleted all tailwind config files and reinstall them and not everything just messed up. there is no more tailwind classes working now.

Upvotes: 2

Views: 791

Answers (1)

92Infinitus92
92Infinitus92

Reputation: 148

Have You tried adding and

  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}"
  ]

Upvotes: 1

Related Questions