Next.js で動作しない Tailwind CSS を修正する方法

Tailwind CSS が Next.js プロジェクトにスタイルを適用しないという問題が発生した場合、このガイドでは問題を解決する方法について説明します。インストール、トラブルシューティング、修正の可能性について、段階的に説明していきます。

ステップ 1: .next フォルダー、node_modules、および package-lock.json を削除する

開始する前に、インストール後でも Tailwind CSS が適切に動作しない場合は、クリーン セットアップで問題が解決される可能性があります。

次のファイルとフォルダーを削除します。

• 次のフォルダー (Next.js ビルド ファイルを保存します)
• node_modules フォルダー (プロジェクトの依存関係を保存します)
• package-lock.json ファイル (一貫したインストールを保証します) rm -rf .next node_modules package-lock.json ### ステップ 2: 依存関係を再インストールする 上記のファイルを削除したら、クリーン インストールを確実に行うために、プロジェクトの依存関係を再インストールする必要があります。

次のコマンドを実行して、node_modules を再インストールし、package-lock.json を再生成します。

npm インストール
npm run dev

ステップ 3: Tailwind CSS セットアップを確認する

次の手順に従って、Tailwind CSS が正しくインストールされていることを確認してください

Tailwind CSS をインストールします。

npm install -D tailwindcss postcss autoprefixer
Tailwind を初期化します:

npx tailwindcss init -p
これにより、tailwind.config.js および postcss.config.js ファイルが作成されます。

tailwind.config.js を構成します: プロジェクト ファイルが含まれるようにコンテンツ パスが正しく設定されていることを確認します:

tailwind.config.js に追加します。

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.jsを追加

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Tailwind を CSS に追加します: globals.css ファイル (通常はスタイル内にあります) に次の内容を追加します。

css global.css またはindex.css で使用

@tailwind base;
@tailwind components;
@tailwind utilities;

ステップ 4: 一般的な問題と修正

• 上記の手順を実行した後でも、まだ問題が発生する可能性があります。一般的な問題と解決策は次のとおりです:

• PurgeCSS の問題: PurgeCSS が運用ビルド中にスタイルを削除していないことを確認してください。 tailwind.config.js で正しいパスを確認してください。

• 競合する CSS を確認する: 他の CSS フレームワークまたはカスタム スタイルを使用している場合は、Tailwind と競合する可能性があります。スタイルのオーバーライドをチェックして、Tailwind が適切に読み込まれていることを確認してください。

• 開発モード: Tailwind スタイルが更新されない場合は、ブラウザのキャッシュをクリアするか、開発サーバーを再起動してみてください。

以上がNext.js で動作しない Tailwind CSS を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。