CODEWITHSUNDEEP
visual-studio-codenext.jsfrontendtailwind-css
JY Chang
JY Chang

Reputation: 21

Nextjs Tailwindcss globals.css file not working in darkmode

Im using Visual stuido, and next.js, tailwind Css. I implemented Darkmode, and finished all the set with tailwind.config.js. But In globals.css file, .btn, h1~h6 tag and footer, a, p global css not working. I've tried to fix tailwind.config.j content, import in _app file, but still not working. My tailwindcss verion is 3.0.24, postcss is 8.4.21 and autoprefixer is 10.4.13. next-themes is 0.2.1.

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
      './pages/**/*.{js,ts,jsx,tsx,html}',
      './components/**/*.{js,ts,jsx,tsx,html}',
      './src/**/*.{html,js}'    
     
  ],
  darkMode: 'class',
  theme: {
      extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};


<globals.css>

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

.btn-Projects {
    @apply inline-flex text-white dark:text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg
}

.project-card {
    @apply flex flex-col m-3 rounded-xl w-full
            transition duration-300 transform border border-gray-300
            hover:scale-105
            hover:shadow-lg
            dark:border-gray-200/50
            dark:hover:shadow-gray-400/40

            hover:text-blue-600
}

h1, h2, h3, h4, h5, h6 {
    @apply text-slate-900 dark:text-white
}

footer {
    @apply text-gray-600 dark:text-white
    bg-gray-100 dark:bg-slate-600/20
}

only .project-card global style is working. Rest of them are not applied. I feel like tailwind css cant apply when it relate with darkmode?

Upvotes: 1

Views: 204

Answers (1)

Jesy Jeff Laura. E
Jesy Jeff Laura. E

Reputation: 1

Since you have missed semicolon in Input.css you can use this following code

In Config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

In Input.css

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

@layer components{
  .btn-Projects {
    @apply inline-flex text-white dark:text-white bg-indigo-500 border-0 
    py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg;
  }
  .project-card {
    @apply flex flex-col m-3 rounded-xl w-full transition duration-300 
    transform border border-gray-300 
    hover:scale-105 
    hover:shadow-lg 
    dark:border-gray-200/50
    dark:hover:shadow-gray-400/40
    hover:text-blue-600;
  }
  h1, h2, h3, h4, h5, h6{
    @apply text-slate-900 dark:text-white;
  }
  footer {
    @apply text-gray-600 dark:text-white
    bg-gray-100 dark:bg-slate-600/20;
  }
}

Upvotes: 0

Related Questions