0x01 概述 (1)簡介 Tailwind CSS 官網:https://www.tailwindcss.cn/ Tailwind CSS 是一個 CSS 框架,使用初級“工具”類創建佈局 如 Bootstrap 等傳統 CSS 框架,其使用的類通常與組件直接相關;然而,Tailwind 則採用了 ...
0x01 概述
(1)簡介
- Tailwind CSS 官網:https://www.tailwindcss.cn/
- Tailwind CSS 是一個 CSS 框架,使用初級“工具”類創建佈局
- 如 Bootstrap 等傳統 CSS 框架,其使用的類通常與組件直接相關;然而,Tailwind 則採用了不同的方法,它將類作為工具集合,讓用戶能夠自由組合這些工具來構建個性化的自定義組件
- 工具類是簡單的 HTML 類,其作用域通常為單個和特定 CSS 屬性,具有以下優勢
- 根據目的命名
- 易於理解和記憶
- 作用淺顯易懂
- 不存在命名不一致
- 支持快速佈局創建和測試
- Tailwind 有一個條件類,用於為斷點、響應狀態等命名
(2)基本環境配置
- 代碼文本編輯工具:VSCode 或其他
- 推薦插件:
- 標簽重命名:Auto Rename Tag
- 實時載入:Live Server
- PostCSS 語法支持:PostCSS Language Support
- 代碼格式化:Prettier
- Tailwind 官方補全:Tailwind CSS IntelliSense
- 推薦插件:
- 包管理器:Node.js 或其他
- (可選)版本控制:Git
(3)創建項目
- 在任意位置新建一個 index.html
- 使用 CDN 引入 Tailwind:https://cdn.tailwindcss.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body></body>
</html>
0x02 基本原理
(1)使用顏色
-
預設包含的顏色:
black white red green blue orange yellow purple lime emerald teal cyan indigo violet fuchsia pink rose sky gray slate zinc neutral stone amber -
文本顏色:
text-[color]-[shade]
color
:顏色名稱shade
:色度,取值範圍為 100~900,不可對黑色或白色使用
<p class="text-black">Color Black</p> <p class="text-white">Color White</p> <p class="text-red-500">Color Red 500</p> <p class="text-blue-500">Color Blue 500</p> <p class="text-gray-500">Color Gray 500</p> <p class="text-green-500">Color Green 500</p>
-
背景顏色:
bg-[color]-[shade]
<p class="bg-white">BgColor White</p> <p class="bg-red-500">BgColor Red 500</p> <p class="bg-black text-white">BgColor Black</p>
-
下劃線顏色:
underline decoration-[color]-[shade]
underline
:添加下劃線
<p class="underline">UlColor Default</p> <p class="underline decoration-red-500">UlColor Red 500</p> <p class="underline decoration-green-500">UlColor Green 500</p>
-
邊框顏色:
border border-[color]-[shade]
border
:添加邊框
<input type="text" class="border" /> <input type="text" class="border border-red-500" /> <input type="text" class="border border-green-500" />
-
間隔顏色:
divide-[direct] divide-[color]-[shade]
divide-[direct]
:添加分隔,direct
表示分隔方向,取值x
-橫向、y
-縱向
<div class="divide-y divide-red-500"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
-
輪廓線顏色:
outline outline-[color]-[shade]
outline
:添加輪廓線
<button class="outline">OlColor Default</button> <button class="outline outline-red-500">OlColor Red 500</button> <button class="outline outline-green-500">OlColor Green 500</button>
-
盒子陰影顏色:
shadow-[container] shadow-[color]-[shade(/opacity)]
-
shadow-[container]
:添加陰影,container
表示陰影最大寬度,取值如下container width sm
640px md
768px lg
1024px xl
1280px 2xl
1536px -
(/opacity)
:透明度,預設 100,取值 0~100
<div class="shadow-lg">SdColor Red 500</div> <div class="shadow-lg shadow-red-500">SdColor Red 500</div> <div class="shadow-lg shadow-red-500/20">SdColor Red 500</div>
-
-
強調顏色:
accent-[color]-[shade]
<input type="checkbox" checked /> <input type="checkbox" class="accent-red-500" checked /> <input type="checkbox" class="accent-green-500" checked />
-
自定義顏色:
-[(#xxxxx|rgb(r,g,b)|name)]
- 十六進位、RGB、名稱
<p class="text-[#4682B4]">Color #4682B4</p> <p class="text-[rgb(46,130,180)]">Color RGB(46,130,180)</p> <p class="text-[steelblue]">Color Steelblue</p>
(2)容器與間距
-
容器
<div class="container mx-auto"> <article> <h3>Title</h3> <p>Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.</p> </article> </div>
container
:標記為容器mx-auto
:x 軸方向(橫向)上,外邊距(margin)自動
-
外邊距:
m?-[number]
m?
:m
-Margin、mt
-MarginTop、ml
-MarginLeft、mr
-MarginRight、mb
-MarginBottomnumber
=number
* 0.25rem=number
* 4px- 如:
m-2
意思為margin: 0.5rem
- 如:
<div class="bg-red-200 m-2">Margin 2</div> <div class="bg-red-200 ml-2">Margin Left 2</div> <div class="bg-red-200 mr-2">Margin Right 2</div> <div class="bg-red-200 mt-2">Margin Top 2</div> <div class="bg-red-200 mb-2">Margin Bottom 2</div> <div class="bg-red-200 m-[20px]">Margin 20px</div>
-
內邊距:
p?-[number]
p?
:p
-Padding、pt
-PaddingTop、pl
-PaddingLeft、pr
-PaddingRight、pb
-PaddingBottomnumber
=number
* 0.25rem=number
* 4px
<div class="bg-red-200 mb-1 p-2">Padding 2</div> <div class="bg-red-200 mb-1 pl-2">Padding Left 2</div> <div class="bg-red-200 mb-1 pr-2">Padding Right 2</div> <div class="bg-red-200 mb-1 pt-2">Padding Top 2</div> <div class="bg-red-200 mb-1 pb-2">Padding Bottom 2</div> <div class="bg-red-200 mb-1 p-[20px]">Padding 20px</div>
-
間距:
(-)space-[direct]-[number]
(-)
:負間距direct
:間隔方向,取值x
-橫向、y
-縱向number
=number
* 0.25rem=number
* 4px
<div class="flex space-x-2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <div class="flex flex-col space-x-2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
flex
:採用 Flex 佈局flex-col
:Flex 佈局縱向
(3)版面設計
-
字體:
font-[family]
<div class="font-sans">Font Sans</div> <div class="font-serif">Font Serif</div> <div class="font-mono">Font Mono</div>
-
自定義字體族配置
<head> <!-- ... -->> <script> tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif: ["Inter", "serif"], mono: ["Inter", "monospace"] } } } </script> </head>
-
-
字型大小:
text-[size]
<div class="text-xs">Text Extra Small</div> <div class="text-sm">Text Small</div> <div class="text-base">Text Base</div> <div class="text-lg">Text Large</div> <div class="text-xl">Text Extra Large</div> <div class="text-2xl">Text 2 Extra Large</div> <div class="text-3xl">Text 3 Extra Large</div>
-
字重:
font-[weight]
<div class="font-light">Font Light</div> <div class="font-normal">Font Normal</div> <div class="font-medium">Font Medium</div> <div class="font-semibold">Font Semibold</div> <div class="font-bold">Font Bold</div>
-
字距:
tracking-[space]
<div class="tracking-tight">Tracking Tight</div> <div class="tracking-normal">Tracking Normal</div> <div class="tracking-wide">Tracking Wide</div>
-
文本對齊:
text-[direct]
<div class="text-left">Text Left</div> <div class="text-center">Text Center</div> <div class="text-right">Text Right</div>
-
下劃線重:
decoration-[weight]
<div class="underline decoration-2">Decoration 2</div> <div class="underline decoration-4">Decoration 4</div> <div class="underline decoration-8">Decoration 8</div>
-
下劃線風格:
decoration-[type]
<div class="underline decoration-double">Decoration Double</div> <div class="underline decoration-dotted">Decoration Dotted</div> <div class="underline decoration-dashed">Decoration Dashed</div> <div class="underline decoration-wavy">Decoration Wavy</div>
-
裝飾偏移量:
underline-offset-[number]
<div class="underline underline-offset-2">Offset 2</div> <div class="underline underline-offset-4">Offset 4</div> <div class="underline underline-offset-8">Offset 8</div>
-
文本變換:
<p class="normal-case">Normal Case</p> <p class="uppercase">uppercase</p> <p class="lowercase">LOWERCASE</p> <p class="capitalize">capitalize test</p>
(4)寬度與高度
-
寬度:
w-[number]
number
取值 0~48
<div class="bg-black text-white mb-2 w-6">Width 1.5rem</div> <div class="bg-black text-white mb-2 w-12">Width 3rem</div> <div class="bg-black text-white mb-2 w-24">Width 6rem</div>
-
百分比:
w-[number_1]/[number_2]
<div class="bg-black text-white mb-2 w-1/4">Width 25%</div> <div class="bg-black text-white mb-2 w-1/3">Width 33%</div> <div class="bg-black text-white mb-2 w-1/2">Width 50%</div>
-
視點寬度
<div class="bg-black text-white w-screen">Width 100vw</div>
-
100% 容器
<div class="bg-black text-white w-full">Width 100%</div>
-
自定義寬度
<div class="bg-black text-white w-[300px]">Width 300px</div>
-
最大寬度:
max-w-[size]
<div class="bg-black text-white mx-auto max-w-xs"> Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny. </div>
-
高度(大部分與寬度方法相同):
h-[number]
number
取值 0~96
<div class="flex items-end"> <div class="bg-black text-white w-20 h-24">Height 24</div> <div class="bg-black text-white w-20 h-48">Height 48</div> <div class="bg-black text-white w-20 h-72">Height 72</div> <div class="bg-black text-white w-20 h-96">Height 96</div> </div>
-
全屏高度
<div class="bg-black text-white h-screen">Height 100vh</div>
(5)佈局與定位
-
定位:相對定位與絕對定位
<div class="relative w-1/2 h-12 bg-red-200"> <p>Parent</p> <div class="absolute bottom-0 right-0 bg-red-700"> <p>Child</p> </div> </div>
-
左上角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 top-0 left-0 bg-red-700"></div> </div>
-
右上角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 top-0 right-0 bg-red-700"></div> </div>
-
左下角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 bottom-0 left-0 bg-red-700"></div> </div>
-
右下角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 bottom-0 right-0 bg-red-700"></div> </div>
-
頂邊
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute h-16 top-0 inset-x-0 bg-red-700"></div> </div>
-
左邊
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 left-0 inset-y-0 bg-red-700"></div> </div>
-
右邊
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 right-0 inset-y-0 bg-red-700"></div> </div>
-
底邊
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute h-16 bottom-0 inset-x-0 bg-red-700"></div> </div>
-
顯示方式
<div> Tailwind CSS is the only framework that <span class="text-red-500 inline">(Inline)</span> I've seen scale on large teams. <span class="text-red-500 inline-block">(Inline-block)</span> It’s easy to customize, adapts to any design, <span class="text-red-500 block">(Block)</span> and the build size is tiny. <span class="text-red-500 hidden">(Hidden)</span> </div>
-
層疊等級(Z 軸索引):
z-[number/auto]
<div class="relative h-24"> <div class="absolute left-0 w-24 h-24 bg-red-100 z-40">1</div> <div class="absolute left-20 w-24 h-24 bg-red-200 z-30">2</div> <div class="absolute left-40 w-24 h-24 bg-red-500 z-20">3</div> <div class="absolute left-60 w-24 h-24 bg-red-700 z-10">4</div> <div class="absolute left-80 w-24 h-24 bg-red-900">5</div> </div>
-
浮動:
float-[left/right/none]
<div class="h-24"> <div class="w-24 h-24 bg-red-100 float-left">1</div> <div class="w-24 h-24 bg-red-200 inline-block">2</div> </div>
(6)背景與陰影
-
背景
<div class="w-64 h-64 bg-cover bg-no-repeat bg-center" style="background-image: url('https://example.com/png');" ></div>
-
大小
bg-auto
bg-cover
bg-contain
-
重覆
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space
-
定位
bg-center
bg-top
bg-bottom
bg-left
bg-left-top
bg-left-bottom
bg-right
bg-right-top
bg-right-bottom
-
attachment
bg-fixed
bg-local
bg-scroll
-
-
漸變:
bg-gradient-to-[direct] from-[color]-[shade] to-[color]-[shade]
<div class="h-24 bg-gradient-to-r from-red-500 to-blue-500"></div>
-
陰影
<div class="w-96 shadow-2xl"> Consectetur velit laboris tempor laboris qui consequat eu minim ipsum nulla culpa aliquip ad. </div>
Tailwind Background Class CSS Code shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none
box-shadow: 0 0 #0000;
-
混合
<div class="flex justify-center -space-x-24"> <div class="mix-blend-multiply bg-red-500"> Id ex deserunt velit excepteur deserunt tempor eu aliquip ipsum labore laboris. </div> <div class="mix-blend-multiply bg-blue-500"> Adipisicing voluptate magna aute sunt consequat irure sint. </div> </div>
(7)邊框
-
寬度:
border(-[direct])-[width]
(-[direct])
:取值為 t、l、r、b、x 或 y,分別對應上、左、右、下、左右或上下width
:取值為 0、2、4 或 8,分別對應 0px、2px、4px、8px
<div class="w-96 m-5 p-5 border-2"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div> <div class="w-96 m-5 p-5 border-x-4"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div> <div class="w-96 m-5 p-5 border-y-8"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div>
-
顏色
詳見本章第(1)小節“邊框顏色”部分
-
圓角:
rounded(-[direct])(-[size])
(-[direct])
:取值為 t、l、r、b、x 或 y,分別對應上、左、右、下、左右或上下(-[size])
:取值為 none、sm、【略】、md、lg、xl、2xl、3xl、full
<div class="w-96 w-5 p-5 border-4 rounded-xl"> Dolore deserunt sunt qui ut quis sunt anim do nostrud minim fugiat minim. </div>
-
輪廓線:
outline(-[width])
(-[width])
:取值為 0、1、2、4、8
<button class="m-5 outline outline-8">Click</button>
(8)過濾器
-
模糊:
blur(-[size])
(-[size])
:取值為 none、sm、【略】、md、lg、xl、2xl、3xl
<div class="blur-sm"> Do elit adipisicing cupidatat dolor excepteur nulla in incididunt. </div>
-
亮度:
brightness-[number]
number
:filter: brightness(number*0.1)
<div class="h-16 bg-red-500 brightness-0">Brightness 0</div> <div class="h-16 bg-red-500 brightness-100">Brightness 100</div> <div class="h-16 bg-red-500 brightness-200">Brightness 200</div>
-
對比度:
contrast-[number]
number
:filter: contrast(number*0.1)
<div class="h-16 bg-red-500 contrast-0">Contrast 0</div> <div class="h-16 bg-red-500 contrast-50">Contrast 50</div> <div class="h-16 bg-red-500 contrast-200">Contrast 200</div>
-
灰度
<div class="h-16 bg-red-500 grayscale">Grayscale</div>
-
反色
<div class="h-16 bg-red-500 invert">Invert</div>
-
褐化
<div class="h-16 bg-red-500 sepia">Sepia</div>
-
Hue rotate:
hue-rotateo-[number]
number
:取值為 0、15、30、60、90、180
<div class="h-16 bg-red-500 hue-rotate-0">Hue Rotate 0</div> <div class="h-16 bg-red-500 hue-rotate-90">Hue Rotate 90</div> <div class="h-16 bg-red-500 hue-rotate-180">Hue Rotate 180</div>
0x03 進階應用
(1)交互
-
懸停:
hover:
<button class="bg-black text-white rounded-lg m-5 p-5 hover:bg-blue-200 hover:text-black">Click</button>
-
聚焦:
focus:
<button class="bg-black text-white rounded-lg m-5 p-5 focus:bg-blue-200 focus:text-black">Click</button>
-
觸發:
active:
<button class="bg-black text-white rounded-lg m-5 p-5 active:bg-blue-200 active:text-black">Click</button>
-
設置內部元素樣式
<div class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow-lg space-y-3 hover:bg-red-500"> <h3 class="hover:text-white">Title</h3> <p class="group-hover:text-white">Laboris tempor ex nisi deserunt labore anim et do in officia sint laborum.</p> </div>
-
偽類
<ul> <li class="first:bg-red-500">Item 1</li> <li class="first:bg-red-500">Item 2</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 3</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 4</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 5</li> </ul>
-
外觀
- 一般用於重置瀏覽器或操作系統預設的樣式外觀
<select class="border-4 border-red-500"> <option value="1">True</option> <option value="0">False</option> </select> <select class="border-4 border-green-500 appearance-none"> <option value="1">True</option> <option value="0">False</option> </select>
-
游標:
cursor-[type]
-
type
常見取值為auto default pointer wait text move help not-allowed none context-menu progress cell crosshair vertical-text ...
<div class="w-36 h-36 bg-red-500 cursor-pointer"></div>
-
-
選中
<div class="select-none">Select None</div> <div class="select-text">Select Text</div> <div class="select-all">Select All</div> <div class="select-auto">Select Auto</div>
-
平滑滾動示例
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <!-- ... --> <script src="https://cdn.tailwindcss.com/"></script> </head> <body> <a href="#bottom" class="block m-6 border-4 text-center">Go to Bottom</a> <div class="h-[1000px] bg-black"></div> <div id="bottom" class="h-4 text-center">Bottom</div> </body> </html>
(2)斷點類與媒體查詢
-
視窗寬度實時監聽
<body> <h1></h1> <script> function showBrowserWidth() { const width = window.innerWidth document.querySelector('h1').innerText = `Width: ${width}` } window.onload = showBrowserWidth window.onresize = showBrowserWidth </script> </body>
-
修改
h1
標簽樣式,設置預設背景顏色<body class="bg-black"> <h1 class="text-white text-4xl"></h1> <script> function showBrowserWidth() { const width = window.innerWidth document.querySelector('h1').innerText = `Width: ${width}` } window.onload = showBrowserWidth window.onresize = showBrowserWidth </script> </body>
-
在
body
標簽中,根據視窗寬度設置背景顏色變化<body class="bg-black sm:bg-red-700"> <!-- ... --> </body>
size min-width sm 640px md 768px lg 1024px xl 1280px 2xl 1536px
(3)分欄
-
基本列:
columns-[number/type]
number
:取值 1~12type
:取值 auto、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl
<div class="columns-3"> <div class="w-full m-2 border-4 border-red-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-yellow-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-green-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-blue-500">Proident ipsum consequat dolor deserunt.</div> </div>
-
縱橫比:
aspect-[type]
<div class="columns-1"> <div class="w-60 m-2 border-4 border-red-500 aspect-square">Proident ipsum consequat dolor deserunt.</div> <div class="w-60 m-2 border-4 border-blue-500 aspect-video">Proident ipsum consequat dolor deserunt.</div> </div>
(4)Flexbox
-
Flex 與對齊
-
創建一個 Flexbox
<div class="flex w-full h-72 bg-black"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div>
-
設置每項的對齊方向:
items-[type]
<div class="flex w-full h-72 bg-black items-center"> <!-- ... --> </div>
-
設置每項的對齊方式:
justify-[type]
<div class="flex w-full h-72 bg-black items-center justify-around"> <!-- ... --> </div>
-
設置換行,使某一項超出視窗:
flex-wrap
<div class="flex flex-wrap w-full h-72 bg-black items-center justify-around"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 w-[300px] border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div>
-
-
列、間隙、順序
-
創建一個 Flexbox,設置為縱向排列
<div class="flex flex-col w-72 bg-black"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div>
-
設置間隙:
gap-[number]
(number
* 0.25rem)<div class="flex flex-col w-72 bg-black gap-4"> <!-- ... --> </div>
-
調整順序:
order-[index]
<div class="flex flex-col w-72 bg-black gap-4"> <div class="p-10 border border-red-500 bg-red-200 order-2">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200 order-1">2</div> <div class="p-10 border border-green-500 bg-green-200 order-4">3</div> <div class="p-10 border border-blue-500 bg-blue-200 order-3">4</div> </div>
-
-
放大與縮小
<div class="flex w-full bg-black"> <div class="p-10 w-64 border border-red-500 bg-red-200">1</div> <div class="flex-none p-10 w-64 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 w-64 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> <div class="p-10 w-64 border border-gray-500 bg-gray-200">5</div> </div>
(5)Grid
-
模板列:
grid-cols-[number/none]
number
:取值為 1~12- 該語句等同於:
grid-template-columns: repeat(number, minmax(0, 1fr));
<div class="grid grid-cols-3 gap-2"> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 1</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 2</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 3</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 4</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 5</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 6</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 7</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 8</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 9</div> </div>
-
模板行:
grid-rows-[number/none]
number
:取值為 1~6- 該語句等同於:
grid-template-rows: repeat(number, minmax(0, 1fr));
<div class="grid grid-cols-2 gap-2 grid-rows-4 bg-gray-200"> <!-- ... --> </div>
-
跨行/列:
[row/col]-span-[number]
row-span-[number]
:跨number
行col-span-[number]
:跨number
列
<div class="grid grid-cols-3 gap-2"> <div class="row-span-3 p-10 border-4 border-red-200 bg-blue-200">Item 1</div> <div class="md:col-span-2 p-10 border-4 border-red-200 bg-blue-200">Item 2</div> <!-- ... --> </div>
(6)過渡與變換
初始按鈕:
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:bg-blue-700">Click</button>
-
過渡
transition-[type]
:過渡類型,type
取值為 none、all、colors、opacity、shadow、transformduration-[ms]
:過渡時長,ms
取值為 75、100、150、200、300、500、700、1000ease-[type]
:過渡效果,type
取值為 linear、in、out、in-outdelay-[ms]
:延時時長,ms
取值為 75、100、150、200、300、500、700、1000
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:bg-blue-700 transition-colors duration-700 ease-in delay-100">Click</button>
-
變換
scale(-[axis])-[magnification]
:縮放,axis
表示參照軸,取值為 x 或 y;magnification
表示縮放倍率,為number
%rotate-[degree]
:旋轉,degree
表示旋轉角度translate-[axis]-[distance]
:位移,axis
表示參照軸,取值為 x 或 y;distance
表示位移距離,整數為number
* 0.25rem,分數為占比,full
為 100%,px
為 1pxskew-[direct]-[degree]
:傾斜,axis
表示參照軸,取值為 x 或 y;degree
表示傾斜角度
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:scale-50 hover:rotate-12 hover:translate-x-2 hover:skew-x-12 duration-700">Click</button>
(7)動畫類與關鍵幀
-
animate-[property]
:property
取值如下:-
none:
animation: none;
-
spin:旋轉
animate: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-
ping:擴散
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
-
pulse:閃爍
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
-
bounce:彈跳
animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
<div class="w-64 h-64 bg-red-200 rounded-full relative animate-ping"> <div class="w-32 h-2 bg-gradient-to-r from-red-500 to-yellow-500 absolute right-0 top-1/2"></div> </div>
-
-
自定義動畫與關鍵幀
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> <script> tailwind.config = { theme: { extend: { animation: { 'slow-spin': 'spin 3s linear infinite', 'custom': 'custom 1s linear infinite' }, keyframes: { 'custom': { '0%': { transform: 'rotate(0deg)' }, '90%, 100%': { transform: 'rotate(360deg)' } } } } } } </script> </head> <body> <div class="w-64 h-64 bg-red-200 rounded-full relative animate-custom"> <div class="w-32 h-2 bg-gradient-to-r from-red-500 to-yellow-500 absolute right-0 top-1/2"></div> </div> </body> </html>
(8)配置與客制化
-
在
head
標簽中的script
標簽中寫入配置 -
配置格式:
<script> tailwind.config = { theme: { extend: { 'property-1': { 'key-1-1': 'value-1-1', }, 'property-2': { 'key-2-1': 'value-2-1', }, // ... } } } </script>
(9)夜間模式
-
配置夜間模式樣式:
dark:
<div class="w-64 h-64 bg-white dark:bg-gray-900"></div>
-
是否使用夜間模式,預設根據操作系統
-
使用 Javascript 控制夜間模式
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> <script> tailwind.config = { darkMode: "class", }; </script> <style> .toggle-checkbox:checked { right: 0; border-color: #68d391; } .toggle-checkbox:checked + .toggle-label { background: #68d391; } </style> </head> <body> <div class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-6 py-8 shadow-xl" > <h3 class="text-slate-900 dark:text-white font-medium tracking-tight"> Title </h3> <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm"> Irure dolor ut excepteur ea cupidatat dolor dolore consectetur sit voluptate qui et deserunt. </p> </div> <div class="relative inline-block w-10 mr-2 mt-6 ml-6 align-middle select-none transition duration-200 ease-in" > <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 dark:bg-gray-700 appearance-none cursor-pointer" /> <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer" ></label> </div> <script> document.getElementById("toggle").addEventListener("change", function () { if (this.checked) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } }); </script> </body> </html>
0x04 更好的開發環境
(1)基於 Tailwind CLI 構建環境
之前使用 CDN 的方式使用 Tailwind 並非生產的最佳選擇,Tailwind 還支持使用 Tailwind CLI 等方式
-
創建一個目錄作為 Tailwind 項目的根目錄
-
在該目錄下,使用命令
npm init -y
創建一個 package.json 作為包管理 -
使用命令
npm install -D tailwindcss
引入 Tailwind -
使用命令
npx tailwindcss init
創建用於初始化 Tailwind 的配置文件—— tailwind.config.js -
修改 tailwind.config.js,允許 Tailwind 控制當前目錄下所有尾碼為 html 的文件
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./*.html'], theme: { extend: {}, }, plugins: [], }
-
創建 input.css 作為主 CSS 文件
@tailwind base; @tailwind components; @tailwind utilities;
-
修改 package.json,配置指令實現開啟 Tailwind CLI 構建流程
{ // ... "scripts": { "build": "tailwindcss -i ./input.css -o ./css/style.css", "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
-
使用命令
npm run build
構建 CSS 文件及其目錄 -
創建 index.html,其中引入生成的 style.css,並添加一個標簽使用 Tailwind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="css/style.css" /> <title>Document</title> </head> <body> <h1 class="text-3xl text-red-500">Tailwind CSS</h1> </body> </html>
-
使用命令
npm run watch
實時使用 Tailwind 渲染頁面
(2)指令與函數
a. 指令
指令是 Tailwind 特定於可以在CSS中使用的規則,這些規則為 Tailwind 項目提供特殊的功能
-
@tailwind
:用於插入 Tailwind 的基本(base)、組件(components)以及工具類(utilities)等 -
@apply
:用於獲取工具類中的樣式h1 { @apply text-xl; }
-
@layer
:用於創建自定義樣式@layer base { h1 { font-size: 2rem; } } @layer components { btn-blue { @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700; } }
-
@config
:用於指定 Tailwind 在編譯該 CSS 文件時應使用的配置文件@config "./tailwind.input.config.js";
b. 函數
函數用於訪問 Tailwind 中的特定值,構建後會使用靜態值替換
-
theme()
:可以使用點表示法訪問 Tailwind 配置值-
修改 tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./*.html'], theme: { extend: { spacing: { 128: '32rem' } }, }, plugins: [], }
-
修改 input.css,引入
spacing-128
.content { height: theme('spacing.128'); }
-
-
screen()
:可以創建按名稱引用斷點的媒體查詢@media screen(xl) { body { @apply bg-black text-white; } }
(3)使用 Webpack 與 PostCSS 環境
-
創建一個目錄作為 Tailwind 項目的根目錄
-
在該目錄下,使用命令
npm init -y
創建一個 package.json 作為包管理 -
使用命令
npm install -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader posscss-preset-env
安裝 Webpack 與 PostCSS 以及相關載入器 -
在根目錄創建 src 目錄,其中新建 index.js,作為 Webpack 的入口文件
-
在根目錄創建 webpack.config.js 文件,用於配置 Webpack
const path = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, }
-
修改 package.json,配置指令實現開啟 Webpack 構建流程
{ // ... "scripts": { "build": "webpack" }, // ... }
-
使用命令
npm run build
構建主 Javascript 文件及其目錄 dist -
在 dist 目錄下,創建 index.html,其中引入生成的 bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="bundle.js"></script> </head> <body> <h1 class="text-3xl text-red-500">Tailwind CSS</h1> </body> </html>
-
修改 webpack.config.js,設置 Webpack 開發伺服器,用於實時使用渲染頁面
const path = require('path') module.exports = { // ... devServer: { static: { directory: path.resolve(__dirname, 'dist'), }, port: 9000, open: true, hot: true, compress: true, historyApiFallback: true, }, }
-
修改 package.json,配置指令實現開啟 Webpack 構建流程
{ // ... "scripts": { "build": "webpack", "dev": "webpack serve" }, // ... }
-
使用命令
npm run dev
開啟 Webpack 開發伺服器 -
修改 webpack.config.js,設置樣式載入器
const path = require('path') module.exports = { // ... module: { rules: [ { test: /\.css$/i, include: path.resolve(__dirname, 'src'), use: ['style-loader', 'css-loader', 'postcss-loader'], }, ], }, }
-
使用命令
npm install -D tailwindcss
引入 Tailwind -
使用命令
npx tailwindcss init
創建用於初始化 Tailwind 的配置文件—— tailwind.config.js -
修改 tailwind.config.js,允許 Tailwind 控制當前目錄下所有尾碼為 html 的文件
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./dist/*.{html, js}'], theme: { extend: {}, }, plugins: [], }
-
在根目錄創建 postcss.config.js 文件,用於配置 PostCSS
const tailwindcss = reuqire('tailwind'); module.exports = { plugins: [ 'postcss-preset-env', tailwindcss ], };
-
在 src 目錄創建 style.css 作為主 CSS 文件
@tailwind base; @tailwind components; @tailwind utilities;
-
修改 src/index.js,將 style.css 添加到入口文件
import './style.css'
-End-