كيفية دمج vite مع tailwind في مشروع عادي

بداية، قم بتثبيت tailwindcss وملحقاتها:

npm install -D tailwindcss postcss autoprefixer

قم بتكوين ملف اعداد tailwindcss:

npx tailwindcss init -p

قم بتوصيف امتدادات الملفات المراد التعامل معها في ملف tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

اضف موجهات tailwindcss الى ملف التنسيقات الرئيسي لديك:

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

قم بتضمين ملف التنسيقات بملف الجافاسكربت الرئيسي لديك:

import './css/style.css';

قد تحتاج كخطوة اضافية تضمين tailwindcss و autoprefixer ضمن اضافات postcss في ملف اعداد postcss.config.js:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

وأخيرا تشغيل الامر npm run dev والبدء في استعمال tailwindcss ضمن مشروعك.

في البداية عليك انشاء مشروع vite بمكنك استعمال المكتبة create-vite بالشكل التالي:

$ npm create vite@latest

من ثم نقوم بتهيئة المشروع و الانتقال إلى المجلد الخاص به بالشكل التالي:

npm init vite my-project
cd my-project

و من ثم يمكنك القيام بتنزيل tailwind و تهيئة ملفات الضبط الخاصة به بالشكل التالي:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p