Hàm và chỉ thị

Chỉ thị

Chỉ thị là các at-rules tùy chỉnh đặc thù của Tailwind mà bạn có thể sử dụng trong CSS của mình, cung cấp chức năng đặc biệt cho các dự án Tailwind CSS.

@import

Sử dụng chỉ thị @import để import nội tuyến các file CSS, bao gồm cả chính Tailwind:

@import "tailwindcss";

@theme

Sử dụng chỉ thị @theme để định nghĩa các token thiết kế tùy chỉnh cho dự án của bạn, như font chữ, màu sắc và breakpoint:

@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);  /* ... */}

Tìm hiểu thêm về cách tùy chỉnh theme của bạn trong tài liệu biến theme.

@source

Sử dụng chỉ thị @source để chỉ định rõ ràng các file nguồn mà tính năng tự động phát hiện nội dung của Tailwind không nhận diện được:

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

Tìm hiểu thêm về tự động phát hiện nội dung trong tài liệu phát hiện class trong file nguồn.

@utility

Sử dụng chỉ thị @utility để thêm các tiện ích tùy chỉnh vào dự án của bạn, hoạt động với các variant như hover, focus và lg:

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

Tìm hiểu thêm về đăng ký tiện ích tùy chỉnh trong tài liệu thêm tiện ích tùy chỉnh.

@variant

Sử dụng chỉ thị @variant để áp dụng một variant Tailwind vào các style trong CSS của bạn:

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

Tìm hiểu thêm về sử dụng variant trong tài liệu sử dụng variant.

@custom-variant

Sử dụng chỉ thị @custom-variant để thêm một variant tùy chỉnh vào dự án của bạn:

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

Điều này cho phép bạn viết các tiện ích như theme-midnight:bg-black và theme-midnight:text-white.

Tìm hiểu thêm về thêm variant tùy chỉnh trong tài liệu thêm variant tùy chỉnh.

@apply

Sử dụng chỉ thị @apply để inline bất kỳ utility class hiện có nào vào CSS tùy chỉnh của bạn:

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

Điều này hữu ích khi bạn cần viết CSS tùy chỉnh (như để ghi đè style của thư viện bên thứ ba) nhưng vẫn muốn làm việc với các token thiết kế của mình và sử dụng cùng cú pháp mà bạn đã quen dùng trong HTML.

@reference

Nếu bạn muốn sử dụng @apply hoặc @variant trong khối <style> của một component Vue hoặc Svelte, hoặc trong CSS modules, bạn sẽ cần import các biến theme, tiện ích tùy chỉnh và variant tùy chỉnh của mình để làm cho các giá trị đó khả dụng trong ngữ cảnh đó.

Để làm điều này mà không bị trùng lặp CSS trong output, hãy sử dụng chỉ thị @reference để import stylesheet chính của bạn để tham chiếu mà không thực sự bao gồm các style đó:

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

Nếu bạn chỉ đang sử dụng theme mặc định mà không có tùy chỉnh nào (ví dụ: bằng cách sử dụng những thứ như @theme, @custom-variant, @plugin, v.v...), bạn có thể import tailwindcss trực tiếp:

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

Import đường dẫn con

Khi sử dụng CLI, Vite, hoặc PostCSS, các chỉ thị @import, @reference, @plugin, và @config đều hỗ trợ subpath imports hoạt động tương tự như bundler và TypeScript path aliases:

{  // ...  "imports": {    "#app.css": "./src/css/app.css"  }}

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

Hàm

Tailwind cung cấp các hàm build-time sau để làm việc với màu sắc và thang đo khoảng cách dễ dàng hơn.

--alpha()

Sử dụng hàm --alpha() để điều chỉnh độ mờ của một màu:

.my-element {  color: --alpha(var(--color-lime-300) / 50%);}

.my-element {  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);}

--spacing()

Sử dụng hàm --spacing() để tạo ra một giá trị khoảng cách dựa trên theme của bạn:

.my-element {  margin: --spacing(4);}

.my-element {  margin: calc(var(--spacing) * 4);}

Điều này cũng có thể hữu ích trong các giá trị tùy ý, đặc biệt là khi kết hợp với calc():

<div class="py-[calc(--spacing(4)-1px)]">  <!-- ... --></div>

Khả năng tương thích

Các chỉ thị và hàm sau đây chỉ tồn tại để tương thích với Tailwind CSS v3.x.

Các chỉ thị @config và @plugin có thể được sử dụng kết hợp với @theme, @utility, và các tính năng hướng CSS khác. Điều này có thể được sử dụng để chuyển dần theme, cấu hình tùy chỉnh, tiện ích, variant và preset của bạn sang CSS. Những thứ được định nghĩa trong CSS sẽ được hợp nhất nếu có thể và nếu không sẽ được ưu tiên hơn những thứ được định nghĩa trong config, preset và plugin.

@config

Sử dụng chỉ thị @config để tải một file cấu hình dựa trên JavaScript cũ:

@config "../../tailwind.config.js";

Các tùy chọn corePlugins, safelist, và separator từ config dựa trên JavaScript không được hỗ trợ trong v4.0. Để safelist các tiện ích trong v4, hãy sử dụng @source inline().

@plugin

Sử dụng chỉ thị @plugin để tải một plugin dựa trên JavaScript cũ:

@plugin "@tailwindcss/typography";

Chỉ thị @plugin chấp nhận tên gói hoặc đường dẫn cục bộ.

theme()

Sử dụng hàm theme() để truy cập các giá trị theme Tailwind của bạn bằng ký hiệu dấu chấm:

.my-element {  margin: theme(spacing.12);}

Hàm này đã bị phản đối, và chúng tôi khuyên bạn nên sử dụng biến theme CSS thay thế.