Tailwind CSS not applying certain styles

user_9795038 0
Viewed 5254

I have created a next.js app using the tailwind starter repo provided in the next.js documentation and tailwind was working well. However I recently ran into an issue where certain tailwind classes stopped working , specifically any class related to colors.

I have already tried running npm -i again, but no change occurred.

postcss.config

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors:{
      transparent:"transparent",
      current:"currentColor",
      primary:{
        superlight:"#FFFFFF",
        light:"#FFF8F0",
        DEFAULT:"#FFEBD1",
        dark:"#978F85"
      },
      secondary:{
        light:"#EFEFEF",
        DEFAULT:"#A0A0A0",
        dark:"#26221D"
      }
  },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

_app.js

import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
tailwind-css next.js
1 Answers

You need to extend the theme, not overwrite it.

module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        current: "currentColor",
        primary: {
          superlight: "#FFFFFF",
          light: "#FFF8F0",
          DEFAULT: "#FFEBD1",
          dark: "#978F85"
        },
        secondary: {
          light: "#EFEFEF",
          DEFAULT: "#A0A0A0",
          dark: "#26221D"
        }
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};

Also, keep in mind that JIT mode is still not completely bug-free. If you experience issues like that again, try restarting your server.

user_50572780
Related