CODEWITHSUNDEEP
tailwind-css
Pradeep Bhattarai
Pradeep Bhattarai

Reputation: 31

Why my error occurs after defining @layer components and @apply in tailwind css?

I am learning tailwind CSS. When I cut the classes from index.html and paste it into the CSS file it throws an error. CSS file has

@tailwind base;


@tailwind components;


@tailwind utilities; 

    
@layer components {
    .btn {
        @apply inline-block px-5 py-3 rounded-lg shadow-lg bg-indigo-500 hover:bg-indigo-400 hover:-translate-y-0.5 focus:ring-indigo-500 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-offset-2 active:bg-indigo-600 transform transition text-white uppercase tracking-wider font-semibold text-sm sm:text-base
    }
}

Any suggestion for this. Front UI error Image is enter image description here

Upvotes: 0

Views: 1871

Answers (1)

boxdox
boxdox

Reputation: 572

You have a spelling error in tailwind.config.js, itsbackgroundColor, not backgroungColor

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: { extend: {} },
  variants: { extend: { backgroundColor: ["active"] } },
  plugins: [],
};

Upvotes: 1

Related Questions