CODEWITHSUNDEEP
componentstailwind-csssveltekittailwind-css-4
huzaifa sameer
huzaifa sameer

Reputation: 87

Tailwind 4 custom utilities and component style error

@layer components {
  h1,
  h2,
  h3,
  h4,
  h5,
  h5,
  h6 {
    @apply  font-medium text-heading text-responsive-sm ;
  }


}
@layer utilities{

.text-responsive-sm {
  font-size: 0.75rem; /* text-xs */
}

}

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: text-responsive-sm C:/Users/shahzaib/Downloads/GitHub Huzaifa/claimo/src/app.css

Upvotes: -2

Views: 20

Answers (1)

Wongjn
Wongjn

Reputation: 24556

You'd need to use the @utility directive to register the class with Tailwind so that you can use it in @apply statements:

@utility text-responsive-sm {
  font-size: 0.75rem; /* text-xs */
}

@layer components {
  h1,
  h2,
  h3,
  h4,
  h5,
  h5,
  h6 {
    @apply font-medium text-heading text-responsive-sm ;
  }
}

Upvotes: 1

Related Questions