Menu
热门标签

技术周刊 | Express.js 5.0、Meta Connect 2024、字节发布两款视频生成大模型、OpenAI CEO 发长文预测超级人工智能

李瑞东·
阅读14分钟
·2024-11-09
Tailwind CSS 好香

前言

在開發網頁使用者介面的過程中,CSS 是不可或缺的元素。然而,隨著專案規模的擴大,僅使用原生 CSS 在開發效率和維護性上會面臨種種挑戰。這時候,導入一個合適的 CSS 框架就是一個常見的解決方案。

最早推出於 2017 年,Tailwind CSS 是一個採用了「Utility First」理念的 CSS 框架。相對於傳統的 CSS 框架如 Bootstrap 或 CSS-in-JS 解決方案,Tailwind CSS 有著其獨特的優勢和特色。近年來,隨著生態系發展日益成熟,Tailwind CSS 儼然已成為現代前端 UI 開發的默認選擇。官方團隊在今年六月的時候還舉辦了首次的 conference Tailwind Connect,顯示了 Tailwind 的未來前景不可限量。

對於初學者而言,剛開始使用 Tailwind CSS 或許會感到有些不習慣。但根據我的個人經驗,一旦掌握了基本概念,開發過程將變得越來越得心應手,甚至感到「再也回不去原生 CSS 了!」所以,我希望透過這篇文章來介紹 Tailwind CSS 的基本概念、安裝方法,以及建議的學習路徑和相關工具,讓更多人能夠感受到 Tailwind CSS 的魅力。

Tailwind CSS 基本概念

Utility First Framework

前面有提到 Tailwind CSS 是主打「Utility First」的 CSS 框架,這意味著它提供了大量已預先定義好的、單一用途的 CSS class,讓我們可以直接應用在 HTML 標籤上,而不需要額外撰寫 CSS 樣式。

與 Bootstrap、CSS-in-JS 的差異

Bootstrap 雖然可以快速地為應用程式打造可用的 prototype,但他在客製化上缺乏彈性長期為人詬病,也會發生「Bootstrap 網站看起來就像是 Bootstrap 網站」的狀況。Tailwind CSS 則更注重自由度和彈性,不像 Bootstrap 提供了預先設計好的元件,透過複製貼上就可以在應用程式中使用,Tailwind CSS 僅提供了預先定義好的 utility class,需由開發者自行搭建所需的元件。

雖然是 V2 的介紹 (現在已經是 V3) 但是主要的概念和做法都是延續的!

最好的學習方式是實際將 Tailwind CSS 應用在專案中。我們可以從小型的專案開始,嘗試應用各種不同的 utility class 來還原設計稿。Frontend Mentor 網站中的大小挑戰都是值得拿來練習的素材。沒有聽過 Frontend Mentor 這個網站的朋友可以參考以前寫過的這篇文章:Frontend Mentor 前端切版練功坊:用實作來逃離 tutorial hell 吧!

Marked - Markdown Parser

Marked lets you convert Markdown into HTML. Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML. This demo page will let you type anything you like and see how it gets converted. Live. No more waiting around.

How To Use The Demo

  1. Type in stuff on the left.
  2. See the live updates on the right.

That's it. Pretty simple. There's also a drop-down option above to switch between various views:

  • Preview: A live display of the generated HTML as it would render in a browser.
  • HTML Source: The generated HTML before your browser makes it pretty.
  • Lexer Data: What marked uses internally, in case you like gory stuff like this.
  • Quick Reference: A brief run-down of how to format things using markdown.

标题h3

Why Markdown?

It's easy. It's not overly bloated, unlike HTML. Also, as the creator of markdown says,

The overriding design goal for Markdown's formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

标题3

Ready to start writing? Either start changing stuff on the left or clear everything with a simple click.

TASK LIST

  • foo
    • bar
    • baz
  • bim

CODE BLOCK

// 第 3 版规范的最终设计
try {
  doSomething();
} catch (e) {
  if (e == "thing")
    console.log("a thing")
  else if (e == 42)
    console.log("42")
  else {
    console.log(e);
    throw e; // 重新 throw
  }
} finally {
  cleanup();
}

标题2

标题3

评论(6)
0 / 1000
2024-09-27
鸿蒙爆发?怎么爆发,被制裁,没芯片,市场占有度又低,靠爱发电?
2024-09-27
6666
2024-09-27
鸿蒙爆发?怎么爆发,被制裁,没芯片,市场占有度又低,靠爱发电?
2024-09-27
鸿蒙爆发?怎么爆发,被制裁,没芯片,市场占有度又低,靠爱发电?
2024-09-27
鸿蒙爆发?怎么爆发,被制裁,没芯片,市场占有度又低,靠爱发电?