上手使用 TailwindCSS

在网页开发中,CSS 控制着页面的布局、样式,决定了"好不好看"。这篇上手 CSS 简单介绍了如何使用 CSS 去影响页面的样式

CSS 的维护成本

随着项目规模的不断扩大,对 CSS 的维护也变得复杂起来:

  • CSS 文件不断增多,项目体积变大
  • 添加样式的过程中,需要定义大量的 class 去标记元素,命名一个准确简洁的 class 需要花不少时间
  • 有时还会出现样式冲突的情况,同事在项目中添加了一个新页面,我自己页面的样式却出了问题
  • 有一些组件或元素在迭代中已经被删除,但与其相关的被废弃的 CSS 依然存在

对于上面这些问题,不同的 CSS 框架或者CSS 预处理器都有着各自的解决方案

这篇文章里我们看看 Tailwind 是怎么处理的

安装使用

根据官方文档提供的步骤,我们在本地试用一下

sh 复制代码
# 在本地新建一个项目文件
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

css 复制代码
/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

使用 tailwindcss 命令,将 input.css 文件转成 output.css,并监听 input.css 的变化

sh 复制代码
npx tailwindcss -i ./input.css -o ./output.css --watch

index.html 中引入 output.css,并添加 tailwind 的 class 来控制样式

html 复制代码
<!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 中寻找一个样式时,也比之前(垂直书写样式)更困难

总结

虽然有一些不适应的地方,但总的来说,我认为它带来的好处是远远大于它的"不方便"的,值得一试

相关推荐
大猫会长4 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_4 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe10106 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang6 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi7 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课10 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥11 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101011 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋14 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101015 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端