【検証】Astro × Tailwind CSS v3.4 で「postcss-import: Unknown word 'use strict'」が出る原因と対処法

概要

Astro プロジェクトに Tailwind CSS を導入した際、postcss-import: Unknown word "use strict" というエラーが発生。Tailwind v3.4 以降のPostCSS構成変更とAstroのESM環境の互換性問題によるものだった。

環境

• Astro: v5.14.1
• Tailwind CSS: v3.4.13
• Node: v22.x
• Package type: "type": "module"

発生したエラー

[postcss] postcss-import: /node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"

または以下の補足エラー

An error occurred.
It looks like you're trying to use tailwindcss directly as a PostCSS plugin.

---

原因

Tailwind CSS v3.4 以降では内部構成が変更され、PostCSSプラグインとして直接読み込む形式が非推奨になった。
Astro のビルドパイプラインでは postcss-import が tailwindcss/lib/index.js を誤って「CSSファイル」としてパースしようとし、"use strict" を未知の単語として解釈してしまう。

さらにAstro の ESM 環境では require が使用できないため、

ReferenceError: require is not defined

という二重エラーも発生する。

解決策①TailwindをCLI経由でビルドする

PostCSS経由ではなくCLIで明示的にCSSを生成

npx tailwindcss -i ./src/styles/global.css -o ./public/tailwind.css --minify

解決策②ESM対応の Tailwind 設定に書き換える

/** @type {import('tailwindcss').Config} */
import typography from "@tailwindcss/typography";

export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,ts,tsx,vue,svelte}",
    "./public/**/*.html",
  ],
  theme: { extend: {} },
  plugins: [typography],
};

解決策③postcss.config.js を最小構成に

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

結果

Tailwind CSS の CLI ビルドが正常に完了し、Astro 上で Markdown（@tailwindcss/typography）の装飾も正しく表示されるようになった。

まとめ

エラー	原因	解決法
Unknown word “use strict”	TailwindをPostCSS経由で読み込んだ	CLIビルドに変更
require is not defined	AstroがESM構文を要求	import/export構文に修正
No utility classes detected	content指定漏れ	.astro 等を明記

まとめ

• tailwind.config.js は import/export 構文に統一
• CLIでCSSを生成 (npx tailwindcss ...)
• content に .astro / .tsx など必要な拡張子を指定
• @tailwindcss/typography を有効化