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