Tailwind CSSでCSSをアップデートしよう

こちらの記事は【2/13in梅田】Ateam Design MeetUp_Vol.08 フロントエンド特集！の登壇資料です。

今回は"Utility-First"なCSSフレームワークであるTailwind CSSについてお話しします。

今回のゴール

・Tailwind CSSの利点がなんとなく伝わる
・Tailwind CSS使ってみたいと思ってもらう

Tailwind CSSとは

Refactoring UIのAdam WathanとSteve Schogerが作ったPostCSSフレームワークで、特徴として"ユーティリティーファースト"なことが挙げられます。Bootstrapのように、classの組み合わせでCSSを書いていきます。擬似クラスやメディアクエリもclassで指定できるので、CSSを一切書かずに完結できるのがメリットです。
Tailwindができた背景はこちらの記事が分かりやすかったので、気になった方はどうぞ。

ユーティリティーファーストとは

Tailwindはmarginやpaddingの指定のためのユーティリティクラスの設定集で、Bootstrapのように部品のclassが予め指定してあるわけではありません。Tailwindがデフォルトで持つのは、下記のような1つのプロパティをclassにしたユーティリティークラスのみです。

上記はDisplayプロパティを指定するclass一覧。このように部品ではなくプロパティ単位でclassが設定されています。

使い方

公式を見れば全て書いてあります。
https://tailwindcss.com/docs/installation

Tailwind CSSはデザインの品質担保やデザイン保守を楽にしてくれるなと感じています。以下でその理由をご説明します。

Tailwind CSSがデザインの品質担保やデザイン保守を楽にしてくれると感じる4つの理由

・制約ベースである
・壊れにくい
・class名を考えなくていい
・捨てやすく、再利用しやすい

制約ベースである
CSSを複数人で書こうとすると、例えばpaddingはpx, %, em, remなどいろいろな指定の仕方があると思いますが、tailwindではいずれかの書き方に制限してしまうことで、記述を統一することができます。

壊れにくい
CSSファイルを触らないので、優先度や読み込み順によるスタイル崩れの心配がないのが主な理由です。作者も”CSSのメンテは辛いけど、HTML編集するのは簡単”と言っています。

via Adam Wathan - Tailwind CSS Best Practice Patterns

class名を考えなくていい
Tailwindで指定されたclass名を指定していくだけなので、チームで共通認識も取りやすいし、名前空間に悩むこともないです。

捨てやすく、再利用しやすい
そもそもCSS側のメンテナンスが必要ないので、消すときはHTML側でソースを消去するだけで大丈夫。コピーしたい時もHTMLをコピーするだけで良いです。名前空間の衝突やCSSの重複に気を使う必要がないからです。

最初「ん？」と思ったけど、調べたら納得したところ

ファイルサイズでかそう・・・
以下の図を見てもらうとわかる通り、実際大きいです。パフォーマンス考えてもサイズが大きいのはあまり良くないですね。

網羅的にユーティリティクラスを作ってあるのが原因ですが、PurgeCSSと組み合わせて使うことで本番環境では必要なclassしかコンパイルされないようにできます。こんな感じに。

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({

 // Specify the paths to all of the template files in your project 
 content: [
   './src/**/*.html',
   './src/**/*.vue',
   './src/**/*.jsx',
   // etc.
 ],

 // Include any special characters you're using in this regular expression
 defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
 plugins: [
   require('tailwindcss'),
   require('autoprefixer'),
   ...process.env.NODE_ENV === 'production'
     ? [purgecss]
     : []
 ]
}

Reactでは必要ない？
theme-uiみたいなライブラリもあるので、制約ベースで管理する方法は他にも候補はあるのでお好みで。

ただ、Tailwindでも問題なく制約ベースのCSSを書けるし、学習コストが低いのは場合によっては大きなメリットだと思います（あまりスキルが高くない人が触る場合は特に）。特に部分的に（フォームとかソート機能とか）Reactを導入している場合はTailwindでスタイル管理を一本化できるので、非常に良いのではないでしょうか。

最後に 

Tailwind CSSを使ってみたいと思ってもらえたでしょうか？
CSSの課題感って、JSなどに比べて仕組みで解決されないまま放置されることが多い気がします。

弊社ではデザイナーがCSSを書くのですが、こういった課題を解決することによって、今までCSS設計や検証にかけていた時間を「より本質的な改善」に向けることができるので、よろこぶ人が多いのではないかと思います！

相性が良さそうなプロジェクトがあれば、是非使ってみてください！