# Tailwind 筆記
適用 windows
> [中文文檔](https://docs.tailwindchina.com/)
## 基本配置
### 1. 創建資料夾
```
mkdir 0925
```
### 2. 進入資料夾
```
cd 0925
```
### 3. 初始化項目
```
npm init -y
```
### 4. 安裝 Tailwind
```
npm install -D tailwindcss@latest
```
### 5. 產生設定檔 ( tailwind.config.js )
```
npx tailwindcss init --full //完整版 ( 新手推薦 )
npx tailwindcss init //空的
```
### 6. 新增一個 CSS 檔 ( styles.css ) 並注入核心程式碼
```
//styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
* **需安裝此模組，否則使用 @tailwind 會報錯**
### 7. 編譯該 CSS 檔後產生 tailwind.css
```
npx tailwindcss build styles.css -o tailwind.css
```
### 8. 新增一個 HTML 檔 ( index.html ) 並引入編譯後的 CSS 檔
```
// index.html
<!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>
<link rel="stylesheet" href="tailwind.css">
</head>
<body>
...
</body>
</html>
```
## 作為 Postcss plugin ( 選用 )
### 1. 安裝 postcss、autoprefixer ( 添加前綴，非必要 )
```
npm install tailwindcss@latest postcss@latest autoprefixer@latest
```
### 2. 新增一個 postcss.config.js 檔，添加 tailwind、autoprefixer
```
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
```
## 智能提示
### 1. 安裝此模組
### 2. 效果圖 ( tailwind.config.js 檔必須存在，否則會失效 )
## 壓縮配置 ( 建議生產時再使用 )
### 1. 設置需要偵測的檔案
```
// tailwind.config.js
module.exports = {
purge: {
enabled: true, // 開關壓縮功能，建議開發時設置false，只在生產時設置成true
content: ['./*.html'], // 需要偵測的檔案
},
// ...
}
```
### 2. 編譯 styles.css 後產生壓縮完的 tailwind.css
```
npx tailwindcss build styles.css -o tailwind.css
```
## 設定 Breakpoints
### 1. 設定 Breakpoints 名稱與數值
```
// tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
```
### 2. 編譯
```
npx tailwindcss build styles.css -o tailwind.css
```
## 自定義 Base
### 1. 在 @layer base 中定義基本樣式
```
// styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
```
### 2. 編譯
```
npx tailwindcss build styles.css -o tailwind.css
```
## 自定義 Utility
### 1. 在 @layer utilities 中定義通用類別
```
// styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants responsive,hover {
.scroll-snap-none {
scroll-snap-type: none;
}
.scroll-snap-x {
scroll-snap-type: x;
}
.scroll-snap-y {
scroll-snap-type: y;
}
}
}
```
### 2. 編譯
```
npx tailwindcss build styles.css -o tailwind.css
```
## 自定義 Component
### 1. 在 @layer components 中定義組件
```
//styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
@variants hover {
.btn-blue {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
}
```
### 2. 編譯
```
npx tailwindcss build styles.css -o tailwind.css
```
## 設定 Variants
### 1.設定 Utility 支援的 Variants
```
// tailwind.config.js
module.exports = {
variants: {
extend: {
backgroundColor: ['active'],
// ...
borderColor: ['focus-visible', 'first'],
// ...
textColor: ['visited'],
}
},
}
```
### 2. 編譯
```
npx tailwindcss build styles.css -o tailwind.css
```
Sign in with Wallet
Connect another wallet