TailwindCss基本介绍和使用

文章共2,814字 · 阅读需要大约10分钟

一键AI生成摘要，助你高效阅读

问答

下雪天的夏风

5011人浏览 · 2023-07-23 23:56:20

下雪天的夏风 · 2023-07-23 23:56:20 发布

TailwindCss基本介绍和使用

1，TailwindCss是什么
- 1，颗粒度
- 2，优点
2，引入
3，使用
4，一些问题
5，实战问题总结

1，TailwindCss是什么

TailwindCss 官方文档

tailwindcss 是一个 CSS 框架，主要特点是 utility class，实现了原子化 css：1个class代表1个css 属性。

举例：

Class	css属性
`inline-block`	`display: inline-block;`
`pr-px`	`padding-right: 1px;`
`p-2`	`padding: 0.5rem;` /* 8px */
`w-3`	`width: 0.75rem;` /* 12px */
`text-sky-400`	`color: rgb(56 189 248);`

1，颗粒度

<div style="display: inline-block; background-color: rgb(14 165 233); padding: 14px">点击</div>

<!-- tailwindcss -->
<div class="inline-block bg-sky-500 p-4">点击</div>

<!-- 前端纯UI框架，比如 bootstrap-->
<div class="button">点击</div>

<!-- 前端组件库，比如 element-plus-->
<Button type="primary">点击</Button>

可以看到颗粒度是逐步增大并内聚，自由度降低。tailwindcss 在第2层。

2，优点

原子化 css 可以省去起名 class 的烦恼，而且语义化很强。虽然BEM命名也能解决这个问题，但 tailwindcss 还有其他好处
契合 design token。

design token 简单理解：是一种设计师和开发之间一种表达设计决策的通用语言，它可以确保构建的产品在不同平台和设备上都与设计稿一致，确保设计稿被高效、准确地还原。
对前端来说，就是一些定义好的全局 css 变量。包括布局，颜色，尺寸，间隔等等。

支持 breakpoint css（也支持自定义）修饰符，也就是响应式媒体查询。

<!-- 默认16，medium 768px屏幕下 32，large 1024px屏幕下48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

也支持伪类，暗黑模式等修饰符

<div class="bg-black hover:bg-white">content</div>

除了预设的所有 css 属性外，也支持自定义。比如更精细化的颜色和尺寸，实现方式：
- 开发并引入 plugin 和 preset
- 直接在配置文件中自定义（类似于webpack 的配置文件一样，可以进行合并）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js}"],
  theme: {
    // 在 extend 中定义的算是扩展
    extend: {
      // 默认是没有下面 spacing 设置的，这里扩展后，可以在一些距离相关的 class 上使用了。比如 p-13, m-15
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
      }
    },
  },
}

和其他的 css 预处理器类似，也定义了一些 mixins 来更好的使用

举例：使用 @apply 支持属性组合后复用

.primary-button {
  @apply inline-block bg-sky-500 p-4;
}

@apply 是一个废弃的属性（浏览器已经不支持了）。作用就像上面展示的这样，
不过 tailwindcss 和 postcss 都把它实现了。

2，引入

安装

npm install -D tailwindcss

创建配置文件tailwind.config.js

npx tailwindcss init

指定作用目录，并增加对 vue 文件的识别

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在项目的公共 css 文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind 功能模块。

@tailwind base;
@tailwind components;
@tailwind utilities;

运行 tailwindcss CLI 工具，指定源文件 ./src/style.css 和输出文件./src/output.css，开启监听生效目录中所有出现的 class 类名的变化，并编译为 CSS。

npx tailwindcss -i ./src/style.css -o ./src/output.css --watch

src/main.ts 中引入 tailwindcss 编译的输出文件./src/output.css

import { createApp } from "vue";
import "./style.css";
import "./output.css";
import App from "./App.vue";

createApp(App).mount("#app");

最后，设置同时启动 vite 项目和 tailwindcss 监听的命令，参考 npm 并行执行命令

{
  "scripts": {
    "serve": "concurrently \"npm run dev\" \"npm run tail\"",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}

concurrently 是一个跨平台并行执行命令的依赖，需要下载。

最后，执行npm run serve 就可以了。

3，使用

官方文档比较详细，这里不再赘述

简单例子

<template>
  <!-- width: 2.5rem; height: 2.5rem-->
  <div class="w-10 h-10">下雪天的夏风</div>
</template>

4，一些问题

2，需要经常翻阅文档，不会降低效率吗

这个属于是熟练度的问题了，并且因为 tailwindcss 的语义化很强，所以其实到还好。

并且 vscode 也有对应的插件TailwindCSS Tune增加提示，上手起来会比较快。
在这里插入图片描述

3，维护会很困难吗？

还是那句话，因为语义化很强，所以即便经过了人员调动，上手还是很快的。

并且因为原子化css，不用担心 class 中样式的覆盖问题。

4，体积会很大吗？

在 3.x 版本实现了即时编译（JIT）替代了全部建置与消除，因而大幅减少了构建 CSS 的时间和大小。

全部建置与消除：先根据配置文件中的生效目录，生成所有可能的 css 组合。再通过其他的工具，如 PurgeCSS（tailwindcss@2.x 使用的），遍历所有的生效目录，从所有的 css 组合并消除未使用的。
由于生效目录和媒体查询的数量可能较多，所以产生的 css 组合的数量是翻倍的，会导致构建时间长，并且在消除之前的 CSS 文件很大。

以上。