Tailwind CSS 使用指南

来源:https://www.cnblogs.com/SRIGT/p/18077515
-Advertisement-
Play Games

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)創建項目

  1. 在任意位置新建一個 index.html
  2. 使用 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-MarginBottom
    • number=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-PaddingBottom
    • number=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]

    • numberfilter: 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]

    • numberfilter: 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)斷點類與媒體查詢

  1. 視窗寬度實時監聽

    <body>
      <h1></h1>
      <script>
        function showBrowserWidth() {
          const width = window.innerWidth
          document.querySelector('h1').innerText = `Width: ${width}`
        }
        window.onload = showBrowserWidth
        window.onresize = showBrowserWidth
      </script>
    </body>
    
  2. 修改 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>
    
  3. 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~12
    • type:取值 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 與對齊

    1. 創建一個 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>
      
    2. 設置每項的對齊方向:items-[type]

      <div class="flex w-full h-72 bg-black items-center">
        <!-- ... -->
      </div>
      
    3. 設置每項的對齊方式:justify-[type]

      <div class="flex w-full h-72 bg-black items-center justify-around">
        <!-- ... -->
      </div>
      
    4. 設置換行,使某一項超出視窗: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>
      
  • 列、間隙、順序

    1. 創建一個 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>
      
    2. 設置間隙:gap-[number]number * 0.25rem)

      <div class="flex flex-col w-72 bg-black gap-4">
        <!-- ... -->
      </div>
      
    3. 調整順序: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、transform
    • duration-[ms]:過渡時長,ms 取值為 75、100、150、200、300、500、700、1000
    • ease-[type]:過渡效果,type 取值為 linear、in、out、in-out
    • delay-[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 為 1px
    • skew-[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 等方式

  1. 創建一個目錄作為 Tailwind 項目的根目錄

  2. 在該目錄下,使用命令 npm init -y 創建一個 package.json 作為包管理

  3. 使用命令 npm install -D tailwindcss 引入 Tailwind

  4. 使用命令 npx tailwindcss init 創建用於初始化 Tailwind 的配置文件—— tailwind.config.js

  5. 修改 tailwind.config.js,允許 Tailwind 控制當前目錄下所有尾碼為 html 的文件

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./*.html'],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    
  6. 創建 input.css 作為主 CSS 文件

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  7. 修改 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"
      },
      // ...
    }
    
  8. 使用命令 npm run build 構建 CSS 文件及其目錄

  9. 創建 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>
    
  10. 使用命令 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 配置值

    1. 修改 tailwind.config.js

      /** @type {import('tailwindcss').Config} */
      module.exports = {
        content: ['./*.html'],
        theme: {
          extend: {
            spacing: {
              128: '32rem'
            }
          },
        },
        plugins: [],
      }
      
    2. 修改 input.css,引入 spacing-128

      .content {
        height: theme('spacing.128');
      }
      
  • screen():可以創建按名稱引用斷點的媒體查詢

    @media screen(xl) {
        body {
            @apply bg-black text-white;
        }
    }
    

(3)使用 Webpack 與 PostCSS 環境

  • Webpack 是一個模塊打包工具,可以將帶有依賴的模塊打包成靜態資源,官網鏈接
  • PostCSS 是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具,官網鏈接
  1. 創建一個目錄作為 Tailwind 項目的根目錄

  2. 在該目錄下,使用命令 npm init -y 創建一個 package.json 作為包管理

  3. 使用命令 npm install -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader posscss-preset-env 安裝 Webpack 與 PostCSS 以及相關載入器

  4. 在根目錄創建 src 目錄,其中新建 index.js,作為 Webpack 的入口文件

  5. 在根目錄創建 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',
      },
    }
    
  6. 修改 package.json,配置指令實現開啟 Webpack 構建流程

    {
      // ...
      "scripts": {
        "build": "webpack"
      },
      // ...
    }
    
  7. 使用命令 npm run build 構建主 Javascript 文件及其目錄 dist

  8. 在 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>
    
  9. 修改 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,
      },
    }
    
  10. 修改 package.json,配置指令實現開啟 Webpack 構建流程

    {
      // ...
      "scripts": {
        "build": "webpack",
        "dev": "webpack serve"
      },
      // ...
    }
    
  11. 使用命令 npm run dev 開啟 Webpack 開發伺服器

  12. 修改 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'],
          },
        ],
      },
    }
    
  13. 使用命令 npm install -D tailwindcss 引入 Tailwind

  14. 使用命令 npx tailwindcss init 創建用於初始化 Tailwind 的配置文件—— tailwind.config.js

  15. 修改 tailwind.config.js,允許 Tailwind 控制當前目錄下所有尾碼為 html 的文件

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./dist/*.{html, js}'],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    
  16. 在根目錄創建 postcss.config.js 文件,用於配置 PostCSS

    const tailwindcss = reuqire('tailwind');
    
    module.exports = {
        plugins: [
            'postcss-preset-env',
            tailwindcss
        ],
    };
    
  17. 在 src 目錄創建 style.css 作為主 CSS 文件

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  18. 修改 src/index.js,將 style.css 添加到入口文件

    import './style.css'
    

-End-


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作者:盧文雙 資深資料庫內核研發 本文首發於 2024-03-06 20:52:24 https://dbkernel.com 前言 計算下推是資料庫優化器優化查詢性能的一種常見手段,早期的資料庫系統提及的計算下推一般是指謂詞下推,其理論源自關係代數理論。2000 年以後,隨著 Oracle RAC ...
  • 背景 業務端遇到報錯為"Deadlock found when trying to get lock; try restarting transaction"則表明有死鎖發生 名稱 配置 資料庫版本 GreatSQL 8.0.26 隔離級別 Read-Commited innodb status 日 ...
  • 原文: Kotlin 協程基礎使用學習-Stars-One的雜貨小窩 本篇閱讀可能需要以下知識,否則可能閱讀會有些困難 客戶端開發基礎(Android開發或JavaFx開發) Java多線程基礎 kotlin基礎 本文儘量以使用為主,以代碼為輔講解,不提及過深協程底層代碼邏輯,僅做一個基礎入門來快速 ...
  • Android 輔助功能 -搶紅包(三) 本篇文章繼續講述輔助功能. 主要通過監聽通知欄紅包消息,來跳轉聊天頁面,並自動回覆對方"謝謝". 上篇文章我們講述了監聽notification, 跳轉聊天界面. 具體可查看: Android 輔助功能 -搶紅包(二) 1: 使用monitor抓取id. 打 ...
  • 基礎與面試題:viewpoint 與 rem、百分比高度、px 一、定義 ​ 一個表總結: 名稱 定義 使用示例 viewpoint 是指用戶在網頁上實際可見和可交互的區域,通常指的是瀏覽器視窗或移動設備的屏幕尺寸。 width:100vw;height:100vh rem (root em)是相對 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、HTTP HTTP (HyperText Transfer Protocol),即超文本運輸協議,是實現網路通信的一種規範 在電腦和網路世界有,存在不同的協議,如廣播協議、定址協議、路由協議等等...... 而HTTP是一個傳輸協議 ...
  • it-tools —— 一個為開發人員提供方便的線上工具集合的開源項目,包含了加密、轉換器、Web、開發、圖片和視頻等十幾種工具,功能齊全,部署方便。 ...
  • 所有主要的瀏覽器都內置了一個XML解析器,用於訪問和操作XML XML 解析器 在訪問XML文檔之前,必須將其載入到XML DOM對象中 所有現代瀏覽器都有一個內置的XML解析器,可以將文本轉換為XML DOM對象 解析文本字元串 以下示例將一個文本字元串解析為XML DOM對象,並使用JavaSc ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...