TailwindCSS: CSS Mixins Support and Container Query Fixes
TailwindCSS v4 now supports native CSS mixins with @apply directives and fixes container query negation issues. The team also added comprehensive Vue integration testing for large-scale applications.
Duration: PT1M46S
Transcript
Good morning, this is your TailwindCSS developer briefing for May 15th, 2026.
Jordan Pittman merged support for CSS mixins with @apply directives in TailwindCSS v4. The enhancement aligns with the CSS Custom Functions and Mixins specification, allowing developers to use @apply with dashed identifiers for native mixin support. The implementation prevents Tailwind from attempting to compile these as utilities, though it enforces a limitation where utilities and mixins cannot be mixed in the same at-rule.
Robin Malfait merged a fix for container query negation with custom variants. Previously, when using not-* variants with @container queries, the "not" keyword was incorrectly positioned in the generated CSS. The fix implements proper AST parsing to accurately place negation operators within container queries.
Malfait also merged comprehensive Vue integration testing that validates performance with 1000 components using @reference and @apply directives. The tests confirm stable memory usage and reasonable build times, addressing community concerns about out-of-memory issues in large applications. Build time increased by only 1.2 seconds compared to vanilla implementations.
Additional workflow security improvements were implemented, enforcing frozen lockfiles for pnpm installs and cleaning up GitHub Actions permissions.
What's next: The team continues refining v4 features with focus on CSS specification compliance and performance optimization for enterprise-scale applications.
That's your TailwindCSS update for today - we'll be back tomorrow with more development news.