Tailwind Layer §

In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity:

.btn {
  background: blue;
  /* ... */
}
 
.bg-black {
  background: black;
}

Here, both buttons will be black since .bg-black comes after .btn in the CSS:

<button class="btn bg-black">...</button>
<button class="bg-black btn">...</button>

To manage this, Tailwind organizes the styles it generates into three different “layers” — a concept popularized by ITCSS.

• The base layer is for things like reset rules or default styles applied to plain HTML elements.
• The components layer is for class-based styles that you want to be able to override with utilities.
• The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.

Being explicit about this makes it easier to understand how your styles will interact with each other, and using the @layer directive lets you control the final declaration order while still organizing your actual code in whatever way you like.

How §

You can use the theme function or @apply directive when adding custom base styles if you want to refer to any of the values defined in your theme.

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
 
@layer base {
  h1 {
    @apply text-2xl;
  }
}
 
@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
}
 
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
 

Reference §

Adding Custom Styles - Tailwind CSS