介紹

是一個 CSS 框架，和bootstrap，element ui，antd一樣。將一些 css 樣式封裝好，用來提高開發(fā)效率的一個工具。個人理解就是可配置的原子CSS

環(huán)境安裝

npm init -y && npm i tailwindcss autoprefixer postcss -D

配置文件

生成tailwind.config.js

// -full指令所有預設的基礎類列出到配置文件中
npx tailwindcss init --full

使用

引入TailWind

將 Tailwind 基礎類引入到項目的樣式表中，如項目的樣式在 style.css 文檔中

/*  styles.css */
@tailwind base; //重置默認屬性
@tailwind components; //一些組件樣式
@tailwind utilities; //工具類，也就是最常用的樣式封裝

tailwind 的工具類涵蓋了大部分的常規(guī)需求，詳細的列表見官網(https://docs.tailwindchina.com/docs)

常用工具類

1.顏色 類名= 使用目標+顏色+權重

一般都把顏色作為背景色、文字顏色或者邊框顏色。舉個??，顏色green：

文字顏色： text-green  
背景顏色： bg-green  
邊框顏色1： border-green      //default，不需要數(shù)字描述  
邊框顏色2： border-green-700  //數(shù)字表示顏色的深淺，越大顏色越深  

2.文本 "text-"

文本顏色、文本裝飾、大小寫轉換和溢出樣式 見：https://docs.tailwindchina.com/docs/text-color

3.字體 "font-"

字體類型 "font-"+{type}

字體粗細 "font-"+{weight}

4.行高 "leading-"+{size}

5.背景 "bg-"

<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>

背景顏色、背景圖片位置等見： https://docs.tailwindchina.com/docs/background-image

6. 邊框 "rounded-"或"border-"

"rounded-"設置邊框的圓角樣式，"border-"設置邊框顏色、粗細、邊框類型等

<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>

7. 邊距 "p-" "m-"

內邊距padding： 使用p{t|r|b|l|x|y}-{size}功能類控制元素一側的內邊距。size是tailwind.config.js中配置的spacing對象的鍵。

外邊距margin： 使用 m{t|r|b|l|x|y}-{size},用法同padding

8. 布局

8.1 display：元素顯示類型

其他樣式：docs.tailwindchina.com/docs/displa…

8.2 Flex "flex-"

<div class="flex">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1 hidden">3</div>
</div>

其他對齊方式：docs.tailwindchina.com/docs/justif…

box-sizing ：控制瀏覽器如何計算元素的總大小的功能類。

image.png

9. 偽類 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能類

并不是所有功能類都可以放在偽類的后面，只有tailwind文檔規(guī)定的才可使用，如果需要在tailwind的配置文件中配置variants選項。

//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
  Hover me
</button>
//disabled
<button class="disabled:opacity-50">
  Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">

編輯器插件

tailwind css intellisense

• 自動補全
• lint
• 懸停預覽：當鼠標懸停在類名上時，展示其對應的 css

編譯

使用Tailwind Cli

編譯默認的 Tailwind CSS 文件

npx tailwindcss build -i style.css  -o _style.css

根據指定的配置文件編譯 Tailwind CSS 文件

npx tailwindcss build -i style.css -o _style.css -c tailwind.config.js

使用PostCss

postcss.config.js文件添加tailwindcss,autoprefixer配置即可

// postcss.config.js
module.exports = {
  plugins: {
    //…
    tailwindcss: {},
    autoprefixer: {},
    //…
  }
}