tailwind公式プラグイン prettier-plugin-tailwindcss が発表されました。

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

ちょっと株式会社 エンジニアのhanetsukiです。

先日、嬉しいニュースが公開されました。
tailwind公式による、Prettierプラグインの公開です。

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

今までは、サードパーティー製のプラグインでフォーマットをどうにかしていましたが、ファーストパーティー製でサポートされるのはとても喜ばしいです。😊

概要を見てみましょう。

インストール方法

npm install -D prettier prettier-plugin-tailwindcss
# or
yarn add -D prettier prettier-plugin-tailwindcss
上記コマンドでprettierとprettier-plugin-tailwindcssをインストールするだけで

Prettierによってプラグインが自動読み込みされるようです。

クラスの並べ替えについて

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

基本的には、Tailwindプラグインに由来しないカスタムクラス

1. ベースレイヤー
2. コンポーネントレイヤー
3. ユーティリティーレイヤー

の順序で並び替えられます。

カスタマイズについて

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#customization

並び替えのカスタマイズについては対応していないと発表しています。
カスタマイズが有効であるとチームでその分、議論の余地が発生してしまいます。
カスタマイズがないということは、チームでの議論をその分短縮することができます。

おわりに

ファーストパーティー製でのサポートは非常にありがたいなという限りです。

カスタマイズについても、「もっとも重要な情報を視覚的に理解できるようソートされるように考慮しました。このソート順はあなたの好みを上回り、すぐに慣れると思います。」と述べられており、tailwindの強気の姿勢に私個人、好意を抱きました（笑）

弊社では、こういった新しい事を果敢に取り入れるエンジニアを募集しています！
Next.jsやGatsby.js、tailwindcssなどを用いて一緒に会社を盛り上げていきませんか？
ご興味のある方、お話を聞きたい方のご応募お待ちしております。

https://herp.careers/v1/chot