ロゴテキスト ロゴ

    Tailwind CSSを自動で並び替える prettier plugin tailwindcss

    Tailwind CSSを自動で並び替える prettier plugin tailwindcss

    Tailwind CSSのクラス名を自動で並び替えてくれるPrettierのプラグイン prettier-plugin-tailwindcss をご紹介!


    // before
    <div className="m-8 flex-col py-6 text-center justify-between px-2 items-center flex" />
     
    // after
    <div className="m-8 flex flex-col items-center justify-between px-2 py-6 text-center">

    並び替えを行うとTailwind CSS公式ブログに載っている推奨順になります

    検証した環境

    1 prettier 3.2.5
    2 prettier-plugin-tailwindcss 0.5.12

    インストールと設定

    インストールします

    npm install -D prettier-plugin-tailwindcss

    Prettierの設定ファイルを更新します

    prettier.config.js
    module.exports = {
      plugins: ['prettier-plugin-tailwindcss'],
    }

    この2点のみで設定完了!




    Prettierを実行すると



    いい感じにclassNameが並び替わってます!👏

    その他

    他Prettierプラグインとの互換性を担保するためにpluginsの最後に記載するのが良いそうです

    prettier.config.js
    // .prettierrc
    module.exports = {
      // ..
      "plugins": [
        "prettier-plugin-svelte",
        "prettier-plugin-organize-imports",
        "prettier-plugin-tailwindcss" // MUST come last
      ]
    }

    詳しくは公式GitHubに記載されてます

    A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
    4.7k
    108
    JavaScript


    2024-04-11 追記

    ESLintを使う事でより良い設定が出来ます!

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。