Tailwind教程1 - 开始使用

Tailwind是一款现代样式框架。本教程旨在循序渐进的教会大家从安装到完全使用tailwindcss搭建页面。我们开始吧！

Tailwind是什么？

tailwind是一个样式库。与UI库不同，它没有封装组件，而是封装css。例如下面的代码会将这个p标签文本设成红色：

<p class="text-red-500">hello world!</p>

使用tailwind的时候，只需要给组件添加class即可。比如我们来写一个按钮：

<button class="p-2 m-2 rounded-md shadow-md bg-blue-800 text-white">BUTTON</button>

显示出来的效果就是这样的：

使用tailwind的好处是，因为极其细粒度的class种类，你可以任意选择你的网页风格。比如还是这个按钮，我们换一种风格：

<button class="w-24 py-2 m-2 border-2 border-black bg-green-400 font-mono">BUTTON</button>

再换一种：

<button class="w-24 py-2 m-2 rounded-full border border-blue-400 text-sm text-blue-400">BUTTON</button>

当然，这种形式也被一些人诟病，因为每次写一个组件就要写一大串样式，会导致代码可读性非常差。这个就看个人喜好了。其实tailwind也是可以通过抽取样式解决这个问题的，不过css写多了的话你可能会和我一样不想给样式起名字了（划掉）。

安装

安装只建议看官方的英文文档。中文文档没有更新，安装方式已经过时了。英文文档链接：

https://tailwindcss.com/docs/installation

因为各种版本安装都有差异的原因，这里就不具体介绍安装方法了。上面的链接找不到的想要的版本话百度也可。不过国内流行的前端框架vue和react都是支持的，可以放心使用。当然，直接使用CDN最为方便，你可以把tailwind嵌入到任何html中。只需一行：

<script src="https://cdn.tailwindcss.com"></script>

下面给出一个html示例，你甚至可以把它复制下来到你的电脑里，保存成html格式来运行。

<!doctype html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script>
</head><body><button class="p-2 m-2 rounded-md shadow-md bg-blue-800 text-white transition hover:bg-blue-600 active:bg-blue-900">BUTTON</button><button class="w-24 py-2 m-2 border-2 border-black bg-green-400 font-mono hover:bg-green-300 active:bg-green-500">BUTTON</button><button class="w-24 py-2 m-2 rounded-full border border-blue-400 text-sm text-blue-400 transition hover:bg-blue-50  active:bg-blue-100">BUTTON</button></body></html>

这个页面把刚刚介绍的三个按钮放进去了，可以试一试效果。

如何学习？

Tailwind是有中文官方文档的，所以如果有耐心的话，完全可以对着官方文档学习。本教程更像是最佳实践，会用一些具体的例子来演示一些重要的样式属性，以及一些比较复杂的组件的实现。着急上手的可以用此教程体验一下。

学习tailwind理论上不需要css基础，甚至你可以通过学习tailwind来反过来学习css，因为tailwind提供的class仅仅是css的一层包装。这里建议安装使用vscode的tailwind插件，不仅可以自动补全，还可以显示这些class原本的css代码。