Nearby lessons
12 of 71⚡ Tailwind CSS - Functions & Directives
📖 Functions & Directives Overview
Tailwind CSS provides powerful functions and directives that extend CSS capabilities and enable dynamic styling. These tools allow you to create flexible, maintainable styles while staying within the utility-first paradigm.
This guide covers the essential functions and directives that make Tailwind CSS a powerful styling framework for modern web development.
🎯 @apply Directive
The @apply directive extracts utility classes into CSS rules. This is perfect for creating component classes while maintaining consistency with your design system.
🔧 @layer Directive
The @layer directive helps organize your CSS into logical layers and controls the order of CSS rules. This ensures your custom styles work properly with Tailwind's utilities.
🎨 theme() Function
The theme() function accesses values from your Tailwind configuration. This allows you to use design tokens consistently across your custom CSS.
🔧 screen() Function
The screen() function creates media queries using your Tailwind breakpoint configuration. This ensures consistency with your responsive design system.
🎭 @config Directive
The @config directive allows you to reference values from your Tailwind configuration directly in your CSS. This is useful for accessing custom configuration values.
🔧 @variant Directive
The @variant directive applies variants to existing CSS rules. This allows you to create variant-specific styles for your custom components.
🎨 @utility Directive
The @utility directive creates custom utility classes. This extends Tailwind's utility system with your own specific needs.
🔧 @reference Directive
The @reference directive includes CSS without generating output. This is useful for importing styles that you want to extend but not output directly.
🎯 Advanced Function Combinations
Combine multiple functions and directives for powerful styling solutions. This enables complex, maintainable CSS architectures.
🔧 Performance Considerations
When using functions and directives, consider performance implications and best practices to maintain efficient CSS generation.
- Use @layer for proper CSS organization
- Leverage theme() for consistent design tokens
- Combine @apply with theme() for maintainable components
- Use screen() for responsive consistency
- Create utilities only when necessary
- Avoid over-engineering simple styles
- Profile CSS output for optimization