案件でtailwindを使用した際の所感

こんにちは。アイレット株式会社デザイン事業部の鶴若です。
案件でtailwindを使用する機会が有り、その所感を残しておきたいと思います。

導入

公式のドキュメント通りの手順で行えば、躓く事なく導入する出来ると思います。
案件の環境にあった方法を選び、設定しましょう。
https://tailwindcss.com/docs/installation

案件の前提条件

(1) 静的HTMLを制作しシステム開発担当のエンジニアへパス
(2) tailwindを利用するが@applyなどでまとめずclass内に全てのユーティリティクラスを記述して欲しい

条件を解決するために

(1)は、普段からしばしばやっている事なので、何も問題が起きる事はありませんが、
(2)に関しては最初からphpやreact、vueでコンポーネントを制作していれば問題は無いと思います。
しかし、次の担当者にパスする前提で静的HTMLを制作する場合は、クラスにユーティリティクラス全記述の縛りがあると、
何かしらのHTMLテンプレートエンジンなどを利用しないと共通パーツに修正が入った場合、修正が困難になります。
（今回は、Nunjucksを利用しましたが、pugやejsなどの他のエンジンでも問題ないと思います）

tailwind.config.js

tailwind.config.jsは、名前の通りtailwindの設定ファイルです。
初期だと下記のような形になっています。

module.exports = {
  content: [
    './src/**/*.{html,js}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

contentにテンプレートエンジンで利用する拡張子を追加します。
動的に設定しているクラスを書き出し時にうまく参照できない場合があるので、ビルド先のパスを追加しておいた方が良いかもしれません。

module.exports = {
  content: [
    './src/**/*.{html,njk,js}',
    './dist/**/*.{html,js}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

theme.extendは各プロパティに値を追加する項目です。
初期設定にないものは、任意の値として ( w-[100px] ) 設定する事も可能ですが、後から値に変更があった時に検索・置換作業が膨大な量になる場合があります。
その場合は、theme.extendに設定する事で後々変更があった時に、そちらを編集する事で比較的容易に変更する事が可能です。

名前が被るとデフォルトの物が上書きされてしまい使えなくなってしまうので、
名前付の時にプロジェクト名等をプレフィックスとして付けて置くとデフォルトのクラス名と被る事がなくなるので設定して置くと良いと思います。
（詳しい設定方法は、公式ドキュメントの各プロパティページの下部に記載されています）
例：（カラー設定の場合）

module.exports = {
  theme: {
    extend: {
      colors: {
        'hoge-black': {
          DEFAULT: '#000',
          secondary: '#333333',
          hover: '#4d4d4d'
        }
      }
    }
  }
}

上記の追加項目の使用例：

<p class="text-hoge-black hover:text-hoge-black-hover">テキスト</p>
<p class="text-hoge-black-secondary">テキスト</p>

plugins には、プラグインを使用する際に追記が必要になります。
プラグインの導入方法に沿って追記をしてください。

テンプレートエンジンの活用

下記のように @apply でユーティリティクラスをまとめる方法などもあるのですが、今回はclass内に全て記述して欲しいという依頼があったので、それが使えない状態でした。
https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

html:

<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

まず、アトミックデザインのルールにそってコンポーネントを分け、細かいレベルでの修正が入っても修正が一括で適用されるようにします。

設定するユーティリティクラスが膨大になると視認性が著しく悪くなり、修正が発生した時に修正対象を探すのが困難になってしまいます。
なので、今回は、クラスを配列に格納し、 join で連結する事でメンテナンス性を確保しました。

下記のようにする事で、どこかに修正が入っても、それらを流用しているもの全てに適用する事が可能になります。

例：
/src/html/_object/atoms/text/default.njk

{%-
  set classes= {
    wrap: [
      'flex',
      'justify-center'
    ],
    text: [
      'text-black',
      'text-sm'
    ]
  }
-%}

<p class="{{ classes.wrap | join(' ') }}">
  <span class="{{ classes.text | join(' ') }}">テキスト</span>
</p>

/src/html/_object/atoms/molecules/default.njk

{%-
  set classes= {
    wrap: [
      'w-80',
      'bg-white',
      'p-5',
      'rounded',
      'shadow-md'
    ]
  }
-%}

<div class="{{ classes.wrap | join(' ') }}">
  {% include "_object/atoms/text/text.njk" %}
</div>

/src/html/_object/atoms/organisms/default.njk

{%-
  set classes= {
    wrap: [
      'flex',
      'gap-3'
    ]
  }
-%}

<div class="{{ classes.wrap | join(' ') }}">
  {% for i in range(10) %}
    {% include "_object/atoms/molecules/default.njk" %}
  {% endfor %}
</div>

今回は、tailwindを使用して欲しいという依頼でした。
管理画面やフォームなどのある程度形が決まっている物には有用なツールだと思いましたが、
CSSを理解していると設定やユーティリティを探したりと逆に遠回りになり時間がかかる部分があるという印象です。
また、オリジナルのデザインを元にしたフルスクラッチでのサイト構築する場合は、あえて選択する利点は無いと感じました。
tailwind.cssを使用する際は制作するデザインや開発手法を吟味してメリットを活かした使い方をするのが大事です。