Adding Custom Styles

Beyond utilities, Tailwind lets you add your own base styles, component classes, and custom utilities - all using its design tokens.

Base styles with @layer base

Add default element styles to the base layer:

css
@layer base {
  h1 {
    font-size: var( - text-2xl);
  }
  a {
    color: var( - color-blue-600);
    text-decoration-line: underline;
  }
}

Component classes with @layer components

Group reusable styles into a component class that utilities can still override:

css
@layer components {
  .card {
    border-radius: var( - radius-lg);
    background-color: var( - color-white);
    padding-inline: - spacing(6);
    padding-block: - spacing(4);
  }
}

Because it lives in the components layer, class="card rounded-none" still works.

Using variants in CSS

Apply a variant inside your own CSS with @variant:

css
.btn-primary {
  background-color: var( - color-violet-500);
  @variant hover {
    background-color: var( - color-violet-700);
  }
}

@utility for custom utilities

Simple utility that works with every variant:

css
@utility content-auto {
  content-visibility: auto;
}

<div class="hover:content-auto">...</div>

Arbitrary values recap

• bg-[#316ff6] - one-off value.
• [mask-type:luminance] - arbitrary property.
• [&>*]:underline - arbitrary variant.
• bg-( - my-brand-color) - CSS variable shorthand.

When to use custom CSS vs components

Use template partials/components for anything more complex than a single element. Write custom CSS when a partial feels heavy-handed - but it's recommended to build components instead.

TL;DR

• @layer base for element styles.
• @layer components for reusable classes utilities can override.
• @utility registers new utilities.
• @variant applies variants in CSS.