Directives

@import

Use the @import directive to inline import CSS files, including Tailwind itself:

@import "tailwindcss";

@theme

Use the @theme directive to define your project's custom design tokens, like fonts, colors, and breakpoints:

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

@source

Use the @source directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:

@source "../node_modules/@my-company/ui-lib";

@utility

Use the @utility directive to add custom utilities to your project that work with variants like hover, focus and lg:

@utility tab-4 {
  tab-size: 4;
}

@variant

Use the @variant directive to apply a Tailwind variant to styles in your CSS:

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

@custom-variant

Use the @custom-variant directive to add a custom variant in your project:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

This lets you write utilities theme-midnight:bg-black and theme-midnight:text-white.