HTMLでtailwindcssのクラス名を自動整形する方法

はじめに

備忘録です
React等でtailwindcssを使用し、class名を自動で並び替える方法は紹介されています
本記事ではHTMLでtailwindcssを使用し、class名を自動で並び替える方法を紹介します

追加前提

これらを使います
npmの利用方法がわかっていることが前提です
tailwindcssのセットアップについては解説しないので公式をみながら設定してください その際CDNではなくCLIを使用して設定してください

1 VSCode
2 eslint
3 node(npm)

設定手順

1 package.jsonを初期化する(tailwindcssの環境を構築しているはずなので不要)

$ mksir sample # ディレクトリ作成
$ cd sample # 作成したディレクトリに移動
$ npm init -y # package.jsonの初期化

2 必要なpackageをinstall

$ npm i -D eslint eslint-plugin-tailwindcss @angular-eslint/template-parser

3 EsLintの初期化

$ npm init @eslint/config

インタラクティブに色々聞かれるので下記の順で選択

1 To check syntax and find problems
2 JavaScript modules (import/export)
3 None of these
4 No
5 Browser
6 JavaScript
7 Yes

4 プロジェクトのルートに作成された.eslintrc.jsの内容を書き換える
下記のように書き換えてください

module.exports = {
  extends: ["plugin:tailwindcss/recommended"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
    {
      files: ["*.html", "*.blade.php"],
      parser: "@angular-eslint/template-parser",
    },
  ],
};

5 ファイル保存時にeslintのformatがされるように設定する

1 VSCode上でcommand + shift + pでコマンドパレットを開く
2 「>settings]と検索し 「基本設定: ユーザー設定を開く(JSON)」
3 下記の設定を加える

{
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true 
  }
}

6 一応reload

1 VSCode上でcommand + shift + pでコマンドパレットを開く
2 >reloadで検索しウィンドウをreload

ここまでで設定完了です
index.htmlに下記を入力すると波線が引かれます

<p class="p-6 mt-6">あいうえお</p>

保存すると下記のように並び順が整理されます

<p class="mt-6 p-6">あいうえお</p>

参考