HTML + Tailwind CSS開発おすすめのVSCode拡張機能
公開日:2022年7月31日 更新日:2022年8月5日
1. 記事概要
Tailwind CSS開発にあたって必要なVisual Studio Code(以下、VS Code)の拡張機能(プラグイン)をまとめた記事です。これからTailwind CSSをVS Codeで開発する方のお役に立てれば幸いです。
2. VSCode拡張機能
Tailwind CSS IntelliSense
Tailwind CSSに必須の拡張機能です。
Tailwind CSSのClass名を自動で補完できるようになります。
PostCSS Language Support
Tailwind CSSに必須の拡張機能です。
@tailwind、@apply、@screenのようなカスタムCSSを使おうとすると、VSCodeでエラーが発生します。その問題解決としてこの拡張機能をインストールします。
Japanese Language Pack for VS Code
VSCodeメニューなどを日本語化する拡張機能です。
Auto Rename Tag
HTMLの開始タグを修正すると閉じタグも修正できるようになります。
indent-rainbow
インデントごとに違う色がついてインデントが見やすくなります。
IntelliSense for CSS class names in HTML
CSSファイルにあるクラス定義からHTMLのクラスを入力する際に、自動補完してくれる拡張機能です。
Live Server
ライブリロード(ホットリロード)が利用できるようになります。
ライブリロードとは、ファイル修正を素早くブラウザに反映する機能です。
material-icon-theme
ファイルの種類に応じてアイコンを設定してくれます。
例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。

Path Intellisense
ファイルパスを自動で補完してくれる拡張機能です。
imgタグのsrcでファイルを探す時にファイルを自動検索できるようになります。
Prettier - Code formatter
HTMLコードなどをきれいにFormat(コード整形)できるようになります。
インストール後、VSCodeに以下設定します。
- 保存時にコード自動整形するように設定する
- で検索する。
- ONにする

- Default FormatterをPrettierに設定する
- で検索する。
- ONにする
