3 min read
•Question 26 of 38mediumWhat are Layers in Tailwind CSS?
Understanding base, components, and utilities layers.
What You'll Learn
- Three layer types
- Adding custom styles
- Layer ordering
The Three Layers
styles.cssCSS
@tailwind base; /* Reset and element defaults */
@tailwind components; /* Component classes */
@tailwind utilities; /* Utility classes */Adding to Layers
styles.cssCSS
@layer base {
h1 {
@apply text-2xl font-bold;
}
a {
@apply text-blue-600 hover:underline;
}
}
@layer components {
.card {
@apply bg-white rounded-lg shadow p-4;
}
.btn {
@apply px-4 py-2 rounded font-medium;
}
}
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
}Why Layers Matter
- Specificity: Utilities always win over components
- Purging: Unused styles are removed
- Order: base < components < utilities
Without @layer
styles.cssCSS
/* Styles outside @layer aren't purged */
.always-included {
color: red;
}