エディター設定

構文サポート

Tailwind CSS は `@theme`、`@variant`、`@source` のようなカスタム CSS 構文を使用しており、一部のエディターでは、これらのルールが認識されない場合に警告やエラーが発生する可能性があります。

VS Code を使用している場合、公式の Tailwind CSS IntelliSense プラグインには、Tailwind が使用するすべてのカスタム at-ルールと関数をサポートする専用の Tailwind CSS 言語モードが含まれています。

場合によっては、エディターが CSS ファイルに期待する構文に非常に厳密である場合、ネイティブ CSS linting/検証を無効にする必要があるかもしれません。

VS Code 用 IntelliSense

Visual Studio Code 用の公式 Tailwind CSS IntelliSense 拡張機能は、オートコンプリート、構文ハイライト、linting などの高度な機能を提供することにより、Tailwind 開発体験を向上させます。

• オートコンプリート — ユーティリティクラス、および CSS 関数とディレクティブ のインテリジェントな提案を提供します。
• Linting — CSS とマークアップの両方でエラーと潜在的なバグを強調表示します。
• ホバープレビュー — ユーティリティクラスにホバーすると、完全な CSS を表示します。
• 構文ハイライト — カスタム CSS 構文を使用する Tailwind の機能が正しくハイライトされるようにします。

詳細については、GitHub のプロジェクト を確認するか、Visual Studio Code に追加 して今すぐ始めましょう。

Prettier によるクラスのソート

私たちは、推奨されるクラス順 に従ってクラスを自動的にソートする Tailwind CSS 用の公式 Prettier プラグイン を管理しています。

カスタム Tailwind 設定とシームレスに連携し、Prettier プラグインであるため、すべての一般的なエディターと IDE、そしてもちろんコマンドラインなど、Prettier が動作する場所ならどこでも動作します。

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

詳細と開始方法については、GitHub のプラグイン を確認してください。

JetBrains IDE

WebStorm、PhpStorm などの JetBrains IDE は、HTML でのインテリジェントな Tailwind CSS 補完のサポートを含んでいます。

JetBrains IDE での Tailwind CSS サポートの詳細はこちら →