التثبيت والإعداد

يتم تثبيت Tailwind بثلاثة أوامر فقط، ومع ذلك فهذه هي المرحلة التي يضيع فيها أكبر قدر من الوقت. السيناريو دائمًا هو نفسه: كل شيء يعمل أثناء التطوير، ثم تنشر المشروع فتختفي نصف الأنماط في بيئة الإنتاج. أو يبقى لون عرّفته في الإعدادات متجاهَلًا بإصرار. أو لا يقترح لك الإكمال التلقائي شيئًا، فتكتب text-grey-500 عشرين دقيقة قبل أن تدرك أن اسم اللوحة اللونية يُكتب gray.

هذه الأعراض الثلاثة لها الأصل نفسه: Tailwind لا يعرف إلا الفئات التي رآها مكتوبة بنصّها الصريح في ملفاتك المصدرية. فهو ليس محرّكًا يفسّر تطبيقك وقت التنفيذ، بل أداة تقرأ نصوصًا وقت الترجمة. وما دام هذا النموذج غير واضح، يبدو كل عطل أشبه بالسحر الأسود. وبمجرد أن يتضح، يمكن تشخيص ثلاثة أرباع مشكلات التثبيت في عشر ثوانٍ.

الإعداد في مشروع Vite

هذه هي الحالة الأكثر شيوعًا والأسرع، سواء كان مشروعك بـ React أو Vue أو Svelte أو Astro. حزمتان، وإضافة واحدة، وسطر CSS واحد.

npm install tailwindcss @tailwindcss/vite

صرّح بالإضافة في إعدادات Vite:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});