哈喽，大家好，我是指北君。
今天给大家介绍个好东西————TailwindCSS ！
一. 引言
css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。
很多的项目 ，都是对class语义化命名，简单的页面还可以接受，但是随着项目开发的深入，会出现很多类似的语义化场景，导致命名愈发困难。一边要小心不要命名重复，造成样式冲突，另一边又需要考虑class的复用场景。这也给开发人员带来了不小的困扰。
二、什么是Tailwind CSS
Tailwind是一个原子类方式命名的css工具集。
ailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
三、Tailwind CSS特点
- 功能类优先（utility-first） 在一组受约束的原始功能类的基础上构建复杂的组件。使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。 这样您没有为了给类命名而浪费精力，css也会减少。
- 响应式设计 Tailwind 中的每个功能类都可以有条件的应用于不同的断点，这使得您可以轻松的构建复杂的响应式界面而不用离开 HTML。
- 自定义样式 通过自定义功能类来扩展 Tailwind，更加贴合实际业务需求。
- 其他优点 ● 函数与指令：Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。 ● 悬停、焦点和其它状态：使用功能类为处于悬停、焦点和其它状态的元素设置样式。
四.简单上手(demo)
首先新建一个tailwindcss-demo文件夹，然后输入以下命令：
- 新建src文件夹-并添加index.html和input.css文件<!-- ./src/index.html --><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意这里引入的output.css文件，后面会用到 -->
<link rel="stylesheet" href="/dist/output.css">
</head>
<body>
<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>
</body>
</html>
@tailwind base;
@tailwind components;
@tailwind utilities;
- 初始化package.jsonnpm init
- 安装taildwindcss以及它的依赖postcss,autoprefixernpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- 创建tailwind.config.js和 postcss.config.jsnpx tailwind init -p
5.我们在package.json文件下新增一个script
"build": "postcss css/tailwind.css -o public/output.css"
6.在终端中输入npm run build，项目中就会产生一个含有output.css的public文件夹
7.最后，在浏览器中运行index.html即可
五.vscode 补全插件
vscode 安装补全插件,书写也更加便捷
六、在线编辑器
.还可以在 Tailwind Playground 在线编辑器尝试不同的基础类组合并查看效果
七、使用cdn运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<!-- -->
<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
<img class="w-24 h-24 rounded-full" src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg" alt="" width="384" height="512">
<div class="pt-6 space-y-4">
<blockquote>
<p class="text-lg">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption>
<div>
Sarah Dayan
</div>
<div>
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
</body>
</html>
中文文档地址：https://www.tailwindcss.cn/
八、指北君有话说
以上就是TailwindCSS简单使用方法，实际体验起来，可以让编码更优雅，编码速度也会大大加快！
开源指北，立志做最好的开源分享平台，分享有趣实用的开源项目。
欢迎加入交流群，你可以摸鱼、划水、吐槽、咨询。
还有简历模板、各种技术面试资料等100G的资源等着你领取哦。