لإعداد Next.js مع Tailwind CSS، اتبع الخطوات التالية:

الخطوة 1: إنشاء مشروع Next.js جديد

إذا لم تكن قد أنشأت مشروع Next.js بالفعل، فيمكنك إنشاء مشروع باستخدام create-next-app.

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

الخطوة 2: تثبيت Tailwind CSS

داخل مشروع Next.js، قم بتثبيت Tailwind CSS مع التبعيات المطلوبة.

npm install -D tailwindcss postcss autoprefixer

الخطوة 3: تهيئة Tailwind CSS

قم بتهيئة Tailwind CSS عن طريق إنشاء ملفات tailwind.config.js وpostcss.config.js.

npx tailwindcss init -p

سيؤدي هذا إلى إنشاء ملفات tailwind.config.js وpostcss.config.js في جذر مشروعك.

الخطوة 4: قم بتكوين tailwind.config.js

استبدل محتوى tailwind.config.js بالتكوين التالي لتمكين Tailwind في الملفات ذات الصلة:

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

الخطوة 5: أضف Tailwind CSS إلى ملفات CSS الخاصة بك

في مشروعك، افتح أو أنشئ ملف ./styles/globals.css وأضف الأسطر التالية لاستيراد قاعدة Tailwind ومكوناته وأدواته المساعدة:

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

الخطوة 6: تشغيل خادم التطوير

الآن، ابدأ تشغيل خادم التطوير لرؤية Tailwind CSS أثناء العمل:

npm run dev

يجب الآن إعداد مشروع Next.js الخاص بك باستخدام Tailwind CSS. يمكنك استخدام فئات الأداة المساعدة Tailwind في مكوناتك لتصميمها.

مثال الاستخدام

إليك مثال لاستخدام Tailwind CSS في صفحة Next.js (pages/index.js):

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

بفضل هذا الإعداد، يمكنك الآن البدء في إنشاء تطبيق Next.js الخاص بك باستخدام إطار عمل CSS ذي الأداة المساعدة Tailwind!