【Tailwind和訳】GETTING STARTED/Editor Support
この記事について
この記事は、GETTING STARTED/Editor Supportの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
エディタサポート
Tailwind CSS を使用する際に、開発者の経験を向上させることができるプラグインと構成設定。
構文サポート
Tailwind CSS では、@tailwind、@apply、@screen などのカスタム CSS アットルールを多く使用しており、多くのエディタではこれらのルールが認識されずに警告やエラーが発生することがあります。
この問題を解決するには、ほとんどの場合、通常の CSS の代わりに PostCSS 言語サポートのためのエディタ/IDE 用プラグインをインストールする必要があります。例えば、VS Code には PostCSS Language Support プラグインがあり、Tailwind CSS との相性は抜群です。
場合によっては、お使いのエディタが CSS ファイルに期待する構文に非常に厳しい場合、ネイティブの CSS リンティング/検証を無効にする必要があるかもしれません。
VS コードのインテリセンス
Visual Studio Code 用の公式Tailwind CSS IntelliSenseエクステンションは、オートコンプリート、シンタックスハイライト、リンティングなどの高度な機能をユーザーに提供することで、Tailwind の開発環境を強化します。
- オートコンプリート。クラス名、CSS 関数やディレクティブをインテリジェントに提案します。
- リンティング。CSS とマークアップの両方で、エラーや潜在的なバグをハイライトします。
- ホバープレビュー。Tailwind のクラス名の上にカーソルを置くと、そのクラスの完全な CSS を見ることができます。
- シンタックスハイライティング。構文の定義を提供し、Tailwind の機能が正しくハイライトされるようにします。
詳しくは GitHub でプロジェクトをチェックするか、Visual Studio Code に追加して今すぐ始められます。
JetBrains の IDE
WebStorm や PhpStorm などの JetBrains の IDE は、HTML や@apply の使用時にインテリジェントな Tailwind の CSS 補完をサポートしています。
Discussion