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); |
<div style="display: inline-block; background-color: rgb(14 165 233); padding: 14px">点击div>
<div class="inline-block bg-sky-500 p-4">点击div>
<div class="button">点击div>
<Button type="primary">点击Button>
可以看到颗粒度是逐步增大并内聚,自由度降低。tailwindcss
在第2层。
tailwindcss
还有其他好处design token 简单理解:是一种设计师和开发之间一种表达设计决策的通用语言,它可以确保构建的产品在不同平台和设备上都与设计稿一致,确保设计稿被高效、准确地还原。
对前端来说,就是一些定义好的全局 css 变量。包括布局,颜色,尺寸,间隔等等。
breakpoint css
(也支持自定义)修饰符,也就是响应式媒体查询。
<img class="w-16 md:w-32 lg:w-48" src="...">
<div class="bg-black hover:bg-white">contentdiv>
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',
}
},
},
}
mixins
来更好的使用举例:使用 @apply 支持属性组合后复用
.primary-button {
@apply inline-block bg-sky-500 p-4;
}
@apply 是一个废弃的属性(浏览器已经不支持了)。作用就像上面展示的这样,
不过 tailwindcss 和 postcss 都把它实现了。
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");
{
"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
就可以了。
官方文档 比较详细,这里不再赘述
简单例子
<template>
<div class="w-10 h-10">下雪天的夏风div>
template>
这个属于是熟练度的问题了,并且因为 tailwindcss 的语义化很强,所以其实到还好。
并且 vscode 也有对应的插件TailwindCSS Tune
增加提示,上手起来会比较快。
还是那句话,因为语义化很强,所以即便经过了人员调动,上手还是很快的。
并且因为原子化css,不用担心 class 中样式的覆盖问题。
在 3.x 版本实现了即时编译(JIT)替代了全部建置与消除,因而大幅减少了构建 CSS 的时间和大小。
全部建置与消除:先根据配置文件中的生效目录,生成所有可能的 css 组合。再通过其他的工具,如 PurgeCSS([email protected] 使用的),遍历所有的生效目录,从所有的 css 组合并消除未使用的。
由于生效目录和媒体查询的数量可能较多,所以产生的 css 组合的数量是翻倍的,会导致构建时间长,并且在消除之前的 CSS 文件很大。
以上。
tailwindcss 实战总结
参考:
https://zh.wikipedia.org/zh-hans/Tailwind_CSS
https://juejin.cn/post/7012212259950690335
https://www.zhihu.com/question/337939566