Skip to content
TopicTracker
出典 HackerNews原文を表示
翻訳言語翻訳言語

Tailwind

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、あらかじめ定義されたクラスを使用して迅速にスタイリングを行える。従来のセマンティックCSSとは異なり、HTML内で直接デザインを構築するアプローチを採用しており、開発の効率性と一貫性を高めることができる。

背景メモ

- Webデザインの世界では長年、「ユーティリティファースト」か「セマンティックCSS」かの議論が続いてきた。前者は「mt-4(margin-top: 1rem)」のようにスタイルを直接クラス名で指定するアプローチ、後者は「.card-title」のようにデザインの意味に名前を付けるアプローチ。 - Tailwind CSSは2017年に登場したユーティリティファーストCSSフレームワークで、React/Next.jsエコシステムと組み合わせて爆発的に普及。開発スピードの速さが評価される一方、「HTMLがクラス名で埋め尽くされる」「見た目が全て同じになる」といった批判も根強い。 - 「Tailwind離れ」の動きも散見され、代わりにCSS-in-JSや従来のセマンティックCSS、あるいはVanilla Extractなど型安全なゼロランタイムCSSに移行する事例も出てきている。本記事はこの過渡期の空気を背景に、Tailwindの功罪を論じている。

関連記事