如何优雅的使用tailwindcss

[forthealllight]

如何优雅的使用tailwindcss

---

    最近有一个项目要彻底重构，使用了一下原子性的css框架tailwindcss，使用之前觉得tailwindcss这种复杂的类名写法并不会带来什么好处，但是深入使用后发现，tailwindcss确实是一款不可多得的，很实用的css框架，并且十分简洁，阅读性和复用性都很好。下面来总结一下，如何在项目中优化的使用tailwindcss。

• 什么是tailwindcss
• 在项目中如何配置tailwindcss
• tailwindcss的基本用法
• tailwindcss的扩展功能

---

一、什么是tailwindcss

    下面是一段真实项目中，tailwindcss的例子。

 <div className="mt-[30px] custom-border-gray box-border rounded-[4px]">
    <header className="h-[32px] box-border px-[16px] py-[6px] custom-border-b-gray">
      <div>
        <div className="float-left">
          <div className="w-[16px] h-[16px] mr-[8px] align-middle inline-block cache-img" />
          <span className="text-xs">Cache Management</span>
        </div>
        <div className="float-right">
          <Checkbox className="mr-[8px]"/>
          <span className="text-xs">Check All</span>
        </div>
      </div>
    </header>
    ...
<div>

    上述这段代码，这些类名，就是tailwindcss用来修饰样式的方法，咋一看，这么多类名特别混乱，让人第一眼觉得还不如直接使用内联的style样式。不过深入使用会发现，tailwindcss这种原子性类名的方法带来了的好处很多，比如：

• 不需要再去定义其他的类名，tailwindcss几乎通过类名可以组合出来所有你想要的样式，因此大部分场景下，你不需要再去自定义类名
• 一般的项目中，随着项目越来越大，css文件的总体大小也会越来越大，但是使用了tailwindcss后，因为其所有的样式都是原子的、可复用的，很少存在自定义样式，因此项目的css文件的大小是固定的，不会一直增长。
• 在使用css的时候，我们很怕一个css样式的改变，然后影响全局样式，但是在tailwindcss中不会有这种情况，因为所有的样式组合都是在局部生效，不会影响全局。

    我们再来看两个tailwindcss的两个小例子。

例子1:

 <Input.TextArea
    placeholder="Enter your description"
    className="focus:h-[88px] h-[30px]"
    autoComplete="off"
  />

效果为(第一张是正常样式，第二张是focus textArea的样式)：

例子2:

<div class="bg-[url('/img/cloud.png')]">
  <!-- ... -->
</div>

效果为：