TailwindCss Functions Directives

一般都写在一个 css 文件。

Directives

• @tailwind
• @layer
• @apply
• @config 【一般放在最后面，@import 导入其他 css 文件后】

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

Functions

• theme()：使用 theme() 函数使用点表示法访问Tailwind配置值。
• screen()：允许创建媒体查询

.content-area {height: calc(100vh - theme(spacing.12));/* 或者 */height: calc(100vh - theme(spacing[2.5]));/* 或者 */background-color: theme(colors.blue.500);/* 或者 */background-color: theme(colors.blue.500 / 75%);
}

/* 等同于 min-width: 640px */
@media screen(sm) {/* ... */
}