TailwindCSSを触って感じたいいところと気をつけるべきところをN番煎じする

はじめに

この投稿は、no plan inc. Advent Calendar 202417日目の記事です。

no plan inc. でフロントエンドエンジニアとして参画しているひめのです。
今回は、開発でTailwindCSSを使って開発する機会があったため、使って感じたことをつらつらと書いていきます。

留意事項

• TailwindCSSについては、公式ドキュメントをご参考ください。
• 利用者の感想が書かれている、という目線で見ていただくのがちょうどいいスタンスだと思います。

いいところ

tailwind.config.js での独自変数定義

これはもう特筆すべきことではありませんが、例えばプライマリーカラーをプロダクトで統一している場合に、独自に primary という名前の色を定義できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ /* ... */ ],
  theme: {
    extend: {
      colors: {
        primary: '#FADAFA',
        // ...

長期運用する開発や、カラーの管理をしているWebサービス系のプロダクト、また、ダークモード対応するような場面ではとても重宝しそうです。

arbitrary values で最悪カスタム定義が可能

Using arbitrary values

tailwind.config.js で定義できるもの以外で、特殊な数値を利用したい場合には、 arbitrary values を用いることで回避可能なケースがほとんどです。

数値だけでなく、プロパティ名も同様のことが可能になっており（Arbitrary propertiesと呼ばれるようです）、最新のCSSプロパティを使いたい場合は、こちらを利用することも可能です。

コードジャンプが不要

これは人によりますが、スタイルを確認するために .css ファイルを参照する必要がなくなります。
エディターでどのようなスタイルがあたっているかを確認する場合、 .css ファイルと .tsx ファイルなどDOMが書かれたファイルを2つ同時に開いて、どのクラス名があたっているかを確認する、というような作業がなくなるのは地味にうれしい点でした。

VSCode 拡張が便利すぎる

Tailwind CSS IntelliSense という拡張機能を提供しており、これがとても便利です。

例えば、以下のように text- が始まるスタイルを重複してあてているとします。

const SomeComponent = (): JSX.Element => (
  <div>
	  <p className="text-left text-center">Some Component is awesome.</p>
  </div>
)

上記の場合、CSSは text-align: left と text-align: center が適用されます。
CSSの上書きをしている状態です。

そのようなクラスを当てている場合に、VSCode上では次の warning エラーが表示されます。
StyleLintのような機能という認識です。

'text-left' applies the same CSS properties as 'text-center'.(cssConflict)

上記以外にも、様々な機能が提供されています。

• クラス名のオートコンプリート:
  • Tailwind CSSのユーティリティクラス名をオートコンプリートします
  • クラスの候補をリアルタイムで表示し、素早くクラスを入力できます
• クラス名のリアルタイムプレビュー:
  • Tailwind CSSクラスのスタイル効果をコード内で確認できます
• 構成ファイルのサポート:
  • tailwind.config.js を認識し、プロジェクト固有の設定（カスタムカラーやフォントなど）をサポートします
• JIT（Just-In-Time）モード対応:
  • Tailwind CSSのJust-In-Time（JIT）モードに対応しており、即座にクラスの変更を反映します
• カスタムCSSクラスのサポート:
  • プロジェクトに定義されたカスタムクラス（例えば、@applyを使用したもの）も補完します
• HTML以外のファイル形式のサポート:
  • React（JSX/TSX）、Vue、Angular、Blade（Laravel）など、さまざまなフレームワークに対応しています
• エラーと警告の検出:
  • 無効なクラス名や未定義のクラスに対して警告を表示します
• カスタムテーマやプラグインの対応:
  • Tailwind CSSのテーマ拡張やプラグインを使用している場合でも、それに基づいた補完が行われます
• パフォーマンスの最適化:
  • 大規模なプロジェクトでも高速に動作するよう最適化されています
• VS Codeの統合:
  • VS Codeのインターフェースに完全に統合され、直感的に使用できます

TailwindCSSの書きやすさは、この拡張機能の優秀さともいい変えても差し支えない程度には充実しています。VSCodeを利用している場合は、是非導入しましょう。

気をつけるべきところ

CSSの学習が不要、というわけではない

スタイリングに関しては、最終的には暗記が重要と筆者は考えています。頭の中のブラウザレンダリングエンジンが、どれだけ最新かつ適切であるかが問われます（個人差があります）。

Tailwind CSSの記法をベースに覚えてしまうと、Tailwind CSSを使用しないプロジェクトでの作業時に、学習や適応が必要になる場合があります。
具体的には、「Tailwind CSSではどのようにするか」がまず頭に浮かんでしまい、それ以外の方法を考えるのに時間がかかることがあります。

プレーンなCSSをベースに学んでおくほうが、他のプロジェクトでも応用しやすく、スキルポータビリティの観点からも有効だと考えています。

利用したいと感じるケース

利用したくないというケースを考えるのに苦労するレベルですが、あえて言語化するなら次のようなシチュエーションなら利用を前向きに検討したいと考えています。

• スタイルに厳密なルールが存在しない、あるいは適用しなくてよい
• Vue/React/Svelteなど、コンポーネント指向で作成できるライブラリを利用する
• 開発するフロントエンドエンジニアが少人数（1~4名）
• ライブラリ依存に敏感ではない

さいごに

TailwindCSSは、CSSのユーティリティクラスを提供するライブラリとしては、拡張機能など周辺技術含めてとても有用だと感じています。
この記事が導入検討の参考になれば幸いです。

さいごまでお読みいただきありがとうございました！