@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

@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

• components
• tailwind-css
• sveltekit
• tailwind-css-4

Share Improve this question Follow asked Mar 8 at 18:33 huzaifa sameerhuzaifa sameer 8711 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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 ;
  }
}