Tailwind CSS都更新到4.0了,你还在抵触吗?

Tailwind CSS的体量

Tailwind CSS有多火爆呢?

几组数据告诉你?

一组数据告诉你 Tailwind CSS 有多受欢迎:

  1. github 86.1K的 Star, 足以证明它的受欢迎程度。
  2. NPM 周下载量已突破 1000 万, 前端开发者的不二之选
  3. 被无数大公司采用,如 GitHub、Vercel、Laravel 等。
  4. 被很多框架和打包工具推荐,如Vite,Nuxt,React等

从数据上看,Tailwind CSS 已经成为前端开发的主流选择之一

原子化CSS

什么是原子化CSS

原子化 CSS 是一种 CSS 架构 ,它提倡使用高度可复用的小类名 ,每个类名通常只控制单一的样式属性。例如:

css 复制代码
<div class="text-red-500 font-bold p-4 text-[14px]">Hello Tailwind</div>

其中:

  • text-red-500: 代表文字颜色
  • font-bold: 代表加粗
  • p-4: 代表内边距
  • text-[14px]: 代表字体大小为14px

这种方式避免了传统 CSS 中复杂的层叠规则,让样式控制更加直观。

原子化CSS和传统CSS的区别

说了这么一通,我相信用过的都说"真香",用过一次后就离不开了。

关键是没用过的呢?是不是心里还在嘀咕。别急,正餐来了!

Tailwind CSS宝藏库

为什么说Tailwind CSS是一个宝藏,因为你担忧和抵触的地方,Tailwind CSS都给你解决了

类名难记

你可能在担忧,我是不是每次用都要查文档呢?那么多css好不容易记住了,现在又让我再学一遍?

答案是:不用。完全和你使用css一样简单。只需要记住几个关键字,智能提示帮你搞定

VS Code插件 - Tailwind CSS IntelliSense

HTML又长又乱

首先,不可否认,将所有的类名整合到html中,会让你的html变得比较长。但是,当你写的代码又长又乱的时候,你就要停下来想想

  1. 是否违背了创作者的初衷
  2. 架构是否设计不合理

为此,我们简单分析一下,到底是人的问题还是工具的问题。根据以上2点,分析一下你的HTML为什么又长又乱?

  • 因为太长导致太乱

    没有合并之前,你的代码可能是这样的

    ini 复制代码
    <div class="flex justify-center items-center">
        <el-button clsss="bg-blue-500 text-white py-2 px-4 rounded">提交</el-button>
    </div>

    合并后是这样的

    ini 复制代码
    .flex-center {
      @apply flex justify-center items-center;
    }
    .btn-submit {
      @apply bg-blue-500 text-white py-2 px-4 rounded;
    }
    
    <div class="flex-center">
        <el-button clsss="btn-submit">提交</el-button>
    </div>

    现在是不是很清晰了呢?

    我敢说,只要你使用@apply合并类名 ,时刻记着复用样式 ,你的HMLT至少减少1/3,甚至也可以写出像诗一样的代码

  • 因为没有分组和顺序性导致太乱

    没有顺序和分组的书写,是这样的

    css 复制代码
    <div class="p-2 font-bold text-[14px] mt-4 color-[#333333] bg-white">Hello world!</div>

    想到哪写到哪,会让你的代码一眼望上去比较乱,时间长了,一眼看上去很难维护...

    下面我们就着手解决这2个问题

    1. 类排序

    使用 Prettier 进行类排序(Class sorting with Prettier)

    Tailwind CSS 维护了一个官方 Prettier 插件,它会自动按照我们的 推荐的类顺序 对你的类进行排序。

    使用插件后,代码这样的

    css 复制代码
    <div class="bg-white color-[#333333] mt-4 p-2 text-[14px] font-bold">Hello world!</div>

    现在是不是清晰很多了呢?

    不过还不够
    2. 分组

    我们根据样式进行的类别分组,比如颜色,字体,定位,间距等等,每个类别一行,这样你写出的代码会清晰无比

    css 复制代码
    <div class="
        bg-white color-[#333333]
        mt-4 p-2
        text-[14px] font-bold">
    Hello world!</div>

    现在代码是不是清晰的多了

全局类名

不用担心公共类的问题,@apply帮你搞定。

使用 @apply 合并类,前面已经讲过了,就不展开了

样式冲突

也许你还在担心tailwind 的 class 名和我已有的 class 冲突了咋办?我怎么处理兼容问题

别担心,给你的类名加个前缀prefix就搞定了

javascript 复制代码
@import "tailwindcss" prefix(tw);

<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600"> <!-- ... --></div>

拥抱Tailwind CSS

Tailwind CSS为什么受到追捧

  1. 再也不用忍受css上下切换的痛苦了

  2. 再也不用花时间去取语义化类名了

    不用纠结container, wrapper, box等被使用的问题后,如何起名的问题了

  3. 为了加权重,不断的加父级类名,甚至!important,永远不知道哪个样式起作用了。冗长的css让项目很难维护!

  4. 简单完成伪类、伪元素、媒体查询等变体的书写

Tailwind CSS、PrimeFlex、UnoCSS评测

在CSS工具类框架中,除了Tailwind CSS之外,还有其他很多工具类。如PrimeFlex和UnoCSS,它们各有特点,下面我简单的评测一下

  • PrimeFlex: 生态系统较小,多适用于Prime生态,如PrimevVue,PrimeReact。样式和较Tailwind CSS低。只能构建起简单样式框架。最让我吐槽的是,样式竟然用!important。你想替换某个属性,麻烦程度想骂人!
  • UnoCSS: 未构建良好的生态系统,多用于自定义规则和项目优化

总结

TailwindCSS 已经成为前端开发的趋势之一,随着4.0 版本的发布,它的性能更强大、使用更方便。如果你还在抵触,不妨试试看,它可能会彻底改变你的 CSS 编写方式!

相关推荐
liuyang___8 分钟前
vue3+ts的watch全解!
前端·javascript·vue.js
我是哈哈hh15 分钟前
【Vue】组件自定义事件 & TodoList 自定义事件数据传输
前端·javascript·vue.js·vue3·vue2
牧杉-惊蛰17 分钟前
VUE+ElementUI 使用el-input类型type=“number” 时,取消右边的上下箭头
前端·vue.js·elementui
Stella252122 分钟前
14前端项目----登录/注册
前端
群联云防护小杜1 小时前
如何有效防御服务器DDoS攻击
运维·服务器·前端·tcp/ip·安全·ddos
liuyang___3 小时前
vue3+ts的computed属性怎么用?
前端·javascript·vue.js
Python智慧行囊3 小时前
前端三大件--HTML
css·python
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS珠海网页设计网页设计(4页)附源码
javascript·css·html
爱编程的鱼3 小时前
如何用CSS实现HTML元素的旋转效果:从基础到高阶应用
前端·css·html
lhhbk4 小时前
angular的cdk组件库
前端·javascript·angular.js