特徴
（１）いわゆる「モバイルファースト」のCSS。モバイルサイトに関するCSSを最初に記載して、その後にタブレットやPC用のサイトのCSSを追加で記載するスタイル。
NEXT.jsとかなら開発環境を構築するときに一緒にインストールできますが、後から追加することも可能。
ターミナルで以下のようにしましょう。
npm install -D tailwindcssVSCで補完機能が効かない時は
tailwind.cssはコード名が長いので補完機能は必須！
だけど、VSCで新規で開発環境を使った時に、tailwind.cssの補完機能が効かない時があります。
補完機能用のパッケージを入れているのになぜ？と思ってたら、どうもこのパッケージ、新規で開発環境を作ると、「再起動待ち」状態になるらしい…。
結論としてはパッケージを再起動すると補完機能が復活します。
コンポーネントなどでCSS自体が効かない時は
tailwind.config.tsの「content」の部分を確認。
content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./features/**/*.{js,ts,jsx,tsx,mdx}"],こんな感じの記載がる。
独自のディレクトリはここに反映されないので、それが原因でCSSが効かないことがある。
独自のディレクトリ構造をここに追加するとCSSが効きます。
コメント