tailwind-impl-apply-directive

To use Tailwind CSS @apply directives in Claude Code, implement custom directives and @layer rules for organized CSS management. This resolves integration issues by ensuring custom CSS shares design tokens with Tailwind utilities correctly.

The @apply directive fails inside scoped style blocks because utility classes are not properly resolved in component boundaries. Implementing specific @apply and @variant directive support ensures utility class application works within Vue SFC or Svelte components without errors.

Yes, this Tailwind CSS integration approach supports version 4.0 and requires v3.4 or higher. It is specifically designed for Claude Code projects to resolve custom CSS utility integration and scoped style handling across these versions.

The best way to organize custom CSS and Tailwind utility classes is by using @layer directives. This structures component, base, and utility CSS in an organized order, allowing custom CSS to effectively share design tokens with Tailwind utilities.

To set up custom Tailwind directives, import the skill into your Claude Code project and apply the provided @apply directives within your custom CSS files. This allows your custom styles to leverage Tailwind's utility classes directly.