函数和指令

Directives

Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

@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;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

Learn more about customizing your theme in the theme variables documentation.

@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";

Learn more about automatic content detection in the detecting classes in source files documentation.

@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;}

Learn more about registering custom utilities in the adding custom utilities documentation.

@variant

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

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

Learn more using variants in the using variants documentation.

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

Learn more about adding custom variants in the adding custom variants documentation.

@apply

Use the @apply directive to inline any existing utility classes into your own custom CSS:

.select2-dropdown {  @apply rounded-b-lg shadow-md;}.select2-search {  @apply rounded border border-gray-300;}.select2-results__group {  @apply text-lg font-bold text-gray-900;}

This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you're used to using in your HTML.

@reference

If you want to use @apply or @variant in the <style> block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.

To do this without duplicating any CSS in your output, use the @reference directive to import your main stylesheet for reference without actually including the styles:

<template>  <h1>Hello world!</h1></template><style>  @reference "../../app.css";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

If you're just using the default theme with no customizations, you can import `