介绍
tailwindcss 学习记录
# css框架的发展史
tailwindcss 是一个css原子类框架, 简单来介绍一下css框架的发展历史, css发展到现在,基本经历了三个阶段。
- 第一个阶段,原生写法
是类似于编程中面向过程的写法,需要什么样式,自己在css中写什么样式。对代码有洁癖的程序员会进行简单的css复用。但是也只是简单的复用,大多数时候还是需要什么写什么,想怎么写怎么写。
- 第二个阶段,CSS组件化。
类似于编程中面向对象的写法,将相同视觉的UI封装成一个组件。比如一个按钮,整个项目中,这个按钮被多次使用,并且样式一致。那么就可以封装成一个按钮类。使用的时候直接使用这个类名称就OK。
这也是bootstrap,element ui,Antd,bulma的做法。
这种框架的优势在于,封装了大量常见的UI。比如你需要一个表单,,需要一个导航,需要一个弹窗,Card卡片。有现成的class。直接拿过来用,就可以快速的完成效果。完全不需要动手写css。
这也是目前比较流行的方法。这几年几乎很少有项目是自己一点一点手写样式的了,多多少少都会使用到一些css框架 (opens new window)。
对于一些需要快速交付的项目,非常适合使用这种组件化css框架。
- 第三个阶段,CSS零件化, 原子化。
CSS原子化。和上面第一个阶段第二个阶段都有类似的地方。依旧是组件,只是每个组件都是一个单一功能的css属性。
什么是原子化
上面第一个阶段的时候,我们讲了有些有对代码有追求的人,会开始复用css
比如页面中大量的用到float:left
那么就可以封装一个类,比如是这样
// 使用
<div class="left" />
// css
.left {float:left}
然后需要使用 float:left
的时候,直接使用.left
就可以。
这个时候我们就更想偷懒了, 那就需要一个CSS原子化的框架
tailwindcss 就是第三个阶段的产物,它做了什么呢:
它将所有的css属性全部封装成语义化的类,比如你想要一个float:left
,它已经帮你封装好了,你直接使用一个float-left
就可以。需要一个宽度为12像素, 只需要写w-3
就可以。
它和bootstrap之类的css框架有什么区别呢?
区别在于bootstrap帮你封装好了一些样式,比如卡片,表单,按钮,导航等等。
bootstrap 降低了定制性,你很难依靠bootstrap去定制一个自己的类,虽然bootstrap也有部分原子化的类名,但那只是常用的一些css属性。
tailwindcss 没有封装任何样式,一丝一毫都没有。
tailwindcss 完全自由,你可以玩出自己的花样,你甚至可以通过tailwindcss ,打造一套属于自己的类似bootstrap这样的ui框架。
tailwindcss 极其适合一些小公司, 没有规范的公司, 这样避免了在没有约束下大量的个人命名或者个人封装的一些css很快
tailwindcss 具备摇树优化(按需使用), 只会打包使用的css内容, 极大减少了对服务器的请求
tailwindcss 支持自定义设置, 这样设计出来的网站, 不会那么相似, 而且tailwindcss 自带黑夜模式
# 在vite中使用
这么好的东西快端上来罢, 官方这里有使用介绍, 不过tailwindcss需要三个包, 才能使用
- tailwindcss 自身
- postcss 这是一个基于js的css转化工具, 是目前现代化css的工具之一
- autoprefixer 这是一个基于can i ues兼容网站自动在css属性中添加浏览器前缀的工具
Vite安装步骤
- 先安装这三个依赖包
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- 创建配置文件
- 接下来,生成您的
tailwind.config.js
和postcss.config.js
文件:
- 接下来,生成您的
npx tailwindcss init -p
创建完毕后, 就可以在根目录看到这两个文件
插件生成目录
- 在
tailwind.config.js
, 配置content
选项指定所有的 pages 和 components 文件,使得 tailwindcss 可以在生产构建中对未使用的样式进行摇树优化。postcss.config.js
这个是postcss配置文件, 如果没有需求可以不进行配置- Tailwind CSS V3 (opens new window) 中
purge
改为了content
, 所以需要注意使用content
而不是purge
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
}
- 阅读tailwindcss单独的优化生产指南 (opens new window),以了解更多关于摇树优化未使用的样式来获得最佳性能的信息。
- 创建一个css文件, 使用
@tailwind
指令来包含 tailwindcss的base
、components
和utilities
样式,来替换掉原来的文件内容。- 该步骤其实和自定义的css或者scss是一样的, 把创建好的文件引入到Vue入口文件
main.js
中, 实现一个全局注册的效果
- 该步骤其实和自定义的css或者scss是一样的, 把创建好的文件引入到Vue入口文件
/** ./styles/tailwind.css **/
@tailwind base;
@tailwind components;
@tailwind utilities;
- Vue入口文件
main.js
中引入创建的tailwindcss
// 引入Tailwind
import './styles/tailwind.css'
如果在
<style>
中使用,lang
建议设置为postcss
, 原文 (opens new window)- 一些语法比如@apply (opens new window) 任何现存的功能类内联到您的自定义 CSS的功能, 如果使用css会被警告
<template>
<div class="btn" />
</template>
<style lang="postcss" scoped>
.btn {
/** 设置postcss后识别@apply */
@apply absolute bottom-0 w-10 h-10 bg-red-300;
}
</style>
- 如果
tailwind.config.js
和postcss.config.js
文件出现报错, 如下图
- 你需要给
.eslintrc.cjs
设置一下全局环境下未定义变量的处理方式
// 设置全局环境下未定义变量的处理方式
env: {
node: true,
browser: true,
commonjs: true,
amd: true
},
查看env配置位置
# 插件推荐
- Tailwind CSS IntelliSense 官方的插件提示
- Tailwind Fold 如果觉得class太长了, 可以用这个插件
- 在项目中的缩进效果
- 如果项目里安装了prettier格式化代码工具还可以安装prettier X tailwindcss (opens new window) 该插件可以自动格式化tailwindcss排序, 比如定位
absolute
在left
前面, 遵循css的编写指南进行的高可读性的排序
- 先安装prettier插件
- 在安装prettier和prettier-plugin-tailwindcss 依赖包
npm install -D prettier prettier-plugin-tailwindcss
- 鼠标邮件进行格式化程序的选择
- 或者直接去
settings.json
中设置
格式化效果
<!-- 格式化前 -->
<div class="left-2/4 bottom-0 h-10 w-56 absolute" />
<!-- 格式化后 -->
<div class="absolute left-2/4 bottom-0 h-10 w-56" />
# 响应式设置
Tailwind 提供五个默认的断点 (opens new window):
sm
640pxmd
768pxlg
1024pxxl
1280px2xl
1536px
只需要在类名前添加断点名称,并用冒号 :
分隔,即可将该样式设定特定页面宽度下才起作用
<!-- 遵循最小优先, 默认宽度是16(小屏) 中号屏幕是32 大号屏幕是48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">
💡 Tailwind 的断点都是基于 min-width
最小宽度的,这是遵循移动优先 mobile first 的原则,即默认样式就是移动端小屏的样式,然后各断点是指当页面宽度大于特定值时,才将样式响应式地进行变化。所以默认的单位要先适应移动端, 然后再对其他大小的屏幕进行响应式设置
可以在 Tailwind 的配置文件 tailwind.config.js
定制断点
// 📄 tailwind.config.js
module.exports = {
theme: {
// 直接在 theme 的 screens 属性中定制的断点会覆盖所有默认断点
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}