Bagaimana untuk menyediakan os Next.js dengan CSS Tailwind

Untuk menyediakan Next.js dengan Tailwind CSS, ikut langkah berikut:

Langkah 1: Buat Projek Next.js Baharu

Jika anda belum lagi membuat projek Next.js, anda boleh menciptanya menggunakan create-next-app.

npx create-next-app@latest my-next-app
cd my-next-app

Langkah 2: Pasang Tailwind CSS

Di dalam projek Next.js anda, pasang Tailwind CSS bersama-sama kebergantungan yang diperlukannya.

npm install -D tailwindcss postcss autoprefixer

Langkah 3: Mulakan CSS Tailwind

Mulakan CSS Tailwind dengan menjana fail tailwind.config.js dan postcss.config.js.

npx tailwindcss init -p

Ini akan mencipta fail tailwind.config.js dan postcss.config.js dalam akar projek anda.

Langkah 4: Konfigurasikan tailwind.config.js

Ganti kandungan tailwind.config.js dengan konfigurasi berikut untuk mendayakan Tailwind dalam fail yang berkaitan:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Langkah 5: Tambahkan Tailwind CSS pada Fail CSS Anda

Dalam projek anda, buka atau cipta fail ./styles/globals.css dan tambah baris berikut untuk mengimport asas, komponen dan utiliti Tailwind:

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

Langkah 6: Jalankan Pelayan Pembangunan

Sekarang, mulakan pelayan pembangunan untuk melihat Tailwind CSS dalam tindakan:

npm run dev

Projek Next.js anda kini harus disediakan dengan CSS Tailwind. Anda boleh menggunakan kelas utiliti Tailwind dalam komponen anda untuk menggayakannya.

Contoh Penggunaan

Berikut ialah contoh menggunakan CSS Tailwind dalam halaman Next.js (pages/index.js):

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Welcome to Next.js with Tailwind CSS!
      </h1>
    </div>
  );
}

Dengan persediaan ini, anda kini boleh mula membina aplikasi Next.js anda menggunakan rangka kerja CSS yang mengutamakan utiliti Tailwind!

Atas ialah kandungan terperinci Bagaimana untuk menyediakan os Next.js dengan CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!