Tailwind CSS的安装配置和体验

Tailwind CSS 简介

「Atomic/Utility-First CSS」，是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。不管你是否听说过「Semantic CSS 」这个名词，实际项目开发中，它都是我们最常用、也是最传统的 CSS 规范。Tailwind CSS是一种和传统CSS编写方式不一样的开发模式，Tailwind CSS编写大量的css的class，预置超多的css样式，让开发者可以通过在HTML的class中以命名的方式去调用这些class，几乎可以不用去写style的代码，只使用class的名称来代替。

Tailwind CSS 环境搭建

最简单的方式就是通过引用CDN：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

一个简单的例子：

<div class="sm:container mx-auto h-64 bg-gray-100 flex">
    <div class="text-slate-950 text-2xl bg-gray-200 h-1/2 flex-1">11</div>
    <div class="text-blue-600 text-xl bg-gray-400 flex-1">222</div>
</div>

再来看一个flex布局，以及box阴影的样式：

<div class="flex flex-wrap sm:container bg-gray-200">
    <div class="shadow-sm w-48 h-48 m-5"></div>
    <div class="shadow w-48 h-48 m-5"></div>
    <div class="shadow-md w-48 h-48 m-5"></div>
    <div class="shadow-lg w-48 h-48 m-5"></div>
    <div class="shadow-xl w-48 h-48 m-5"></div>
    <div class="shadow-2xl w-48 h-48 m-5"></div>
</div>

再来看文字排版：

<div class="text-center mt-10">
    <p class="text-xs">Tailwind CSS</p>
    <p class="text-sm">Tailwind CSS</p>
    <p class="text-base">Tailwind CSS</p>
    <p class="text-lg">Tailwind CSS</p>
    <p class="text-xl">Tailwind CSS</p>
    <p class="text-2xl">Tailwind CSS</p>
    <p class="text-3xl">Tailwind CSS</p>
    <p class="text-4xl">Tailwind CSS</p>
    <p class="text-5xl">Tailwind CSS</p>
    <p class="text-6xl">Tailwind CSS</p>
</div>

Tailwind CSS的优点

可以不再使用传统的style编写方式，通过预置的class可以减少更多的错误，而且熟练了之后css样式的编写会很快。因为预置，可以重复使用省去更多的时间。

Tailwind CSS的缺点

每个class中要声明使用大量的css class，开始的时候可能会不太习惯，不过我几个小时后再用的时候我就觉得我已经离不开她了。

总结

Tailwind CSS上手简单，只要你略懂css的属性，这个框架对于你编写css样式绝对是如虎添翼。

参考：

Tailwind CSS 中文官方文档

使用 Tailwind CSS 一年后，我的一些感受

一次就能看懂的Tailwind CSS介绍