TailwindCSS介绍与实践
时间：2023-03-28 13:22:25
HTML
作者：康增禄背景Tailwind是一个基于Atomic/Utility-First规范的CSS框架，提供基础实用类（如内边距填充、字体文字字体、动画过渡等）设计类），可以直接在脚本标记语言中组合以构建您想要的设计。目前主流的UI框架，如Ant-design，都是采用直接提供现成组件（如button、form等组件）的方式。开发者可以使用框架提供的组件快速构建页面。但是由于组件的样式一般都是预先预置和封装好的，自定义样式需要覆盖大量的组件内置样式。Tailwind不提供现成的组件，而是提供各种常用的样式类。开发者可以直接在HTML标签中添加各种基础类，为元素设置相应的UI风格，通过各种基础类的“叠加组合”构建出想要的外观，高效地进行定制化网站开发。也就是说，在TailwindCSS中，有很多代表CSS声明的小类。创建组件时，只需要引用其中的一些小类，就可以创建自己需要的组件。语义CSS|Atomic/Utility-FirstCSSSemanticCSS做一个button按钮样式，我们通常会在html或者jsx结构中添加语义类类名，然后在css样式中写上对应类的样式。例如：制作一个危险风格的Button按钮。按钮
.danger-button{height:32px;填充：4px15px；字体大小：14px；边界半径：2px；颜色：#fff；边框颜色：#ff4d4f；背景：#ff4d4f；文本阴影：0-1px0rgb(000/12%)；box-shadow:02px#0000000b;}以上是最常见最常规的写法，叫做语义CSS（SemanticCSS）规范。在这个规范下，追求关注点分离，让结构和风格各司其职，让结构更加语义化。但这样一来，我们也面临着很多问题：给标签添加样式，需要绞尽脑汁想类名，类名必须有语义，符合代码规范，符合其功能；每个类往往有很多样式规则，只有在结构的语义和样式完全相同的情况下才能重用。如果有差异，就很难实现样式复用；如果迁移了html或者jsx结构，我们也必须迁移相应的css，迁移之后，迁移后的样式也可能会随着上下文变得杂乱无章。Atomic/Utility-FirstCSSAtomic/Utility-FirstCSS与SemanticCSS相对，Utility-FirstCSS（功能类优先css）不像SemanticCSS那样将组件样式放在一个类中，而是为我们提供了一组不同的功能类组合而成的工具箱，我们可以将它们混合在一起并将它们应用于html元素。在物理世界中，原子是构成一般物质的最小单位，而在css世界中，一个类只有一个且唯一的css规则。TailwindCSS与Bootstrap类似，使用类名来引用样式。最大的区别也是TailwindCSS的核心，即它是一个基于Atomic/Utility-FirstCSS的CSS框架。TailwindCSS的优势在于它可以高度自定义：Tailwind带有默认配置，您可以在项目中使用“tailwind.config.js”覆盖该配置。从颜色和间距大小到字体的一切都可以使用配置文件轻松定制。并且配置文件的每一部分都是可选的，你只需要指定你想要更改的部分，缺少的部分将使用Tailwind的默认配置。减少为班级取名的苦恼。无需切换上下文：Tailwind几乎提供了开箱即用所需的一切，开发人员不再需要从HTML切换到CSS数百次。响应式设计TailwindCSS遵循移动优先设计模式，断点系统灵活。比如实现一个媒体查询，需要根据不同的屏幕宽度实现不同的图片宽度。传统的写法是：@mediaonlyscreenand(max-width:1280px){.content{width:196px;}}@mediaonlyscreenand(max-width:760px){.content{width:128px;}}在Tailwind中CSS中的表达式如下：
使用技巧来选择数字标签而不是语义标签TailwindCss具有更好的语义，但是使用默认的命名方案会大大增加开发者的内存成本，例如：字体粗细值定义为从细（100）到黑（900）。使用数字标签的方式可以降低将UI工具的值转换为TailwindCss类的成本。比如：font-weight:600不清楚是对应font-bold还是font-semibold，但是font-600就很清楚了。语义标签总是不好的，但数字标签不能覆盖所有场景，我们需要确定使用哪种方法对我们更有利。fontWeight:{thin:'100',extralight:'200',light:'300',normal:'400',medium:'500',semibold:'600',bold:'700',extrabold:'800',black:'900',}fontWeight:{100:'100',200:'200',300:'300',400:'400',500:'500',600:'600',700:'700',800:'800',900:'900',}不建议使用@apply提取组件Tailwind是实用优先的框架，因此创建的组件将包含实用类的集合。这意味着在创建相同的组件时，将编写相同的一组实用程序类。即，当您想更改该组件的实用程序类时，您需要更改具有相同“意图”的所有组件。为了克服这个问题，Tailwind提供了一个解决方案，“ExtractComponents”。Tailwind提供了指令@apply，它允许一次组合多个实用程序类。例如，您有一个具有以下结构的按钮组件：Button在功能上，使用@apply生成新的功能类会产生冗余的css，我们尽量不要使用，这与TailwindCss的设计背道而驰。使用Tailwind制作一个基本按钮button响应式布局Tailwind中的每个实用程序类都可以在不同的断点处有条件地应用，从而可以在不离开HTML的情况下轻松构建复杂的响应式界面。受常见设备分辨率的启发，Tailwind提供了5个断点：sm用于最小宽度为640px的设备；md适用于最小宽度为768px的设备；lg用于最小宽度为1024px的设备；xl适用于最小宽度为1024px1280px的设备；2xl适用于最小宽度为1536像素的设备。这是一个营销页面组件的简单示例，它在小屏幕上使用堆叠布局，在大屏幕上使用并排布局（调整浏览器大小以查看实际效果）： 