Tailwind CSSが便利
最近業務でTailwind CSSを触り始めて、とても便利だと感じています。世間的にはもうずいぶん前から使われているものなので、使っている人からすると何をいまさらという感じでしょうけども。
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
僕が便利だと感じているところは以下です。
- いい感じのユーティリティたち
- マークアップから離れないですむ
- CSSの共通化を考えなくてよい
いい感じのユーティリティたち
box-shadowなど、自分で書くとセンスのない感じになるので基本使わないとなりがちです。が、Tailwind が用意したものを使うといい感じです。
アニメーションなども、いい感じのものたちが用意されています。
いい感じの影、いい感じのアニメーションを考えるのはそれだけで勉強がかなり必要そうな分野なので、こうしてclass名を記述するだけでそれが手に入るというのはすごいことですね。古くはjQueryプラグインやBootstrapもそういうものを提供していた気がしますが、それらよりも洗練されている気がします。
マークアップから離れないですむ
Tailwind CSSを使うとclass名をぺたぺたとHTMLのその要素につければほしいスタイルが出来上がるのでいいですね。CSSを分離するとどうしてもclass名はどうしようかと考えたり、別ファイルを開いて作業の手間が発生したりと地味に面倒です。
独自クラス名の設計を考えなくて良い
機能としては用意されているので、独自クラスにTailwindのスタイルを当てることができないわけではありません。が、これはあまり推奨されていません。これがすごい良いと感じました。公式ドキュメントの「Reusing Styles」というページを読むと以下の様に書かれています。
Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you
@apply という記法で独自のクラス名に対してTaiwindのスタイルを当てられるのですが、これをやりだすとカスタムCSSだらけになってしまって、Taiwindのうまみが薄れてしまうという話です。
その代わりに、フロントエンドのコンポーネントやテンプレートで、マークアップと一緒にまとめられると良いですねと。
使ってみる前は「そういうものもあるんだ」という感じだったんですが、使ってみると便利さに感動してしまいました。Tailwindのクラス名覚えるまではスラスラ書けないのでちょっとだけ大変ですが、慣れたら手放せなくなりそうです。