https://zenn.dev/mikinovation/articles/20220916-tailwind-idea
私は普段VueでTailwindを導入し利用しているフロントエンドエンジニアである。最近TwitterにてTailwind CSSの話題をよく目にするようになり、uhyo氏によって以下の記事が投稿された
本記事ではこのuhyo氏による記事に対する考察と私のtailwindに対する考えをまとめた
Tailwind CSSはユーティリティファーストのCSSフレームワークである
This approach allows us to implement a completely custom component design without writing a single line of custom CSS
TailwindはシングルラインでCSSを書くことなく、コンポーネントのデザインを実装できるようにしたものだ。ドキュメントによると以下のように記述されている
まず1点目は開発者がクラスの命名を考える必要がないという点である。この点に関してはuhyo氏の補足によるとTailwindだけ提供できるメリットではなく、インラインスタイル全般に言える。この点に関しては後述する
2点目としてCSSを肥大化させないという点である。これはMPAで作ったアプリケーションを想像した方が良さそうだ。MPAで作ったアプリケーションではクラス名を機能毎につけることが多い。そうすると必ずdisplay: flex等の同じCSSプロパティが何度も書かれビルドサイズが大きくなる。このようにクラス名だけでグローバルなCSSを定義していくと必ずCSSは肥大化する。
Tailwindははそもそもクラス名をつける必要がないため、display: flexのようなCSSは一回のみ定義されたものとみなされ不要なCSSはビルドされたコードには含まれない。この点はTailwindの優れた性能である
3点目としてコードの変更がより安全になるという点である。tailwindでスタイルを記述した場合、スタイルの責務は記述されたDOM要素内に閉じている。よってスタイルの変更があったとしても影響範囲は必ずそのコンポーネントに限定される。これも1点目と同じくTailwindのみが提供できるメリットでなく、インラインスタイル全般に言えるメリットであると考えられる
Tailwindはこれらのメリットによって開発者の生産性を向上させることができると考えられている
「クラス名を考える時間を無駄にしない」ということであるが、これはuhyo氏にも述べられているとおりTailwindだけのメリットではない