chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • tailwind公式プラグイン prettier-plugin-tailwindcss が発表されました。

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

ナレッジ・ノウハウ
tailwind公式プラグイン prettier-plugin-tailwindcss が発表されました。

SHARE

ちょっと株式会社 エンジニアのたっちーです。
先日、嬉しいニュースが公開されました。

Automatic Class Sorting with Prettier

tailwind公式による、Prettierプラグインの公開です。

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

概要を見てみましょう。

インストール方法

npm install -D prettier prettier-plugin-tailwindcss
# or
yarn add -D prettier prettier-plugin-tailwindcss

上記コマンドでprettierprettier-plugin-tailwindcssをインストールするだけで
Prettierによってプラグインが自動読み込みされるようです。

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

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted
基本的には、

  1. Tailwindプラグインに由来しないカスタムクラス
  2. ベースレイヤー
  3. コンポーネントレイヤー
  4. ユーティリティーレイヤー

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

カスタマイズについて

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#customization
並び替えのカスタマイズについては対応していないと発表しています。
カスタマイズが有効であるとチームでその分、議論の余地が発生してしまいます。
カスタマイズがないということは、チームでの議論をその分短縮することができます。

おわりに

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

弊社では、こういった新しい事を果敢に取り入れるエンジニアを募集しています!
Next.jsGatsby.jstailwindcssなどを用いて一緒に会社を盛り上げていきませんか?
ご興味のある方、お話を聞きたい方のご応募お待ちしております。
https://herp.careers/v1/chot

たっちー

フロントエンドエンジニア

1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。 現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。 コーヒーとジャパンサブカルと技術のお話が大好きです。 ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.