对CSS一窍不通的我，在发现Tailwind CSS后感到无比激动

作为一个后端程序员，写css一直是个痛，平时经常用到诸如bootstrap、element UI、ant design等UI库，虽然大大提高了编程效率，但是遇到需要定制化的设计时候，往往不能很快的实现，仍然要从最基础的前端知识入手

tailwindcss框架与其他前端框架不同的是，它并不提供预先设计好的组件，比如按钮、卡片、头像等等，而是提供了更基础的工具类（utility classes）。你无需被束缚在组件级别的概念上，可以很好的完成定制化需求，因为这个基础工具类可以让你直接在 HTML 源码上构建一个完全定制化的设计。

举一个官网的例子，实现一个如图所示的按钮组件

传统的代码我们需要定义样式class名并实现class

<!-- Extracting component classes: --><button class="btn btn-blue">  Button</button><style>  .btn {    @apply font-bold py-2 px-4 rounded;  }  .btn-blue {    @apply bg-blue-500 text-white;  }  .btn-blue:hover {    @apply bg-blue-700;  }</style>

而使用tailwindcss我们只需要如下代码

<!-- Using utilities: --><button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">  Button</button>

是不是感觉代码简洁了很多，我们需要关注的只是UI层表述的语义，而不用关注css的深层实现，感兴趣的话可以移步官网学习
https://www.tailwindcss.cn/