今すぐTailwindでの開発を楽にするお手軽2ステップ

①Tailwind CSS IntelliSenseを入れて、素早い補完を手に入れる

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
VSCodeプラグイン。ただ入れるだけでも補完はされるが、補完のタイミングが遅い。下記の設定をsetting.jsonに記述することで常に候補を出してくれるようになる。

"editor.quickSuggestions": {
  "strings": true
}

文字を入力する前から補完が始まる

②eslint-plugin-tailwindcssを適用して、ソートしてもらう

https://github.com/francoismassart/eslint-plugin-tailwindcss
Tailwindはメンテナンスが辛いが、ソートされているとだいぶ見直しやすくなる。このプラグインを入れてオススメ設定を書いておくだけで、ソート含むもろもろの「いい感じ」が手に入る。

{
  "plugins": ["tailwindcss"]
   "extends": [
   "plugin:tailwindcss/recommended"
  ]
}

さらにファイル保存時に自動でソートするVSCode設定を書いておくと、常にきれいな順番で保つことができる。

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },

ソートされてもあまり意味のまとまりになっていないのはご愛嬌