## tailwindcss
[TOC]
----
原子类，只写类名，不用再写 css 了。
----
### 开始前准备
**安装：**
```shell
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
~~~
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
~~~
~~~
style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
~~~
```shell
npm run dev
```
~~~
App.vue
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
~~~
**编辑器插件设置：**
https://github.com/tailwindlabs/prettier-plugin-tailwindcss
```shell
npm install -D prettier prettier-plugin-tailwindcss
```
~~~
prettier.config.cjs
module.exports = {
plugins: ['prettier-plugin-tailwindcss']
}
~~~
~~~
.prettierrc
{
"bracketSpacing": true,
"printWidth": 16000,
"semi": false,
"singleQuote": true,
"plugins": ["prettier-plugin-tailwindcss"]
}
~~~
----
### 间距
|规格|rem|px|
|--|--|--|
| **0.25** | 0.0625rem | **1px** |
| 0.5 | 0.125rem | 2px |
| **1** | 0.25rem | **4px** |
| 2 | 0.5rem | 8px |
| **4** | **1rem** | **16px** |
1/4rem = 1s = 4px
1rem = 4s = 16px
https://tailwindcss.com/docs/customizing-spacing
https://tailwindcss.com/docs/padding
[default full theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js)
----
### Flex
**flex-basis:**
```css
basis-4 flex-basis: 1rem; /* 16px */
basis-auto flex-basis: auto;
basis-1/12 flex-basis: 8.333333%;
basis-full flex-basis: 100%;
basis-[14.285%] flex-basis: 14.285%;
```
用 `basis` 指令实现 12栅格系统 非常简单。
**flex:**
```css
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;
flex-[n_n_0%] flex: n n 0%;
```
**flex-grow:**
```css
grow flex-grow: 1;
grow-0 flex-grow: 0;
grow-[n] flex-grow: n;
```
**flex-shrink:**
```css
shrink flex-shrink: 1;
shrink-0 flex-shrink: 0;
shrink-[n] flex-shrink: n;
```
**justify-content:**
```css
justify-start justify-content: flex-start;
justify-center justify-content: center;
```
**align-items:**
```css
items-start align-items: flex-start;
items-center align-items: center;
```
**align-content:**
```css
content-center align-content: center;
content-start align-content: flex-start;
```
**align-self:**
```css
self-start align-self: flex-start;
self-center align-self: center;
```
**flex-direction:**
```css
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;
```
**flex-wrap:**
```css
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;
```
**gap:**
```css
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-px gap: 1px;
gap-0.5 gap: 0.125rem; /* 2px */
gap-[3px] gap: 3px;
```
**order:**
```css
order-1 order: 1;
order-12 order: 12;
order-first order: -9999;
order-last order: 9999;
order-none order: 0;
```
----
### Grid
**grid-template-columns:**
```css
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;
```
**grid-template-rows:**
```css
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-12 grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
grid-rows-subgrid grid-template-rows: subgrid;
```
**grid-column:**
```css
col-auto grid-column: auto;
col-span-1 grid-column: span 1 / span 1;
col-span-12 grid-column: span 12 / span 12;
col-span-full grid-column: 1 / -1;
col-start-1 grid-column-start: 1;
col-start-13 grid-column-start: 13;
col-start-auto grid-column-start: auto;
col-end-1 grid-column-end: 1;
col-end-13 grid-column-end: 13;
col-end-auto grid-column-end: auto;
```
注意，这里有一个重要的小技巧，因为生成的 css 中考虑了优先级（`col-span-*` < `col-start-*`），并且 `span` 语法都同时设置了 `grid-column-start` `grid-column-end`，因此可以同时使用 `col-start-2`、`col-span-4` 写出灵活的网格布局。
https://tailwindcss.com/docs/grid-column#starting-and-ending-lines
```html
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
```
**grid-row:**
```css
row-auto grid-row: auto;
row-span-1 grid-row: span 1 / span 1;
row-span-12 grid-row: span 12 / span 12;
row-span-full grid-row: 1 / -1;
row-start-1 grid-row-start: 1;
row-start-13 grid-row-start: 13;
row-start-auto grid-row-start: auto;
row-end-1 grid-row-end: 1;
row-end-13 grid-row-end: 13;
row-end-auto grid-row-end: auto;
```
**grid-auto-flow:**
```css
grid-flow-row grid-auto-flow: row;
grid-flow-col grid-auto-flow: column;
grid-flow-dense grid-auto-flow: dense;
grid-flow-row-dense grid-auto-flow: row dense;
grid-flow-col-dense grid-auto-flow: column dense;
```
**grid-auto-columns:**
```css
auto-cols-auto grid-auto-columns: auto;
auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-auto-columns: minmax(0, 1fr);
```
**grid-auto-rows:**
```css
auto-rows-auto grid-auto-rows: auto;
auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);
```
**justify-items:**
```css
justify-items-start justify-items: start;
justify-items-center justify-items: center;
```
**align-items:**
```css
items-start align-items: flex-start;
items-center align-items: center;
```
**align-self:**
```css
self-start align-self: flex-start;
self-center align-self: center;
```
**justify-self:**
```css
justify-self-start justify-self: start;
justify-self-end justify-self: end;
justify-self-center justify-self: center;
```
**justify-content:**
```css
justify-start justify-content: flex-start;
justify-center justify-content: center;
```
**align-content:**
```css
content-center align-content: center;
content-start align-content: flex-start;
```
**place-items:**
```css
place-items-start place-items: start;
place-items-end place-items: end;
```
**place-self:**
```css
place-self-auto place-self: auto;
place-self-start place-self: start;
```
**place-content:**
```css
place-content-center place-content: center;
place-content-start place-content: start;
```
**gap:**
```css
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
```
----
### 配置
**间距：**
...
**颜色：**
...
**字体：**
...
----
### 插件
**类名顺序格式化：**
https://github.com/tailwindlabs/prettier-plugin-tailwindcss
```shell
npm install -D prettier prettier-plugin-tailwindcss
```
~~~
prettier.config.cjs
module.exports = {
plugins: ['prettier-plugin-tailwindcss']
}
~~~
----
### 封装常用 原子类 & 组件
**btn 按钮:**
```css
btn
btn-primary
btn-info
btn-success
btn-warning
btn-danger
btn-disabled
```
**alert 警告框:**
```
alert
alert-info
alert-success
alert-error
```
**label 标签:**
```css
label
label-info
label-success
label-warning
label-error
```
**badge 徽章:**
```css
badge
badge-info
badge-success
badge-warning
badge-error
```
**头像**
**按钮组**
**下拉菜单**
**nav 导航**
**pagination 分页条**
----
### 使用问题
**与 ElementUI 共用：**
[同时引入tailwind和elementUI样式冲突-阿里云开发者社区](https://developer.aliyun.com/article/935571)
----
### 扩展
~~~
https://juejin.cn/post/6904290292644446222
之前我们项目中采用的是sass+css module的开发模式。但是在使用中发现它有以下几个缺点：
随着版本不断迭代、样式文件体积持续增长。
随着版本不断迭代、scss文件中臃余代码累计、难以删除。
写样式前还得花心思给取个类名。
1. 你不需要耗费大量精力去给 class 起名字
2. 你的 css 文件体积将停止增长
3. 更改样式感觉更安全
~~~
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗？
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践（一）
- 前后端分离的思考与实践（二）
- 前后端分离的思考与实践（三）
- 前后端分离的思考与实践（四）
- 前后端分离的思考与实践（五）
- 前后端分离的思考与实践（六）
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑，为什么要设置成百分比，为什么又是62.5%
- 为什么以一个标准适配的，其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配：都用百分比？
- 番外篇
- 给你看看0.5px长什么样？
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px（二）
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖