@hihoraaaaashposted at 2025-07-08

Post CSSを利用したTailwind CSSの導入、保管機能について

Q&A

解決したいこと

postcssを利用したTailwind　CSSについて質問です。
インストールまで完了して、使い始めたのですが保管機能が働いてくれません。
調べて有効そうなものは実践してるのですが解決できずこちらで質問させてもらいました。
以下関連拡張機能とディレクトリ構成、tailwind.config.js内のcontentを記載します。

拡張機能
・Tailwind CSS IntelliSense
・PostCSS Language Support(無効、有効どちらも試したが関連性なし。)

tailwind.config.js内のcontent
content: [
"./.{html,js,ts,jsx,tsx}",
"./**/.{html,js,ts,jsx,tsx}"
],

解決方法を教えて下さい。

発生している問題・エラー

Tailwind CSSの保管機能が動作しない。
VScode右下にTailwind CSSの表示が出ていない。

setting.jsonの中身

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "tailwindcss"
  },
  "tailwindCSS.emmetCompletions": true
}

index.htmlのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/output.css">
</head>
<body>
    <div class=""></div>
</body>
</html>

自分で試したこと

・Tailwind CSS IntelliSenseの再起動
・PostCSS Language Supportの起動有無の確認
・VScode再インストール
・setting.json(グローバル,プロジェクト両変更)

他に必要な情報あり増したらご提供いたします。
よろしくお願いします。

0 likes

2Answer

@shiraya-ma posted at 2025-07-08

tailwind.config.jsのcontentが少し気になりました。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
-    './*.html',
-    './**/*.html',
+    './*.html',
+    './**/*.html',
+    // 拡張子のドットの前にもアスタリスク
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

こちら修正してその場で補完が効くようにならないようであれば、
フォルダー/ワークスペースを開き直すなど必要かもしれないです。

0Like

Comments

@hihoraaaaash
Questioner
回答ありがとうございます。
ご提案通りに変更してフォルダー/ワークスペースを開きなおしてみましたがダメでした。
ご提案いただき感謝します。

@asip2k25 posted at 2025-07-23

保管→補完、ですね。。。

導入している Tailwind CSSのバージョンは
いくつになっていますか？

3系までは tailwind.config.js に
設定を記述しますが、
4系からは tailwind.config.js (
postCSS も)が不要となり、CSSに
(直接)設定を記述します。

Tailwind CSS IntelliSense、3系まで、
4系、のどちらもサポートしているよう
です。

VSCodeでCSSファイルを開いた際に右下？に
表示される言語モードをクリックすると、
言語モードの選択を行え、Tailwind CSSに
変更可能です。
(VSCodeで、言語モードは拡張子(ファイルタイプ)
毎に設定できます。)

html etc(CSS以外)を開いた際には、拡張子に
対応した言語モードとなります、これを変更する
必要はありません。

Tailwind CSSのバージョン及び設定に問題がない
のなら、(基本的には)期待する挙動になるはず。

期待する挙動にならないのなら、下記のリンクが
解決の参考になるかと思います。