Tailwind 4 custom utilities and component style error

Question

@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

Wongjn · Accepted Answer · 2025-03-08 18:56:39Z

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

answered Mar 8 at 18:56

Wongjn

27k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

huzaifa sameer Mar 12 at 19:09

What if you want to add multiple utilities in previous version I have done this in confiq file now In the new version I have to add in the CSS file

Wongjn Mar 12 at 19:14

Add each @utility per addUtilities()/matchUtilities() call.

Collectives™ on Stack Overflow

Tailwind 4 custom utilities and component style error

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related