Tailwind classes Not Working in nuxt app?

May 19, 2023

I created a nuxt app and chose Tailwind as the UI framework. Up to this point when I add a class it is working fine, but when I added a tailwind.config.js using the npx tailwindcss init command . Suddenly the tailwind classes stopped working only if I add any custom ones in the config file. I tried deleting the config file to see if the classes would work again and they did. this is what my config file looks like

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [    './pages/**/*.{html,js,vue}',
  './components/**/*.{html,js,vue}'],
  theme: {
    colors: {
      'raisin' : '#262730',
      'test' : '#D8B4E2'
    },
    extend: {},
  },
  plugins: [],
}

Why is this happening and how can I fix it?

>Solution :

Suddenly the tailwind classes stopped working only if I add any custom ones in the config file.

Assuming the "Tailwind classes" you referred to are Tailwind classes involving color values, then it is because you have defined your own colors in theme.colors which completely replace Tailwind default colors. You may have meant to define your custom colors in theme.extend.colors, which would merge them into the Tailwind default colors:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [    './pages/**/*.{html,js,vue}',
  './components/**/*.{html,js,vue}'],
  theme: {
    extend: {
      colors: {
        'raisin' : '#262730',
        'test' : '#D8B4E2'
      },
    },
  },
  plugins: [],
}