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">BUTTONbutton>
显示出来的效果就是这样的：
使用tailwind的好处是，因为极其细粒度的class种类，你可以任意选择你的网页风格。比如还是这个按钮，我们换一种风格：
<button class="w-24 py-2 m-2 border-2 border-black bg-green-400 font-mono">BUTTONbutton>
再换一种：
<button class="w-24 py-2 m-2 rounded-full border border-blue-400 text-sm text-blue-400">BUTTONbutton>
当然，这种形式也被一些人诟病，因为每次写一个组件就要写一大串样式，会导致代码可读性非常差。这个就看个人喜好了。其实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">BUTTONbutton>
<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">BUTTONbutton>
<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">BUTTONbutton>
body>
html>
这个页面把刚刚介绍的三个按钮放进去了，可以试一试效果。
如何学习？Tailwind是有中文官方文档的，所以如果有耐心的话，完全可以对着官方文档学习。本教程更像是最佳实践，会用一些具体的例子来演示一些重要的样式属性，以及一些比较复杂的组件的实现。着急上手的可以用此教程体验一下。
学习tailwind理论上不需要css基础，甚至你可以通过学习tailwind来反过来学习css，因为tailwind提供的class仅仅是css的一层包装。这里建议安装使用vscode的tailwind插件，不仅可以自动补全，还可以显示这些class原本的css代码。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）