在本文中，我们将研究我个人最喜欢的设计框架：顺风CSS。一个完全与风格无关的、基于实用程序的库，用于创建快速响应的设计。顺风是如此简单，一旦您理解了命名约定和模式，您几乎就可以猜到大部分功能，而不需要文档。
这里介绍的所有选项都可以在官方文档.)中进行更详细的探索
安装
虽然有几种不同的方法来设置TailWind，如GULP、postCS，甚至它们自己的CLI，但为了学习起见，最简单的入门方法是使用unpkg：https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css.中的CDN URL
或者，您可以使用npm或Yarn：将库安装到您的项目中
1$ npm i tailwindcss
2
3# or, if Yarn is more your thing:
4$ yarn add tailwindcss
样板文件
下面是一个简单的HTML样板文件，其中包含来自unpkg的Tailwind：
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4
5<head>
6 <meta charset="UTF-8" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
9 <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
10 <title>Tailwind CSS</title>
11</head>
12<body>
13
14</body>
15</html>
颜色
颜色的类名始终是相同的，即Element-COLOR-INTENTSY。因此，红色背景变成了bg-red-500，数值范围是100到900。此模式适用于边框、背景和文本。
下面是一个简单的例子：
1<h1 class="text-blue-400">Hello World</h1>
2
3<p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p>
4
5<!-- Border needs to be set before the border-color can be changed -->
6<input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">
大小和间距
宽度和高度，缩写为w和h，取值范围为0到64(有些值缺失，可以在文档或VScode的IntelliSense)中查看)，以及一些关键字，如Auto、full表示100%或Screen表示100vw/vh。Width还可以使用1-6或12中的分数，因此我们可以写50%，如1/2、2/4、3/6或6/12。
空格的工作原理非常类似，只是属性、side(不带破折号的速记)，然后是值。所以paddingBottom：2rem；变成了pb-8，也是从0到64，边是字母t、b、l、r、x代表左右，或者是`y‘代表顶部和底部。
1<div class="bg-green-700 h-16 w-auto mr-10"></div>
2<div class="bg-blue-700 h-24 w-4/6 my-16"></div>
3<div class="bg-red-700 h-40 w-6/12 mx-auto"></div>
4<div class="bg-purple-700 h-56 w-2/12 ml-48"></div>
5
6<div class="border border-white h-40 w-56 mt-10 mx-auto">
7 <h1 class="text-white py-16 px-16">I'm a box</h1>
8</div>
布局
顺风为我们提供了许多标准css定位的便利，比如浮动、位置，甚至Flexbox.使用它们几乎与您的预期一模一样，除了使用Flexbox时，您只需首先使用fle进行初始化。
与SIZE类似，命名模式也就是Property-Value，所以右浮点型变成了Float-Right，JUSTIFY-CONTENT：CENTER；变成了JUSTUSTY-Center。
1<!-- Basic Navbar -->
2<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
3 <h1>Title</h1>
4 <ul class="flex justify-between w-56">
5 <a href="#">
6 <li>Link</li>
7 </a>
8 <a href="#">
9 <li>Link</li>
10 </a>
11 <a href="#">
12 <li>Link</li>
13 </a>
14 </ul>
15</nav>
排版
除了我们已经可以在CSS中做的标准事情外，TailWind还提供了一些快捷方式来处理否则会非常繁琐的事情，比如为我们的字体家族添加应急措施，我们只需使用font-sans、font-serif‘或font-mon`就可以处理这些事情，还可以处理一组字体。
而不是我们一直使用的0-64单位，font-size（缩短为text)采用xs，sm，base，lx和xl到6xl。
除了这些例外，大多数文本选项都是css，其命名模式与以前相同。
1<p class="text-md font-mono font-bold text-white">Hello World</p>
2<p class="text-lg font-sans line-through text-white">Hello World</p>
3<p class="text-4xl font-serif text-center text-white">Hello World</p>
4<p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>
响应性
这才是TailWind真正闪亮的地方，减少了对媒体查询的需求。有了这些前缀，我们可以限制一个类只工作在特定宽度以上，使用无前缀的版本，就像我们到目前为止一直使用的那样，工作范围之外的一切。
sm640pxmd768pxlg1024pxxl1280px
1<body class="bg-gray-900 flex flex-col md:flex-row">
2 <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div>
3
4 <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div>
5
6 <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div>
7</body>
结论
希望这是对这个强大的小库的一个有用的介绍。TailWind的学习曲线很小，它的语法非常一致，以至于只需很少的经验，你就可以开始创建精彩的设计，甚至不需要查看css。