Cara Membetulkan CSS Tailwind Tidak Berfungsi dalam Next.js

Jika anda menghadapi isu di mana Tailwind CSS tidak menggunakan gaya dalam projek Next.js anda, panduan ini akan membimbing anda tentang cara menyelesaikan isu tersebut. Kami akan pergi langkah demi langkah, meliputi pemasangan, penyelesaian masalah dan kemungkinan pembetulan.

Langkah 1: Padam .next Folder, node_modules dan package-lock.json

Sebelum bermula, jika Tailwind CSS tidak berfungsi dengan betul walaupun selepas pemasangan, persediaan yang bersih mungkin menyelesaikan isu ini.

Padamkan fail dan folder berikut:

• folder seterusnya (menyimpan fail binaan Next.js)
• folder node_modules (menyimpan kebergantungan projek)
• fail package-lock.json (memastikan pemasangan yang konsisten rm -rf .next node_modules package-lock.json ### Langkah 2: Pasang Semula Ketergantungan Setelah anda memadamkan fail di atas, anda perlu memasang semula kebergantungan projek untuk memastikan pemasangan yang bersih.

Jalankan arahan berikut untuk memasang semula node_modules dan menjana semula package-lock.json

pasang npm
npm run dev

Langkah 3: Sahkan Persediaan CSS Tailwind

Pastikan anda telah memasang Tailwind CSS dengan betul dengan mengikuti langkah ini

Pasang Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
Mulakan Tailwind:

npx tailwindcss init -p
Ini mencipta fail tailwind.config.js dan postcss.config.js.

Konfigurasikan tailwind.config.js anda: Pastikan laluan kandungan ditetapkan dengan betul untuk memasukkan fail projek anda:

Tambahkannya pada tailwind.config.js

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

Tambahkan postcss.config.js

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

Tambahkan Tailwind pada CSS anda: Dalam fail globals.css (biasanya terletak dalam gaya), tambahkan yang berikut:

css gunakan dalam global.css atau index.css

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

Langkah 4: Isu dan Pembetulan Biasa

• Walaupun selepas mengikuti langkah di atas, anda mungkin masih menghadapi masalah. Berikut ialah beberapa masalah dan pembetulan biasa:

• Isu PurgeCSS: Pastikan PurgeCSS tidak mengalih keluar gaya anda semasa pengeluaran dibuat. Semak tailwind.config.js anda untuk mendapatkan laluan yang betul.

• Semak CSS yang bercanggah: Jika anda menggunakan rangka kerja atau gaya tersuai CSS lain, ia mungkin bercanggah dengan Tailwind. Pastikan Tailwind dimuatkan dengan betul dengan menyemak penggantian gaya.

• Mod Pembangunan: Jika gaya Tailwind tidak dikemas kini, cuba kosongkan cache penyemak imbas anda atau mulakan semula pelayan pembangunan.

Atas ialah kandungan terperinci Cara Membetulkan CSS Tailwind Tidak Berfungsi dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!