tailwindcss · 前端筆記

## 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. 更改樣式感覺更安全 ~~~