Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyediakan os Next.js dengan CSS Tailwind
Untuk menyediakan Next.js dengan Tailwind CSS, ikut langkah berikut:
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
Di dalam projek Next.js anda, pasang Tailwind CSS bersama-sama kebergantungan yang diperlukannya.
npm install -D tailwindcss postcss autoprefixer
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.
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: [], }
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;
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.
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!