Tailwind 筆記

簡介

框架

• 是 Utility Framework 工具型的 CSS 框架
  • 提供單一功能的 CSS classes
    • .mt-4 { margin-top: 1rem }
    • .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
• 不是 CSS Framework 的 CSS 框架
  • 快速開發
  • 屬於 UI Library
  • 內建設計好的元件

架構

• 會用 class 表示使用的 CSS 屬性, 使用時加上就行了，減少需要的微調
• 響應式
  • 手機優先 min-width

相關連結

• Tailwind CSS - Official

• Installation 安裝文件

• screencasts 教學

• Youtube 教學

• Tailwind Component

安裝

有 2 種使用方式

下載

# 用 npm 下載
npm install tailwindcss

# 用 Yarn 下載
yarn add tailwindcss

加入

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

CDN

使用 CDN需要注意，可在測試時使用避免用在正式時，因為 CDN 不提供客製化、使用第三方插件和 Tailwind 特殊功能。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">