# Tailwind
|🚨 <span class="caution">CAUTION</span>|
|:---|
|本文以 Tailwind v4 為主|
## References
+ 📑 [**tailwindcss**](https://tailwindcss.com/docs)
+ 📑 [**@nuxt/tailwindcss**](https://tailwindcss.nuxtjs.org/)
## Installation
+ [Tailwind](https://tailwindcss.com/docs/installation/framework-guides) (各種框架)
+ [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) (Tailwind 4.0 之後是需要額外安裝的)
+ `.vscode/settings.json`
所有 CSS 檔視為 tailwindcss
```json
{
"files.associations": {
"*.css": "tailwindcss"
}
}
```
## Version 4
第四版在 2025/1/22 推出，改掉不少東西，詳見[此文](https://tailwindcss.com/blog/tailwindcss-v4)。
## Color
+ [all colors](https://tailwindcss.com/docs/colors)
## Config
在新推出的第四版中，取消掉過往的 `tailwind.config.js` 設定，改為 [CSS-first config](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) (在 `assets/css/main.css` 中設定)。
## Breakpoints
| Breakpoint prefix | Minimum width | CSS |
|-------------------|-----------------|----------------------------------|
| `sm` | 40rem *(640px)* | `@media (width >= 40rem) { ... }` |
| `md` | 48rem *(768px)* | `@media (width >= 48rem) { ... }` |
| `lg` | 64rem *(1024px)* | `@media (width >= 64rem) { ... }` |
| `xl` | 80rem *(1280px)* | `@media (width >= 80rem) { ... }` |
| `2xl` | 96rem *(1536px)* | `@media (width >= 96rem) { ... }` |
## Style
Tailwind 的樣式有分為 base、component、utilities 三個層級。
<mark>渲染順序：base → components → tailwind class → utilities → css class → inline style</mark>
如果要自定義功能的情況，起手式要在前面加上 `@layer`，告訴 css 檔要新增或覆寫哪一個圖層的內容，Tailwind 就會自動編譯，然後在裡面再撰寫想要的樣式內容。
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {}
@layer components {}
@layer utilities {}
```
### base
用來定義全域基本樣式。例如 h1、h2、ul、a 等。
概念有點像是 CSS reset，Tailwind 有提供一組基底樣式，\
稱為 [Preflight]，基本上就是採用 [modern-normalize]。\
包含：`box-sizing: border-box`、img 是 `display: block`。
因為 Tailwind 已將預設樣式清除，使用 h1、h2 等字體大小就要重新設定。
```css
@layer base {
h1 {
@apply text-5xl font-bold text-red-500;
}
h2 {
font-size: 36px;
}
h3 {
@apply text-[23px];
}
a {
@apply text-amber-300;
}
}
```
### components
用來定義基本元件。
當網頁有元件相同時，可以把共同樣式拉出來，或是分頁有許多重複使用的功能也可以套用。
```html
<button class="py-2 px-4 bg-sky-500 text-white font-bold rounded-lg hover:bg-sky-700">
按鈕1
</button>
<button class="btn">
按鈕2
</button>
```
```css
@layer components {
.btn {
@apply py-2 px-4 bg-sky-500 text-white font-bold rounded-lg hover:bg-sky-700;
}
}
```
### utilities
自訂的 Tailwind class。
```css
@layer utilities {
.fade-in {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
```
### variant
變體，即在某些情況時，改用另一種樣式。
包含各式 pseudo class、pseudo element、media query 等等。詳見[此文](https://tailwindcss.com/docs/hover-focus-and-other-states)。
除此之外，還包含了一些特殊的 variant。
黑暗模式要用到自訂變體，詳見 [@custom-variant](#@custom-variant-v4)。
+ `group`：當父元素觸發某 variant 時，其底下所有 `group-*` 也會觸發。
```html
<a href="#" class="group rounded-lg p-8">
<!-- ... -->
<span class="group-hover:underline">Read more…</span>
</a>
```
### arbitrary values
[隨意值](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values)，用中括號包著。
```html
<div class="top-[117px] lg:top-[344px]">
<!-- ... -->
</div>
```
```html
<div class="bg-[url('/what_a_rush.png')]">
<!-- ... -->
</div>
```
變數隨意值 `[var(...)]` 有個更短的縮寫 `(...)`。
```html
<div class="fill-(--my-brand-color) ...">
<!-- ... -->
</div>
```
## Directives
### `@apply`
可以把想要的樣式合併起來，必須要使用 Tailwind class。
官網建議：使用 `@apply` 的原因不要只是為了想讓 class 變短，且若大量使用 `@apply`的話：
+ 你會不斷想名稱去命名 class
+ CSS 會越寫會大包
+ 更改樣式會不斷來回做切換畫面
除非是重複性高，建議寫在 HTML，不然已經辜負 Tailwind 的初衷。
```css
h1 {
@apply text-5xl font-bold text-red-500;
}
```
### `@theme` (v4)
類似 `:root` 的全域變數，可覆蓋 Tailwind 預設變數，也可以自訂新變數。
第四版後不再使用 `theme()` + `tailwind.config.css` 的方式，改使用 `@theme`。
```css
@theme {
/* 覆寫 Tailwind class 原先的字體設定 */
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 這樣設定就能使用 text-tahiti 或 bg-midnight 等與顏色相關的 Tailwind class */
--color-midnight: #121063;
--color-tahiti: #3ab7bf;
--color-bermuda: #78dcca;
}
```
### `@plugins` (v4)
插件
```
@plugin "@tailwindcss/typography";
```
### `@custom-variant` (v4)
自訂變體。
`dark` : 黑暗模式 (自訂 variant)，當父元素觸發某 dark 時，其底下所有 `dark-*` 也會觸發。
```css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *)); // 自訂 variant
```
```html
<template>
<div id="app">
<input v-model="isDarkMode" type="checkbox">
<NuxtPage />
</div>
</template>
<script setup lang="ts">
const isDarkMode = ref(true)
onMounted(() => {
if (import.meta.client) {
isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches
watchEffect(
() => document.documentElement.classList.toggle('dark', isDarkMode.value),
)
}
})
</script>
```
## Plugins
+ [**@tailwindcss/typography**](https://ithelp.ithome.com.tw/articles/10270442)：一套預設舒適的字型排版
通常用在無法完全控制的 HTML 上 (比如 Markdown-based CMS，像是 `@nuxt/content`)
[Preflight]: https://tailwindcss.com/docs/preflight
[modern-normalize]: https://github.com/sindresorhus/modern-normalize
Sign in with Wallet
Connect another wallet