Tailwind CSS 是一个快速、灵活的 CSS 框架，它为开发人员提供了一种快速、可定制的方法来创建美观的 UI。与其他框架不同，Tailwind CSS并不提供任何样式文件或CSS文件，而是将其编程思想建立在类名上。
这意味着，要使用 Tailwind CSS 的所有特性，您需要定义所有这些类。虽然这个过程可能有点繁琐，但是在初始化样式方面，Tailwind CSS有一些技巧，可以让它变得更加容易。
常用的 Tailwind 初始化样式
以下是常用的 Tailwind 初始样式：
---- ----- --- ---- ----------------- ----------- -------------- ---- --- --- ---- ----------- ---- ---------- ---------- -------------- ---- ---- --- ---- ---------------- ---------- --------- -------------- ---- -- --- ---- ------------------- ----------- -------------- ---- ----- --- ---- ------------- ----- -------------- ---- -- --- ---- ------------- ----- -------- --------------
功能性样式
box-border：设置 border-box 盒模型，代替默认的 content-box
box-content：设置 content-box 盒模型，代替默认的 border-box
clear-both：防止浮动元素影响布局
clear-left：清除浮动元素影响，从左侧开始
clear-right：清除浮动元素影响，从右侧开始
clear-none：不清除浮动元素影响
盒模型
w-*：设置宽度
h-*：设置高度
max-w-*：设置最大宽度
max-h-*：设置最大高度
min-w-*：设置最小宽度
min-h-*：设置最小高度
文字排版
font-sans：用于反衬字体
font-serif：衬线字体
font-mono：等宽字体
text-left：文本左对齐
text-center：文本居中对齐
text-right：文本右对齐
text-justify：文本两端对齐
颜色
text-*：控制文本颜色
bg-*：控制背景颜色
border-*：控制边框颜色
显示与隐藏
hidden：隐藏元素
block：显示元素，块级元素
inline-block：显示元素，行内块级元素
定位
static：元素定位仅基于文档流
fixed：固定定位，基于浏览器视口进行定位，高度与宽度始终是固定大小
absolute：绝对定位，相对于父元素进行定位
relative：相对定位，定位于原本的位置，通常与 z-index 配合使用
自定义 Tailwind 初始化样式
虽然使用 Tailwind 的初始样式可以加速开发，但它可能无法匹配您的项目需求。为了更好地匹配您的项目需要，您可以自定义这些样式。
定义自定义颜色
在 tailwind.config.js 文件中定义自定义颜色：
-------------- - -
------ -
------- -
------- -
---------- ----------
------------ ----------
----------- ---------
-
-
-
-然后，您可以在 class 名中使用这些颜色：
---- ----------------- -------------- --------------------------
定义自定义字体
在 tailwind.config.js 文件中定义自定义字体：
-------------- - -
------ -
------- -
----------- -
------- ------ ------ -------------
-
-
-
-您可以使用自定义 sans 字体：
---- ---------------------------
定义自定义大小
在 tailwind.config.js 文件中定义自定义大小：
-------------- - -
------ -
------- -
------ -
------ --------
------ --------
------ -------
-
-
-
-您可以使用自定义大小：
---- -----------------------
定义自定义悬停效果
在 tailwind.config.js 文件中定义自定义悬停效果：
-------------- - -
------ -
------- -
------ -
------------- ---------
-
-
-
-这将在悬停时更改元素的背景颜色。
定义自定义动画
在 tailwind.config.js 文件中定义自定义动画：
-------------- - -
------ -
------- -
---------- -
------- -
----- - ---------- -------------- --
------- - ---------- ---------------- -
-
--
---------- -
------- ----- -- ------ ---------
-
-
-
----- ------------------------------
结论
Tailwind CSS 是一个强大的框架，可以快速创建美丽的 UI。使用它的方法是定义类名，Tailwind CSS 提供了许多初始化样式和自定义选项，以便更好地满足项目需求。只需记住一些常见的类名，就可以快速创建令人惊叹的 UI。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670650ead91dce0dc85b9fc0