Lesson 14 +10 XP

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:

@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:

@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:

.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:

@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.

Adding Custom Styles