tailwind(unforeseen)

作为一个后端程序员，写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/