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 配置值。