TailwindCSS为什么你要使用？

TailwindCSS官方称一个可以让你脱离css文件，在html直接通过class修改样式的框架。

但是TailwindCSS一直受到CSS 方案备受争议。第一个问题就是这和写style css有什么区别？

css的四种颗粒度

首先在我们的进行修改css样式的风法中，多多少少会用到一些4中方式

<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>

<div class="rounded-lg p-4"> Click </div>

<div class="button"> Click </div>

<Button> Click </Button>

越往下走，颗粒度越来越大，约束性变高，自由性不足。而 TailwindCSS 位于第二层。

第一层的话，就很难复用了，所以TailwindCSS选择了第二层的原因。

使用TailwindCSS的好处

在不久之前Facebook经过重构后的css体积已经重原来的413kb 压缩到74kb。

可是很多开发者，很疑惑。我的css文件下去了，但是我的html和组件的文件变得无比的大，并不知道这里的好处在哪里？

首先第一，现在的开发模式已经是组件开发了，就算你在搞一个css来维护。其实很多的样式属性这个组件有，那个组件也存在复用。这个没有必要，这里的自己的组件样式交给组件自己维护就好了。

第二点就是想到这个疑惑的，估计是没有去了解过nginx的gzip。只是知道有这么一回事。

gzip 的核心Deflate使用的是LZ77 算法和 Huffman 编码来压缩文件，重复度越高的文件可压缩的空间就越大。

即使 HTML 因为类名过多造成体积增大，由于 class 高度相似，gzip 也将会得到一个很大的压缩比例。

这才是 TailwindCSS 想要的结果

响应式:

第一次我使用tailwind ui框架的时候，很多情况看多以下的这种写法。

class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

    <!--
      Modal panel, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        To: "opacity-100 translate-y-0 sm:scale-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100 translate-y-0 sm:scale-100"
        To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    -->
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
            <!-- Heroicon name: outline/exclamation -->
            <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
              Deactivate account
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">
                Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
          Deactivate
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

你想要多少的数值，直接写多少就好了。

还有对应响应式

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

对应你使用的@media，你感觉谁更加舒服呢？

@media (min-width: 1024px) { 
.container { grid-template-columns: repeat(3,minmax(0,1fr)); } 
} 
@media (min-width: 768px) { 
.container { grid-template-columns: repeat(2,minmax(0,1fr)); } 
} 
.conainer { display: grid; gap: 1rem; }

第三 就是后期维护的时候，就算有人跑路了，这么多个css，后面的人只需要去看html就能维护。这么多的css file你慢慢找吧，反正我是不想找的。

第四 Jit css编译，使用TailwindCSS在编译的过程中，比css-loader less-loader 都要快

说了这么这些好处，TailwindCSS有什么不足呢？我说说我的看法吧。

第一遇到复杂一点的css操作你不能直接使用TailwindCSS操作

.container:hover .drowload{
    display: block;
}

比如以上的情况，你需要写css来操作子元素的显示，除非你无聊非要用js来写，也不是不行。

第二是增加了记忆负担，它的命名和你认知中的使用不一样，前期需要一直查阅文档，或者下载TailwindCSS的提示插件。要不你无从下手。

但是一旦你有习惯了，形成条件反射，那就是另一种情况，你会直喊香。

总结

如果你正在做代码加速优化的话，你可以试试TailwindCSS.因为gzip后是真的小。

如果你是一个爱折腾的人，可是试试TailwindCSS。

如果你感觉你的组件已经可以完全独立使用一个css的时候，可以使用TailwindCSS来制作这个组件。后面要改代码时候，只需要去这个组件修改，并且不用担心自己的class会影响到他人的组件。