Tailwind CSS Directives and Functions

Tailwind CSS provides some very useful functions and directives that help developers better manage styles and optimize code.

Through functions and directives, Tailwind gives you more control and flexibility, especially in customizing styles, handling responsive design, and extending functionality.

Tailwind CSS provides a variety of directives and functions to help developers manage and customize styles:

• Usage@tailwindImports Tailwind's base styles, component styles, and utility classes.
• @applyAllows you to combine multiple utility classes into custom classes, avoiding style duplication.
• @layerAllows you to organize and define different layers of styles within custom CSS.
• Built-in functions for colors, spacing, opacity, border radius, etc., allow you to dynamically calculate and generate styles.

@tailwind Directive

@tailwindThe directive is used to import Tailwind's three core layers in CSS files:base, componentsandutilities。

• @tailwind base: imports Tailwind's base styles (such as browser reset styles).
• @tailwind components: imports component styles, used to define base styles for buttons, cards, forms, and more.
• @tailwind utilities: imports utility classes, the core part of Tailwind's style library, providing low-level utility classes for layout, colors, spacing, borders, and more.

These layers define all the base styles, component styles, and utility classes you need when using Tailwind.

/* 自定义样式中引入 Tailwind 样式 */
@tailwind base;          /* 引入基础样式 */
@tailwind components;    /* 引入组件样式 */
@tailwind utilities;     /* 引入工具类 */

@apply Directive

@applyThe directive is used to apply Tailwind's utility classes within custom CSS classes. It allows you to combine common styles together while maintaining Tailwind's maintainability and flexibility.

.my-class {
  @apply <utility-class1> <utility-class2> ... ;
}

By using@apply, you can combine common classes into a custom CSS class, allowing them to be reused.

@layer Directive

@layerThe directive is used to define layers in Tailwind, mainly for organizing custom extension styles. It is often used to create custom components, utility classes, etc., to keep the structure of CSS files clear.

• @layer components: defines custom components.
• @layer utilities: defines custom utility classes.
• @layer base: defines base styles.

Syntax:

@layer components {
  /* 在这里定义自定义的组件类 */
}

@layer utilities {
  /* 在这里定义自定义的工具类 */
}

@import Directive

In Tailwind CSS, you can also use@importdirective to import other CSS files. Although Tailwind itself does not recommend frequent use of@import, it still supports this feature.

Syntax:

@import '<path-to-file>';

Tailwind CSS Functions

Functions in Tailwind CSS are mainly used to dynamically generate styles, such as calculations for colors, opacity, sizing, etc. They allow you to do more calculation and control in config files or custom styles.

Color Functions

Tailwind provides some built-in color functions that can be used to generate different variants of a color (such as darkening, lightening, etc.).

• darken(): darkens a color.
• lighten(): lightens a color.
• opacity(): sets the opacity of a color.

Spacing Functions

Tailwind providesrem, px, emfunctions for units such as ... You can use them to calculate dynamic sizes and spacing values.

Border Radius Functions

In Tailwind CSS, you can also use functions to set border radius. For example, useradius()to calculate different border radii.

Custom Functions

Tailwind CSS allows you to define and use custom functions. You cantailwind.config.jsusethemethe function to access and manipulate Tailwind's design system.

Common Built-in Functions in Tailwind CSS

Tailwind CSS has many built-in functions to help you with calculations when building custom styles.

Here are some common built-in functions:

rem() example:

/* 将数字 16 转换为 rem 单位 */
.my-class {
  font-size: rem(16);  /* 结果为 1rem */
}

em() example:

/* 将数字 16 转换为 em 单位 */
.my-class {
  padding: em(16);  /* 结果为 1em */
}

px() example:

/* 使用 px() 函数生成固定像素 */
.my-class {
  margin: px(16);  /* 结果为 16px */
}

calc() example:

/* 使用 calc() 函数动态计算 */
.my-class {
  width: calc(100% - px(20));  /* 结果为 100% - 20px */
}

theme() example:

/* 使用 theme() 函数访问 Tailwind 主题配置 */
.my-class {
  background-color: theme('colors.green.500');  /* 结果为 #1064B9 */
}

clamp() example:

/* 使用 clamp() 设置字体大小，基于视口宽度变化 */
.my-class {
  font-size: clamp(1rem, 5vw, 3rem);  /* 最小 1rem，最大 3rem，视口宽度介于其间时动态变化 */
}

Using Conditional Operators and Function Combinations

In Tailwind, many features can be used with conditional operators. Combined with responsive design and state classes (such ashover:, focus:), you can dynamically apply these styles.

For example, you can combine@applywith responsive design to achieve certain features: