يسهل تثبيت Tailwind CSS واستخدامه مع Next.js ، فقط تأكد من إعداده بشكل صحيح أولاً.
إذا كنت ترغب في تصميم تطبيقاتك باستخدام إطار عمل سريع ومرن وموثوق ، فإن Tailwind CSS تعد خيارًا رائعًا. Tailwind هو إطار عمل CSS يساعدك على تصميم مكونات ويب مخصصة. يمكنك تصميم المكونات دون الحاجة إلى التبديل بين ملفات HTML و CSS.
على عكس Bootstrap ، لا تحتوي Tailwind على فئات محددة مسبقًا. بدلاً من ذلك ، يمكنك تخصيص ما يخصك. باستخدام Tailwind ، يمكنك إنشاء مكونات معقدة باستخدام أدوات مساعدة ووظائف وتوجيهات بدائية.
تعرف على كيفية تثبيت Tailwind واستخدامه لإنشاء واجهات مستخدم مذهلة في مشاريع Next.js.
ثبّت Tailwind CSS في Next.js
ابدأ بتثبيت Tailwind في تطبيق Next.js. العملية تشبه تثبيت Tailwind في تطبيق React، مع اختلاف بسيط في عملية التكوين.
اذهب إلى تثبيت Tailwind CSS صفحة. ثم انتقل إلى أدلة الإطار قسم وحدد Next.js. يحتوي هذا القسم على جميع الإرشادات التي تحتاجها لإعداد Tailwind في مشروع Next.js.
لتثبيت Tailwind عبر ملفات npm ، مدير حزم JavaScript، قم بتشغيل هذين الأمرين الطرفيين:
تثبيت npm -D tailwindcss postcss autoprefixer
npx tailwindcss init -pتنشئ هذه الأوامر ملفي تكوين باسم Tailwind.config.js و postcss.config.js في مجلد المشروع الجذر. تشير هذه الملفات إلى أنه تم تثبيت TailwindCSS بنجاح. يمكنك أيضًا تثبيت Tailwind CSS من خلال Tailwind CLI أو كمكوِّن إضافي لـ PostCSS.
تكوين القوالب
بعد التثبيت ، يجب عليك تكوين مسارات القالب المتوفرة في دليل التثبيت لملف تكوين التطبيق الخاص بك. أضف التعليمات البرمجية التالية إلى ملف ملف tailwind.config.js:
/** @يكتب {import ('tailwindcss'). Config}*/
وحدة.exports = {
محتوى: [
"./app/**/*.{js، ts، jsx، tsx}",
"./pages/**/*.{js، ts، jsx، tsx}",
"./components/**/*.{js، ts، jsx، tsx}",
// أو إذا كنت تستخدم دليل `src`:
"./src/**/*.{js، ts، jsx، tsx}",
],
سمة: {
يمتد: {}،
},
المكونات الإضافية: [] ،
}
أضف توجيه Tailwind إلى التطبيق
بعد ذلك ، أضف توجيهات Tailwind التالية إلى ملف App CSS. هذا هو الملف المسمى global.css. يجب حذف محتويات ملف global.css وإضافة توجيهات Tailwind.
tilwind قاعدة ؛مكوناتtailwind ؛
tailwind المرافق ؛
قم بتشغيل عملية البناء
الآن ، على الجهاز الطرفي ، قم بتشغيل أداة CLI باستخدام الأمر التالي:
npm تشغيل devيقوم هذا الأمر بمسح ملفات القالب الخاصة بك بحثًا عن فئات ويبني CSS الخاص بك. سيفتح لك منفذًا لعرض المتصفح.
الآن ، إذا انتقلت إلى الخادم على http://localhost: 3000 سترى تطبيقك. يجب أن تلاحظ تغييرًا طفيفًا في المحتوى. يشير هذا إلى أن عملية التثبيت ناجحة ، وأن Tailwind CSS قيد التشغيل.
استخدم Tailwind في المشروع
بعد ذلك ، دعنا نختبر ميزات Tailwind CSS من خلال تطبيق فئات على مشروعك. على سبيل المثال ، لديك تطبيق يحتوي على النص "Hello Tailwind". تريد أن تمنحه لونًا أحمر مع خلفية زرقاء فاتحة.
إنشاء Home.tsx file ثم أضف الكود التالي:
يصدّرتقصيروظيفةبيت() {
يعود (
"bg-blue-300">
"text-red-900"> مرحبًا Tailwind CSS </h1>
</body>
);
}
الآن ، عندما تنتقل إلى المتصفح ، سترى النص قد تغير إلى اللون الأحمر ، والخلفية زرقاء.
يمكنك استكشاف ميزات Tailwind CSS الأخرى لتصميم المكونات الأخرى لتطبيقك. تسمح لك المعدلات الشرطية بإنشاء حالات تفاعلية مثل التمرير والتركيز. يمكنك أيضًا تخصيص صفحاتك للأوضاع الداكنة والفاتحة وفقًا لتفضيلات المستخدم.
مزايا استخدام Tailwind CSS
تختلف Tailwind CSS التي أنشأها Adam Wathan في عام 2017 عن مكتبات CSS الأخرى من نواحٍ عديدة. ليس لديها وقت تشغيل ، مما يجعلها سريعة البرق. وهو سهل التركيب. تفحص Tailwind جميع ملفات HTML ومكونات JavaScript بحثًا عن أسماء الفئات في تطبيقك. ثم يولد الأنماط المقابلة التي تصمم العناصر.
يتيح لك Tailwind CSS تصميم مكونات معقدة من أدوات مساعدة بدائية. يمكنك إعادة استخدام الأنماط عبر المكونات واستخدام المعدِّلات لتصميم واجهات مستخدم متجاوبة. استخدم الخطوات هنا لمعرفة كيفية تثبيت واستخدام Tailwind CSS لتخصيص التطبيقات التي تتناسب مع علامتك التجارية.
