Tailwind
程序员成长之旅 · 程序员成长之旅/前端学习/前端库 · 408 字
Tailwind
这是什么?
可以简单地理解这是一个预先全局样式, 但是不同点在于他存在JIT引擎(Just-In-Time), 只有应用的类才会被编译进最终的输出
如何使用?
响应式设计
利用断点语法实现 @media 功能，这个操作简直逆天，以前写法都要写很多的 @media 样式，现在完全是加个前缀就可以搞定了
<!-- 默认长度是16, medium screens 是32,large screens 是48 -->
<img class="w-16 md:w-32 lg:w-48" src="..." />
而响应式前缀可以默认可以和大部分功能类一起使用
伪类
支持伪类的前缀标签，以及可以和响应式一起使用
<button
class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600"
>
Hover me
</button>
Tailwind 语法糖
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
}
@layer components {
.btn {
@apply bg-gray-500 text-white font-bold;
@apply py-2 px-4 rounded;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
background-color: theme("colors.blue-500");
}
}
@layer utilities {
@variants hover, focus {
.filter-none {
filter: none;
}
}
@responsive {
.bg-opacity-none {
@apply opacity-0;
}
}
}
@tailwind：使用 @Tailwind 指令将 Tailwind 的 base, components, utilities 插入到 CSS 中。
@apply：使用 @apply 将任何样式内联到您自己的自定义 CSS 中。
@layer：使用 @layer 指令告诉 Tailwind 属于一组自定义样式的 “块”。在 base, components, utilities 有效。
@variants：您可以通过在 @variant 指令中包装它们的定义来生成响应式、hover, focus, active 和其他伪类。
@responsive：通过将 class 的定义包装在 @responsive 指令中，您可以生成自己 class 的响应式。
theme()：使用 theme() 函数和 . 访问你的 Tailwind 配置值。