`@apply`Broken in Tailwind CSS v4.0 – No Clear Fix or Docs!
Problem
Tailwind CSS v4.0 `@apply` Bug Report Introduction I'm in the process of upgrading a large project, actually, five Blazor projects that all conjoin into one via components and different backends. Our focus with this project is to deliver an optimal UI experience to the end-user, which is why we use TypeScript, C#, and of course, our favorite, Tailwind CSS. Btw, huge fans! Now, with that said, we have certain native components where we cannot add CSS classes to the component itself, making `@apply` an essential part of our workflow. However, after upgrading to Tailwind CSS v4.0, `@apply` is no longer working as expected, and there seems to be little guidance on how to transition projects that rely on it. This bug report aims to outline the issue clearly and request either a fix or detailed documentation on what exactly we need to do to overcome this. What version of Tailwind CSS are you using? v4.0.0 What build tool (or framework if it abstracts the build tool) are you using? Webpack 5.97.1 What version of Node.js are you using? v20.11.1 What version of npm are you using? v10.7.0 What IDE are you using? Rider IDE What operating system are you using? macOS Reproduction URL There's an active discussion on this issue where many developers are experiencing the same problem but no one has officially reported it yet. Rather than debating, I’d rather get a solution, so here’s the link to the discussion: https://github.com/tailwindlabs/tailwindcss/discussions/13336#discussio
Error Output
Error: Cannot apply unknown utility class: tw-transform
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix @apply Issue in Tailwind CSS v4.0
The error 'Cannot apply unknown utility class: tw-transform' occurs because Tailwind CSS v4.0 introduced changes in how utility classes are handled, particularly with the `@apply` directive. Some utility classes may have been renamed, removed, or modified, leading to incompatibility with existing styles that rely on `@apply`.
Awaiting Verification
Be the first to verify this fix
- 1
Check Utility Class Availability
Verify if the utility class you are trying to apply (e.g., 'tw-transform') exists in the Tailwind CSS v4.0 documentation. If it has been renamed or removed, you will need to update your CSS accordingly.
bashnpm install tailwindcss@latest - 2
Update Your Tailwind Configuration
Ensure your Tailwind CSS configuration file (tailwind.config.js) is updated to include any new or modified utility classes. You may need to add custom utilities if certain classes are no longer available.
javascriptmodule.exports = { theme: { extend: { transform: { 'none': 'none', 'tw-transform': 'transform' } } } } - 3
Use Fallback Classes
If certain utility classes are not available, consider using fallback classes or custom CSS as a temporary solution until you can refactor your styles. This can help maintain your UI while you transition.
css.custom-transform { transform: translateX(10px); } - 4
Test Your Styles
After making the necessary changes, rebuild your project and test the components to ensure that the styles are applied correctly. Look for any console errors related to CSS.
bashnpm run build
Validation
To confirm the fix worked, check the rendered components in your browser to see if the styles are applied as expected. Additionally, verify that there are no errors in the console related to unknown utility classes.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep