为什么使用TailwindCss框架

时间：2023-03-14 09:05:28 科技观察

简单总结：发现问题：项目中css代码痛点.mock{margin:auto;字体大小：16px；//...mock

上面的代码只是一个例子。在大多数情况下，您应该编写一个类，然后放入一堆样式。这样写多了，你会感觉到一些痛点，例如：1）取名难。如果节点结构太多，真的很难取名。当然，我们可以使用一些规范或者选择器来避免一些命名问题。2）当需要用JS控制样式时，需要另外写一个类，尤其是交互比较多的场景。3）组件复用大家都懂，但是样式复用很少见，导致代码冗余较多。4）全球污染。其实很多工具都可以帮我们自动解决这个问题。5）死码问题。JS我们使用treeshaking来移除无用代码以减小文件大小，但是如何移除CSS？尤其是当项目变大的时候，无用的CSS代码总会出现。6)插入样式表的顺序会影响CSS的实际应用方式。一、TailwindCSS简介Tailwind可以快速地为HTML元素添加样式，并提供大量开箱即用的设计样式。tailwindcss是一个基于比组件更小、更灵活的工具思想的CSS框架。简单的说，就是用类来保证灵活性和方便自定义组件，而不是基于组件进行个性化。官网：https://www.tailwindcss.cn/如果你没见过Tailwind的实际应用，可以看看这个：HelloWorld

这里的类名体现了Tailwind的定义：一个包含多个预定义类（所谓的工具类）的集合。您无需编写基本的CSS样式规则，只需在HTML中直接应用预定义的类名即可。有很多这样的类名。以下列表显示了一些类别和相应的示例：1）背景（bg-gray-200，bg-gradient-to-bl）2）灵活布局（flex-1，flex-row）3）网格布局（grid-cols-1,col-span-4)4)Padding(p-0,p-1)5)Size(w-1,h-1)在开发大型应用时，每个HTML元素都充满了一堆Tailwind工具类名.helloworld

问题：我们如何组织这些类名？也许我们需要创建并遵循排序规则。解决方案：一些HTML元素使用了很多样式。在这种情况下，您应该考虑将样式与HTML标记分开，并将它们放在一个单独的文件中。这样，我们就可以组织样式并增强它们的可读性。您不能将CSS的所有功能“打包”到一个名为class的HTML标记属性中，Tailwind也不能。这样做只会使HTML结构膨胀。@apply对于上面提到的问题，Tailwind允许我们在单个CSS文件中使用它们的类名：.header{@applybg-red-200w-4text-gray-400rounded-smborder-2;}比如据说项目中的按钮都有常用的圆角、内边距、字体等，这样我们就可以封装这么一个类：.btn{@applyp-8rounded-xlfont-semibold;}二、使用Tailwind使用CSS的原因1.超小的文件大小=令人难以置信的性能在开发模式下，Tailwind的输出大小非常大。这是设计使然：在此阶段生成每个可能的类，因此当您想要使用某些东西时，您不必等待进程完成构建。但是，一旦TailwindCSS进入生产模式，所有未使用PurgeCSS工具的类都会被清除。这是通过在项目文件中搜索类名来实现的，只保留那些被使用的类名。您可以在清除数组中的tailwind.config.js中配置将搜索哪些文件路径。//tailwind.config.jsmodule.exports={purge:["./src/**/*.html","./src/**/*.vue",'./src/**/*.js'],theme:{},variants:{},plugins:[],}2.原型设计和快速构建使用常规SCSS，您需要为页面上的每个元素编写自定义类。虽然这提供了更好的控制，但编写自定义类会花费很多时间：您必须在HTML中添加类，在CSS中创建它，然后以长格式写出每个属性。您必须等待CSS构建才能看到结果-而且，如果您需要进行更多更改，则每次都需要重新构建，这可能会花费几秒钟并打断您的流程。TailwindCSS消除了这些额外的步骤，并在设置元素样式时提供了一种简单、快速的开发体验。您可以看到要设置样式的元素，使用速记添加所需的属性，无需等待CSS文件包即可快速更改。所以只要专注于一个地方，不需要频繁切换不同的文件，整个过程感觉非常流畅。

Foobar世界，您好！