CSS何で書いてますか？忙しいですか?Tailwind CSS使ってもらっていいですか？

皆さん、CSS何で書いてますか？

自分は最近もっぱら Tailwind CSS（以下 TW ）で書いています。皆さんにもTWで世界を救ってほしいので、よく使うテクニックをいくつか紹介したいと思います。

befter

擬似要素、皆さん大好きですよね。
before と after まとめて書きたいこともあるかと思います。
そんな時は tailwind.config.js に以下のように追加すると、 befter: が使えるようになります。

export default {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("befter", ["&:before", "&:after"]);
    }),
  ],
}

［ VSCode でサジェストされる様子 ］

state

TW では、親クラスの指定を登録することができます。ステータスなどを data で取り扱う際に、冗長になりがちなので登録して使用するととても便利です。
また、サジェストしてくれると更に効率よくなりますね。
こちらも、 tailwind.config.js に追加します。

export default {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("isVisited", "html[data-strage-is-visited=visited] &");
    }),
  ],
}

［ VSCode でサジェストされる様子 ］

js と組み合わせる

残念ながら、TW は text-${size} のような書き方をする事ができません。
こちらの記事で詳しく書かれている通り、不要なスタイルを生成しないために一度静的にコードを解析するため、完全なクラス名を書く必要があります。
そのための解決策をいくつか紹介します。

preload

とりあえずどこかにクラス名を書く。

const preloadTw = [
  "bg-hoge",
  "bg-fuga",
];

const color = "hoge";

このように、どこかで完全なクラス名を書いておけば、以下のように指定してもスタイルが生成されるようになります。
ただし、不要になった際、消し忘れると、使わないスタイルが生成されてしまうので、注意が必要です。

<div class={`bg-${color}`}></div>

クラス名は全部書く

上の例とほぼ同じことですが、この方が、Linter にもかかりやすく安全です。

const color = "bg-hoge";

<div class={color}></div>

hoverOnlyWhenSupported

このオプションを追加することで、hover 可能なデバイスでのみ、hover スタイルを適用することができます。
これは、公式から v4 にアップデートされるまでの間のフラグです。

export default {
  future: {
    hoverOnlyWhenSupported: true,
  },
}

なぜ使うのか

TW は、嫌われがちなフレームワークです。
正直自分も最初は苦手でしたし、「こんなん誰が使うねん」と思っていました。
しかし、近年 HTML を便利に書くためのフレームワークが充実しています。クラス名が長くなるなど、今となっては全く気にならないし、使えば使うほど手に馴染むと思っています。
一度 Sass に戻ったりもしましたが、結局また TW を使っています。

今回、テクニックをたくさん紹介しようと思いましたが、すでにデフォルトの機能だけでも便利すぎて、思ってたよりも薄い内容になってしまいましたが、それくらい充実したツールということを改めて感じました。
何がそんなにいいのか、メリットやデメリットにフォーカスした記事も次回書きたいと思っています。

---

終わりに

NEW FOLK では、モダンなフレームワークを使用した開発や、インタラクティブなサイト制作を得意としている制作会社です。
サイト制作のお問い合わせや、クリエイティブにまつわるご相談、お待ちしております！