大変ご無沙汰しております。日々の業務に忙殺され、なかなかDevelopers Blogへの投稿ができていなかったのですが💦、、少しづつ時間を見つけては気になる情報発信を記事にしておきたいと思います。
ということで、本日は、「便利なプラグイン」ということで、「prettier-plugin-tailwindcss」について、簡単にまとめておきたいと思います。
prettier-plugin-tailwindcssとは？
prettier-plugin-tailwindcsとは、その名の通り、Tailwindcssのプラグインなのですが、Tailwind CSSクラスを含むクラス属性を探して、推奨されるクラスの順序に従ってそれらのクラスを自動的に並べ替えてくれるという便利ツールです。
Twitterでも、Tailwins CSSが prettier-plugin-tailwindcs を紹介してくれています。
🚀 Introducing `prettier-plugin-tailwindcss` — our official Prettier plugin for automatically sorting your Tailwind classes!https://t.co/yXt4Pgm8aK
— Tailwind CSS (@tailwindcss) January 24, 2022
コードではできるだけシンプルに、美しく書きたいものですが、どうしても開発者個人の思考が反映されてしまうものです。tailwindを使用したclassの書き方も同様で、多くの開発の現場では、tailwindcssを使用してクラスを書く際に、記述する内容の順序については、「なんとなく」「Developerがそれぞれの思いで」、記述していくケースが多かったと思います。
prettier-plugin-tailwindcss を使うことで、記述の順番をある決まった並び順に自動で並べ替えてくれるのです。
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">と書いたとしても、
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">と並べ替えてくれるので、複数人でHTMLを書かなければならないようなプロジェクトにとっては大変有難いプラグインとなります。
prettier-plugin-tailwindcssのインストール方法
prettier-plugin-tailwindcssのインストール方法はいたってシンプルです。
npm install -D prettier prettier-plugin-tailwindcss以上、終了です。簡単ですね。
詳細については、tailwindcssの「Automatic Class Sorting with Prettier（外部リンク）」ページに詳細が掲載されていますので、気になる方はサイトを訪れてみてください。
コンピューターにできること、コンピューターが担当したほうが正確だったり、効率があがるものは、どんどん取り入れて、作業量を減らしていきたいものですね。(^▽^)/