はじめに
去年よりTailwind CSSを使って開発を行なっています。以前は、Bootstrapを使った開発かフレームワークなしでの開発しか経験がありませんでした。
Tailwind CSSは他のフレームワークと何が違うのか、どういった特徴を持ったフレームワークなのか、など開発を通して感じたことを含めお伝えしていきたいと思います。
どんなフレームワーク？
Tailwind CSSは、ユーティリティーファーストのフレームワークです。
Bootstrapのように、あらかじめ用意されたコンポーネントを利用してカスタムしていくのではなく、必要なユーティリティクラスをhtmlタグに書いてデザインをカスタマイズしていきます。
具体的には、Bootstrapが提供しているcontainerクラスやbtnクラスに類似したものはありません。その代わりに、マージン、高さ、幅...など基本的なスタイルが定義されたユーティリティクラスが幅広く提供されているので、そのクラスを自由に組み合わせてスタイリングしていきます。
ユーティリティクラスは、基本的にcssのプロパティと値を組み合わせたネーミングがされているので、例えば、黒背景白文字の長方形を作りたい場合、下記のような指定をすることで実現できます。
どんな特徴？
Tailwind CSSを使うまでは、cssにクラスとスタイルを書いて該当するhtmlタグにそのクラスを記載する....という従来の方法で開発を行っていました。その為、最初はhtmlタグにユーティリティクラスを追加していくという方法に違和感がありましたが、使っていくうちにTailwind CSSのありがたみを体感できるようになりました。
以下の3点が大きなメリットになります。
- クラス名を考えなくていい
指定するスタイルに見合った抽象的なクラス名をいちいち考える必要がありません。小さなプロジェクトであればあまり負担にはならないかもしれませんが、大きなプロジェクトになればその労力はかなりのものになります。知らない間にクラス名が重複してしまうことも発生しません。
- cssファイルの肥大化を防ぐ
htmlタグにユーティリティクラスを追加してスタイリングしていく為、機能やページが増えるごとにスタイルをcssに記載するという作業が発生しません。
- スタイルの修正が容易
cssに記載されたクラスを修正する場合、どのページに影響があるのかを全て確認しなければいけません。Tailwind CSSであれば、該当するhtmlのユーティリティクラスを修正するだけでいいので、恐れることなくスタイルの修正を行えます。
htmlタグ内でのスタイリングであれば、インラインスタイルという方法と同じなのでは？と思う方もいるかもしれませんが、ユーティリティクラスはインラインスタイルと比べ、はるかに利便性が高いです。
具体的には以下の3点が利点として考えられます。
- デザインに一貫性を保てる
インラインスタイルの場合、開発者が自由にスタイリングすることが可能な為、ページによってデザインが異なる、といった事象が発生してしまう可能性があります。
Tailwind CSSは、あらかじめ定義されたユーティリティクラスのみ使用できるので、デザインに統一性を持たせることができます。 - ブレークポイントの指定が可能
インラインスタイルでは、ブレークポイントの指定はできませんが、Tailwind CSSであれば、htmlタグ内でレスポンシブに対応した指定ができます。
一般的なブレークポイントがあらかじめ定義されている(カスタムすることも可能です)ので、ブレークポイントのキーをユーティリティクラスの前につけてあげればhtml内でレスポンシブ対応を完結させることができます。
例）
ブラウザ幅1280px以上 = テキストの色は緑
ブラウザ幅768px以上 = テキストの色は黄
ブラウザ幅767px以下 = テキストの色は白
- 擬似クラスの指定が可能
インラインスタイルでは、HoverやFocus、Activeなど擬似クラスの指定ができませんが、Tailwind CSSでは、htmlタグ内で擬似クラスの指定ができます。
先ほどのブレークポイントと同様に、ユーティリティクラスの前に指定することができます。
例）
通常テキスト = テキストの色は白
ホバーした時 = テキストの色は青
メンテナンス性は？
htmlタグにユーティリティクラスを追加するのが基本的なスタイリング方法ですが、ボタンやバッヂなど汎用的に使用されるスタイルをコンポーネントとして抽出することも可能となっています。
指定方法は簡単です。cssファイルにクラス名を記載し、そこにユーティリティクラスを指定するだけです。下記のようにユーティリティクラスの前に@applyをつける必要がありますが、基本的な書き方は従来の方法と同じです。
@apply + ユーティリィティクラス
カスタマイズできるの？
多くのユーティリティクラスが提供されていますが、場合によってはそれだけではまかなえない時もあります。そういった時は、自由にユーティリィクラスを追加することができます。
設定ファイルの拡張オプションに、追加したいスタイルのキーと値を記載すればデフォルトのユーティリティクラスと同じように扱うことが可能です。
開発をより快適に
UIやFormなども提供されています。様々なパターンが用意されているので、1からコーディングをする手間を省くことができます。また、codepenのようなブラウザで表示を確認できるツールもあります。
これらを活用すればコーディング時間を短縮することができますね！
YoutubeやTwitterなどでも情報発信を行なっているので、気になる方はチェックしてみてください。
Tailwind CSSの開発を経て
Tailwind CSSを使い始めた時は、htmlタグにユーティリティクラスを追加してスタイリングしていく開発方法に違和感がありました。しかし、いくつかのプロジェクトを経て慣れていけば、とても開発しやすい方法だなと感じるようになりました。擬似クラスやブレークポイントも含めhtmlファイルだけで完結でき、クラス名を考える必要がないことは開発者にとってかなりの負担軽減になると思います。
また、Tailwind CSSの設定ファイルでカスタマイズしたスタイルを共有しているので、複数人で開発した場合もスタイルの記述方法を統一できるのでとても便利だなと思いました。
バージョンもアップデートされ、既存ユーティリティクラスの種類も増えたので更に便利なフレームワークになっていくのかなと感じています。
