---
title: '[Rails][TailwindCSS] TailwindCSS: It looks awful, and it works'
---
# TailwindCSS: It looks awful, and it works - Adam Wathan @ Rails World 2023
###### tags: `Rails` `TailwindCSS` `CSS`

## 目錄:
[TOC]

## 本文服用方式:
**[TailwindCSS: It looks awful, and it works - Rails World 2023](https://youtu.be/TNXM4bqGqek?si=oORxT6b1TtUi3cGD)**
{%youtube TNXM4bqGqek %}
:::info
**本文請搭配上面影片服用,
該影片為Rails World 2023 交流會上Adam Wathan 講述TailwindCSS 的剪輯影片**
:::

## 影片段落:
### 1. 讓我們開始寫HTML 吧! @~3:10
### 2. 接著用TailwindCSS 裝飾我們的HTML @~4:30
### 3. 我用inline-styles 寫就好了阿? TailwindCSS 能做到更多! @~11:30
* hover / focus 效果
* hover + scale (hover + 變大)
* group 功能 (最外層 + 頭像設定成群組, 達成hover 連動效果)
* hover + scale + transition (Hover + 漸變 + 變大)
### 4. 重複使用的樣式? 使用@apply 寫TailwindCSS 的 class 寫在 CSS上! @~14:50
* 使用@apply 自己定義class name + styling

// 起手式先設定元件
@layer components {
    // EX: 靛青色的連結樣式
    .link-indigo {
        // 裡面寫的是TailwindCSS 的Class name 喔!!
        @apply text-indigo-600 font-medium hover:text-indigo-900 focus:outline-none focus:underline;
    }
}

* *感覺較適合使用在基礎元素上, 例如:guild line 上的小元件
### 5. 展示其他範例 + RWD 情境 @~16:00
* 介紹break point 運作方式 (由小畫面往大畫面設定)
* 使用grid 來做mosaic layout (馬賽克式的佈局)
* RWD 在normal -> middin -> large 不同視窗大小有不一樣佈局
### 6. 更多的控制與功能: Dark 模式 @~19:12
* Dark mode 設定方式
* 解釋為何設定這麼麻煩: "因為我們希望你能掌控的更多!"
* 展示你可以做到什麼 => 炫炮字體效果!
### 7. 條件式控制CSS styling: 使用data-attribute! @~21:00

// TailwindCss 會去抓"data-loading", 當抓到時候他就會套用設定的class styling 
<button class="group data-[loading]:text-trasparent" data-loading>
    確認送出
    <span class="hidden group-data-loading:display">
        <svg>轉圈圈的動畫</svg>
    </span>
</button>
// 上述範例: 文字會消失, svg 會被display 出來
// 如果button 的data-loading 被拔掉, 文字就會出現, svg 就會消失

### 8. TailwindCSS 也可以讓你寫inlne-CSS! @~24:43
* TailwindCSS 不支援動態生成的class name
* 但你可以在class name 上寫CSS 語法!

// EX: 你想讓用戶自己定義顏色時, 你就可以把動態的CSS 套用到class name 裡!
<button class="bg-[--btn-bg] hover:bg-[--btn-bg-hover] text-[--btn-text]" 
style="--btn-bg: <%= @button_bg %>; --btn-bg-hover: <%= @button_bg_hover %>; --btn-text: <%= @button_text %>;">
    這是一個客製化顏色且hover 會變色的按鈕!
</button>

### 9. 結語: 他看起來很可怕, 但他用起來還真不錯! @~28:28
* 你可以在一直待在HTML 頁面中編輯, 不用一直切換檔案 (你甚至不用打開CSS)
* 過了半年後, 你想要改個不順眼的地方: F12 找到元素 -> 改class name -> 完成!
* 看起來可維護性很低, 但其實維護起來反而更容易!
* 觀維護CSS 文件, 其實很困難!
這也是為什麼市面上有一堆教你該怎麼結構化CSS 才好維護的書,
但卻沒有教你結構化HTML 才好維護的書, 因為HTML 的結構本身就很直觀很單純,
所以在HTML 上來做樣式, 也會讓事情變得更簡單, 尤其是在團隊上效果更為明顯,
"It looks awful, but it does work pretty well."