ウェブアプリ開発にTailwind CSSを導入してみた

はじめに

ベイジではウェブアプリのモック実装やJSのフレームワークでフロントエンド実装をすることが多いです。

フレームワークでの案件が徐々に増えていくにつれ、様々なJSフレームワークに合わせてCSSをマークアップすることが大変で、課題となっています。これらを解決するためにTailwind CSSを導入することを検討しました。

結果的にはアプリのフロントエンド実装にはとてもメリットがあり、課題を解決することもできました。Tailwind CSSの具体的な機能と、実際に導入してみての感想をご紹介します。

Tailwind CSSとは

Tailwind CSSはユーティリティファーストのCSSフレームワークです。個別にCSSを記述する必要がなく、決められたユーティリティクラスをhtmlに追加するだけでスタイリングが可能です。一般的なCSSの書き方との違いは以下のコードで説明します。

一般的なCSSの書き方

<button class="button" type="button">
　ラベル
</button>

このように、先にCSSのクラス名を決めて、そのクラスに合わせてスタイルを追加して行くのが一般的です。

tailwind cssの書き方

<button class="font-bold items-center justify-center inline-flex duration-300 border-solid rounded bg-primary-100 text-white hover:bg-primary-hover" type="button">
　ラベル
</button>

Tailwind CSSはhtmlに直接ユーティリティクラスを組み合わせるだけでスタイリングします。そして、スタイルを編集する場合も特定のCSSクラスを更新してデザインの調整を行います。

採用するメリットとデメリット

Tailwind CSSを使う前は実装の難易度が高く、使いにくいのではと考えていましたが、実際には学習コストは低く、慣れると実装の効率がよくなったと感じました。

メリット

実際に導入してみてのメリットは以下のとおりです。

• 決められたユーティリティクラスを使うだけなので、クラス名を考えなくて良い
• 様々なJSのフレームワークと相性がよく、他のフレームワークに流用することが簡単
• 既存のクラス名を使い回すので、パーツが増えた時にクラス名を追加してCSSが増えることがない
• 特定のクラスを変えるだけでデザインの調整ができる
• テーマの設定を行うことで、デザインルールから逸脱せずにスタイリングできる
• 多くの開発で採用されているので、情報が得やすい
• アプリ開発ではAtomic Designをよく使うので、相性が良い

デメリット

要素に直接ユーティリティクラスを追加してスタイリングするので、付与するクラスの量が非常に多くなり、可読性がとても落ちてしまいます。特にパーツを再利用することが多い場合は不向きです。（後述する@applyを用いることでこのような問題の解決ができます）

主な機能

その他、Tailwind CSSを使うことで便利に感じた機能を紹介します。

テーマの設定

テーマの設定を行うことで、デザインルールに合わせてカラー、余白、その他プロパテを登録することが可能です。

▼tailwind.config.js

module.exports = {
  // テーマの設定
  theme: {
    // BreakPoint
    screens: {
      'sm': '375px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1200px',
      '2xl': '1200px',
    },
    // Colors Platte
    colors: {
      primary: {
        'hover': '#677cf0',
        '150': '#6871a6',
        '100': '#293576',
        '70': '#7b83ad',
        '40': '#99A5AD',
        '30': '#c1c6d9',
        '10': '#f2f4fc',
      },
    },
　  ....
  },
}

不要なCSSの削除

不要なCSSは残っているとパフォーマンスの低下につながりますが、Tailwind CSS側で自動的に使用していないユーティリティクラスを探し出して、削除してくれる機能があります。

▼tailwind.config.js

module.exports = {
  // 監視する箇所を設定
  content: [
    "./public/**/*.{html, js}",
  ],
}

コンポーネント化

ユーティリティクラスが大量についたパーツを何度も再利用するとHTMLの可読性が落ちてしまいます。そこで@applyの機能を使用します。@applyは以下のように複数のユーティリティクラスを一つのクラスにまとめて指定することができます。

▼style.css

.button {
    @apply font-bold items-center justify-center inline-flex ....
}

Tailwind CSSをより効率よく使うためには

便利で使いやすいTailwind CSSですが、膨大なユーティリティクラスを覚えて開発するのは大変です。そのため、VSCodeに以下のプラグインをインストールして開発することをおすすめします。

Tailwind CSS IntelliSense

ユーティリティクラスの候補を表示してくれるなどの入力アシスタント機能です。

Headwind

ユーティリティクラスの順番をルール通りに自動で再配置してくれます。

Tailwind CSS Explorer

VSCode内でTailwind CSSの属性クラスを確認できます。

Tailwind Docs

VSCodeで検索したクラス属性からTailwind CSSの公式ドキュメントの該当ページを開いてくれます。

おわりに

Tailwind CSSは人気がだんだん高まっていて、JSフレームワークを主に使うウェブアプリではとても便利で、実装の効率が上がります。ただ、通常のウェブサイトの開発においては使うメリットはそこまでないと個人的に感じており、使い所を見極める必要があります。