Skip to content
Search

Tailwind:Directives

lastmod 2026-01-07created 2024-01-2512 edits

@tailwind

Use the @tailwind directive to insert Tailwind's base, components, utilities, and variants styles into your CSS. 

/**
 * Tailwind의 기본 스타일과 플러그인에 의해 등록된 모든 기본 스타일을 주입한다.
 */
@tailwind base;

/**
 * Tailwind의 컴포넌트 클래스와 플러그인에 의해 등록된 모든 컴포넌트 클래스를 주입한다.
 */
@tailwind components;

/**
 * Tailwind의 유틸리티 클래스와 플러그인에 의해 등록된 모든 유틸리티 클래스를 주입한다.
 */
@tailwind utilities;

/**
 * 이 directive를 사용하여 Tailwind가 각 클래스의 호버, 포커스, 응답, 다크 모드 및 기타 변형을 주입하는 위치를 제어합니다.
 * 생략할 경우 Tailwind는 기본적으로 스타일시트의 맨 끝에 이러한 클래스를 추가합니다.
 */
@tailwind variants;

@layer

Use the @layer directive to tell Tailwind which "bucket" a set of custom styles belongs to. Valid layers are base, components, and utilities. 

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

Tailwind automatically moves the CSS within any @layer directive to the same place as the corresponding @tailwind rule, so you don't have to worry about authoring your CSS in a specific order to avoid specific issues.

Any custom CSS added to a layer is only included in the final build if that CSS is actually used in your HTML, just like all of the classes built into Tailwind by default.

Wrapping custom CSS with the @layer directive also lets you use modifiers with those rules, like hover: and focus:, or responsive modifiers like md: and lg:.

@apply

Use @apply to inline existing utility classes into your custom CSS.

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

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

Using with variables

When using it with variables, use the square bracket syntax with Sass's Interpolation feature, as follows: 

$my-val: 12rem;

.parent {
  @apply w-[#{$my-val}];
}

Caveats

When used with existing style components, the CSS Selector breaks.

For example, when using .btn > .btn-disable, 

.parent {
  @apply btn;

  .child {
    @apply btn-disable;
  }
}

if you write it like this, @apply substitutes/inserts the contents of btn and btn-disable into .parent and .child respectively, so the CSS Selector that uses the class names does not work.

In this case, it is better to just put them directly in the tag's class attribute.

important

Any rule applied with @apply has !important removed by default to avoid specific issues: 

.foo {
  color: blue !important;
}
.bar {
  @apply foo;
}

CSS output: 

.foo {
  color: blue !important;
}
.bar {
  color: blue;
}

To @apply an existing class and make it !important, add !important to the end of the declaration. 

.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

If you're using Sass/SCSS, you need to use Sass's Interpolation feature to get this to work. 

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

:nth-child

Just put it in square brackets, as follows. 

.li-item {
  @apply [&:nth-child(4)]:md:w-[337px];
}

For fitst-child: 

.li-item {
  @apply first:w-full;
}

For last-child: 

.li-item {
  @apply last:w-[588px]
}

@screen

Defining blocks for responsive design: 

.root {
  @apply container mx-auto;

  ...

  @screen lg {
    @apply flex items-center h-yourMain;
  }
}

@theme

@theme { ... }
Defines the whole theme from scratch without using the existing Tailwind Theme.
@theme inline { ... }
Keeps the existing Tailwind Theme and applies only the changed parts.

@supports

See also

Favorite site

author Zer0 sitemap