Some of the tailwind classes wont apply

Answered

muadpn posted this in #help-forum

muadpnOP

2023-10-06T22:16:37.000Z

Getting annoyed about tailwind css next-themes -_-.
i just created a project and installed next-themes and added the toggle button which all works great. and also added darkMode: "class" to the config. now if i add "dark:bg-gray-700/20" it wont work but "dark:bg-gray-700/10" works similary many of tge bg colors wont work like green blah blah
Tailwind Config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
  darkMode: "class",
};

Answered by muadpn

Found the fix:
npm cache clean --force
npm cache verify

if above doesnt work
rd /s /q node_modules && npm install

if above doesnt work
//add this to tailwind config

module.exports = { 
    // Include all relevant paths 
      purge: ['./src/**/*.{js,ts,jsx,tsx}'], 
    // Rest of the configuration 
}

View full answer

3 Replies

muadpnOP

2023-10-06T22:53:37.000Z

started a new project and same stuff keep happening

muadpnOP

2023-10-06T23:01:44.000Z

Found the fix:
npm cache clean --force
npm cache verify

if above doesnt work
rd /s /q node_modules && npm install

if above doesnt work
//add this to tailwind config

module.exports = { 
    // Include all relevant paths 
      purge: ['./src/**/*.{js,ts,jsx,tsx}'], 
    // Rest of the configuration 
}

Answer

muadpnOP

2023-10-06T23:04:09.000Z

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