上手使用 TailwindCSS
站长
· 阅读数 50
CSS 的维护成本
随着项目规模的不断扩大，对 CSS 的维护也变得复杂起来：
- CSS 文件不断增多，
项目体积变大 - 添加样式的过程中，需要定义大量的 class 去标记元素，
命名一个准确简洁的 class 需要花不少时间 - 有时还会出现
样式冲突的情况，同事在项目中添加了一个新页面，我自己页面的样式却出了问题 - 有一些组件或元素在迭代中已经被删除，但与其相关的
被废弃的 CSS 依然存在
对于上面这些问题，不同的 CSS 框架或者CSS 预处理器都有着各自的解决方案
这篇文章里我们看看 Tailwind 是怎么处理的
安装使用
根据官方文档提供的步骤，我们在本地试用一下
# 在本地新建一个项目文件
mkdir tailwind-start
cd tailwind-start
# npm 初始化
npm init
# 为项目添加 tailwind 的依赖
npm install -D tailwindcss
# 使用 tailwindcss 命令初始化 Tailwind
npx tailwindcss init
# 新建 index.html input.css 两个文件
touch index.html input.css
在 input.css 中引入 tailwind
/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
使用 tailwindcss 命令，将 input.css 文件转成 output.css，并监听 input.css 的变化
npx tailwindcss -i ./input.css -o ./output.css --watch
在 index.html 中引入 output.css，并添加 tailwind 的 class 来控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 output.css -->
<link rel="stylesheet" href="./output.css">
</head>
<body>
<!-- 这里的 class 就是由 Tailwind CSS 提供的 -->
<div class="bg-blue-500 text-white p-4">
My First Tailwind CSS Project
</div>
</body>
</html>
现在，在浏览器里打开 index.html 就可以看到结果
HTML 代码中的bg-blue-500 text-white p-4 就是 Tailwind 提供的 class
带来的好处
在 Tailwind 的官网写着
Rapidly build modern websites without ever leaving your HTML.
它可以让开发者无需离开模板，更快速地构建页面样式
看一下它和传统 CSS 的写法相比，有哪些优势
- 直接写在模板里（HTML 标签中），也就是说它
和模板是紧密相关的，不用担心删除了组件而忘记删除样式的问题；同时，这样的写法也省去了定义 class 名称的时间；另外，由于直接作用于当前元素，也就不会发生样式冲突的问题 - 所有的
样式 class 都是 Tailwind 内置好的，即使项目规模不断扩大，对应的 CSS 文件也不会变得庞大 - 除此之外，它还
内置了不少方便的功能，如：响应式设计、暗色模式、常用的特殊样式、元素状态等 - 在
VSCode 中添加 Tailwind 的官方插件，可以更快地书写 Tailwind class
不习惯的地方
由于要把大量的 Tailwind class 写在模板里（这有点类似直接写 style 属性）
标签会变得非常臃肿。在浏览整个组件或模板时，这往往会成为视觉上的干扰
Tailwind 以 class 的形式存在（水平方向去书写），我在众多 class 中寻找一个样式时，也比之前（垂直书写样式）更困难
总结
虽然有一些不适应的地方，但总的来说，我认为它带来的好处是远远大于它的“不方便”的，值得一试
转载自:https://juejin.cn/post/7280786332712042554