Tailwind CSS 日本語ドキュメントサイト
  1. Getting Started
  2. 開発ツール設定

構文サポート

Tailwind CSS は @tailwind、 @apply、 @config のような規則がたくさんあります、多くの開発ツールはこれらの規則を識別できないため、警告やエラーになることがあります。

これを解決するには、通常の CSS ではなく、PostCSS 言語をサポートするプラグインを開発ツール（editor/IDE）にインストール必要です。

VS Code を使う場合は、公式 Tailwind CSS IntelliSense プラグインは Tailwind が使っているすべてのアットルールと関数をサポートします。

CSS 構文のチェックが非常に厳しい場合、ネイティブCSSのチェック機能を無効にする必要かもしれません。

IntelliSense for VS Code

VS Code 用の公式 Tailwind CSS IntelliSense 拡張機能は自動補完や構文のハイライトとチェックなど機能を提供して Tailwind の開発体験を向上します。

Tailwind CSS IntelliSense extension for Visual Studio Code
  • Autocomplete. カラス名、及び CSS functions and directivesに対する自動提示。
  • Linting. CSS とマックアップにあるエラーや潜在的なバグをハイライトする。
  • Hover Previews. Tailwindのクラス名にカーソルを合わせることで、完全なCSSを確認できます。
  • Syntax Highlighting. 構文定義を提供し、Tailwind 機能を正しくハイライトできます。

詳しくは GitHub をチェックしましょう。或いは Visual Studio Code に追加して 開発を始めましょう。

Prettier でクラス名を自動ソート

我々は Tailwind CSS のクラスを自動的に定義されたソート順 でソートする公式 Prettier plugin を提供しています。

このプラグインは Tailwind 設定ファイルのカスタマイズもサポートします。 なお、これは普通の Prettier プラグインだから、流行っているエディターやIDEなど全部動きます、もちろんコマンドラインでも動きます。

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

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

詳しくは GitHub をチェックしましょう。

JetBrains IDEs

WebStorm、PhpStorm など JetBrains IDE は @apply を使う場合、自動補完をサポートします。

JetBrains IDE の Tailwind CSS サポートの詳細情報 →