مشكلة في تضمين Tailwind CSS في لارافل

قد تكون المشكلة بسبب تداخل النسخ أو تكرارها , لاحظ تثبيتك لأكثر من حزمة في نفس الأمر : 

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^

لذلك تأكد أولا أن تقوم بإزالتها , إما عن طريق الأمر :

npm uninstall tailwindcss postcss autoprefixer

أو إزالة الأسطر الخاصة بالحزم المعنية من ملف package.json ثم تنفيذ الأمر : 

npm install

ثم الان نأتي لتثبيت tailwind على نحو صحيح :

1.  يكون أمر تثبيت الحزمة و الحزم المطلوبة على هذا النحو : 

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

قد لا تحتاج الخطوتين التاليتين كونك تقوم بإنشاء ملف إعداد tailwind على نحو صحيح . 

   2. قم بإنشاء ملف إعداد tailwind عن طريق طباعة الأمر : 

npx tailwindcss init

   3. قم بهيئة Tailwind لإزالة التنسيقات الغير المستخدمة في بيئة الإنتاج : 

 // tailwind.config.js
  module.exports = {
   purge: [],
   purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

   4. إعداد tailwind عن طريق webpack :

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
]);

   الان يمكنك استعمال tailwind و تضمينه في ملفات css المعنية . و يمكنك البناء عن طريق تشغيل الأمر : 

npm run build