Name: 100 秒學會 Tailwind！ (Tailwind in 100 Seconds)
Uploaded: 2025-12-18T10:22:37.000Z
Duration: 2 min 21 s

情態副詞

Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites.

Tailwind 是一個龐大的 CSS 工具類別集合，讓你能夠快速且一致地建立好看的網站。

分詞構句

Design is also hard, but naming your CSS classes in a sane way is virtually impossible.

設計也很難，但要用一種合理的方式命名你的 CSS class，幾乎是不可能的。

Frameworks like Bootstrap and Material address this challenge by creating styles for high level components, things like buttons, dropdowns and forms.

像 Bootstrap 和 Material 這樣的框架，透過為高階元件（例如按鈕、下拉選單和表單）建立樣式來解決這個挑戰。

Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this.

Tailwind 採取更具功能性的方法，提供給你工具類別，可以組合起來建立像這樣的元件。

Instead of using the Card class like you might in Bootstrap, you combine utility classes like Flex to make it a Flexbox, P to give it padding, M for margin, and

你不需要像在 Bootstrap 中那樣使用 Card class，而是組合 Flex 等工具類別來建立 Flexbox，P 來增加 padding，M 來增加 margin，還有

hundreds of others to control things like color shadows and so on.

數百種其他類別來控制顏色、陰影等等。

In addition, every utility can be applied conditionally.

此外，每個工具類別都可以有條件地 Apply。

You have variants like small, medium and Large for responsive designs, along with a bunch of pseudo selectors like Hover and Focus to handle state changes, or Dark to render different colors when dark mode is enabled.

你有 small、medium 和 Large 等變體來實現響應式設計，還有許多偽選擇器，如 Hover 和 Focus 來處理狀態變更，或是 Dark 在啟用 dark mode 時渲染不同顏色。

This approach gives you a lot more freedom over your creativity compared to other CSS frameworks.

這種方法讓你比其他 CSS 框架有更多發揮創意的自由。

This while at the same time following the rules of a design system that you don't get.

同時又遵循著你沒有的設計系統規則。

With plain css, it lives in the sweet spot between convention and configuration.

使用純 CSS，它介於慣例和配置之間取得絕佳平衡。

However, it does produce some ugly ass HTML.

不過，它確實會產生一些醜陋的 HTML。

You've got tons of hard to read duplicated class names here.

你這裡有大量難以閱讀的重複 class 名稱。

As your UI grows in complexity, code duplication is inevitable, but

隨著你的 UI 越來越複雜，程式碼重複是難免的，但

you can avoid it by creating reusable components with your favorite JavaScript framework, or by using the Apply directive in CSS to take Tailwind classes and compose them into a single concise class name.

你可以透過你最愛的 JavaScript framework 建立可重複使用的元件，或是在 CSS 中使用 Apply directive，將 Tailwind classes 組合成一個簡潔的 class 名稱來避免它。

Another concern you may have is performance because Tailwind when weighs in at over 3,500 kilobytes.

你另一個可能擔心的問題是效能，因為 Tailwind 在建置時會超過 3,500KB。

But when you go to build for production, it will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads.

但當你準備好建置生產環境時，它會自動清除最終 bundle 中任何未使用的 utility，產生最少的死程式碼，進而加快頁面載入速度。

But who has time to learn and memorize all these different utility classes?

但誰有時間去學習和記住所有這些不同的 utility classes 呢？

Where Tailwind really shines is with its tooling.

Tailwind 真正發光發熱的地方在於它的工具。

You don't need to memorize much because VSCode will autocomplete every Tailwind class.

你不需要記住太多東西，因為 VSCode 會自動完成每一個 Tailwind class。

If you're not sure what it does, just hover over it and it will show you the equivalent code in plain css.

如果你不確定它做了什麼，只要將滑鼠移到上面，它就會顯示對應的純 CSS 程式碼。

And if you're not happy with what it does, you can easily customize everything from the color palette it to the spacing to build your own unique design system.

如果你對它的效果不滿意，你可以輕鬆自訂從調色盤到間距的所有內容，建立你自己的獨特設計系統。

This has been tailwind CSS in 100 seconds.

Make sure to like and subscribe if you want to see more short videos like this and if we hit 10,000 likes I'll make a full Tailwind tutorial Thanks for watching and I will see you in the next one.

如果你想看更多這類短影片，請務必按讚並訂閱；如果我們達到 10,000 個讚，我會製作一個完整的 Tailwind 教學。感謝觀看，我們下次見。