简介
Tailwind CSS 是一个基于原子类的 CSS 框架，它的设计理念是将所有常用的 CSS 样式以类名的形式提供出来，这样我们就可以在 HTML 中直接使用类名，而不需要编写繁琐的 CSS 代码。Tailwind CSS 使用简单，而且可以快速构建漂亮的界面。
本文将向大家介绍 Tailwind CSS 的选择器技巧和基础样式指南，帮助初学者快速掌握 Tailwind CSS。
选择器技巧
所有选择器
Tailwind CSS 提供了所有的 CSS 选择器，可以通过添加特定的前缀来使用这些选择器。
下面是一些常用的选择器：
- 类选择器：
.text-green - ID 选择器：
#main-header - 属性选择器：
[data-user-id="3"] - 相邻兄弟选择器：
.header ~ .content - 子元素选择器：
.list > li - 伪类选择器：
:hover - 伪元素选择器：
::before
媒体查询
Tailwind CSS 的媒体查询语法使用了 @screen 前缀：
---- -------------- ------------------
上面的代码表示在小屏幕设备上，文字大小为 14 像素，而在大屏幕设备上，文字大小为 18 像素。
状态选择器
你可以使用类似 .hover: 的前缀来添加状态选择器，比如 active, focus, 和 disabled：
------- ------------------ ----------------- ------------------ -----------------------------
反转选择器
你可以在选择器之前添加 -，来表示取反：
---- --------------------
上面的代码将会给元素添加一个 margin-top 为 -20 像素的偏移量。
基础样式指南
字体
你可以使用 .font-{family}-{weight} 类来快速添加字体：
-- ----------------- ----------------- ----------
上面的代码将会给这段文字使用 serif 字体，并加粗。
颜色
Tailwind CSS 提供了广泛的颜色类名。比如 .text-white、.bg-blue-500、.border-red-200。
大小和边框
你可以使用 .w-{size}、.h-{size}、.border-{size} 以及 .rounded-{size} 来添加宽度、高度、边框以及圆角。其中，{size} 可以是 1、2、3、4、5 等数字或者 full。
---- ----------- ---- -------- -------------- --------------------
上面的代码表示创建一个 32 像素宽、 32 像素高、 4 像素边框、红色的圆形元素。
内边距和外边距
你可以使用 .p-{size} 和 .m-{size} 很方便地添加内边距和外边距。
---- ---------- -----------
上面的代码会为元素添加相同的 4 像素的内边距和外边距。
Flexbox
Tailwind CSS 提供了丰富的 flexbox 类名，你可以使用 .flex, .flex-col, .justify-center, .items-center 等来方便地创建弹性盒子布局。
---- ----------- -------------- ------------ ---- ----------- ------------------ ------------
上面的代码表示创建一个 blue 背景的、高度为 20 像素的弹性盒子布局，文本居中。
结论
本文介绍了 Tailwind CSS 的选择器技巧和基础样式指南，能够帮助新手更快地掌握 Tailwind CSS。当然，Tailwind CSS 还包括更高级的功能，如自定义主题、插件等，需要更进一步的学习和实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a0d20d91dce0dc87e243f