كيفية استخدام Tailwind لتصميم موضوع Discourse

مطور
1

في البداية، اعتقدت أنني سأضطر إلى استبدال قوالب كاملة لإضافة فئات الأدوات المساعدة لـ Tailwind إلى HTML. قيل لي إن استبدال قوالب Discourse بالكامل فكرة سيئة. لحسن الحظ، تسمح لك Tailwind أيضًا بتطبيق CSS الخاص بها على أسماء فئات عشوائية.

شيء مثل ما يلي ممكن…

@layer components {
  .d-header {
    @apply bg-blue-100;
  }

  #main-outlet.wrap {
    @apply bg-yellow-200;
  }
}

…وهذا خبر سار. لذلك قمت بإعداد سمة جديدة باستخدام أداة سطر الأوامر discourse_theme. قمت بإنشاء ملف tailwind-input.css وطلبت من Tailwind استهلاكه وإنشاء ملف common/common.scss منه.

ولكن بعد ذلك اشتكى Sass. قال

✘ خطأ في common scss: خطأ: الدالة rgb تفتقد الوسيط $green.
        في السطر 477 من common.scss
>   background-color: rgb(239 246 255 / var(--tw-bg-opacity));

على ما يبدو، لا يُفترض بك تغذية CSS الذي تم إنشاؤه بواسطة Tailwind في ملف Sass. الحل الموصى به هو تكوين تطبيق Rails الخاص بك باستخدام هذا

config.assets.css_compressor = nil

أنا لا أعرف Rails أو كيفية تكوين الواجهة الخلفية لـ Discourse، وأنا أستخدم استضافة مُدارة، لذلك لا أعرف ما إذا كان هذا حلاً ممكناً بالنسبة لي.

لذلك واصلت البحث عن حل آخر، واكتشفت أنه يمكنني إخبار Tailwind بعدم استخدام صيغة rgb الإشكالية هذه.

لذلك هذا ما اخترته في الوقت الحالي، ويبدو أن الأمور تعمل حتى الآن… ولكن هذا يبدو وكأنه حل مؤقت أكثر من كونه حلاً مناسباً…

الحل الجيد هو تزويد سمة Discourse بملف CSS عادي، مثل common.css بدلاً من common.scss. حاولت ذلك ولكن Discourse تجاهل ملف CSS الخاص بي.

هل من الممكن إخبار Discourse باستخدام ملف CSS هذا بدلاً من ملف Sass؟ أو هل هناك حل جيد آخر لهذه المشكلة؟

7 إعجابات
2

رفع هذا الموضوع. نحن نستخدم Tailwind لتحقيق الاتساق عبر مواقع ويب متعددة. أتفق مع @mksafi في أن الحل المثالي سيكون تضمين CSS المُنشأ مع سمة Discourse.

كيف يمكننا تضمين CSS عادي يتجاوز المعالجة المسبقة؟

شكرا،
أندرياس

6 إعجابات
3

يمكن العثور على النهج الذي اتبعته في هذا المستودع: GitHub - neo4j-contrib/discourse-theme-neo4j

النقاط الأساسية المتعلقة بـ Tailwind:

  • يقوم هدف NPM منفصل ببناء tailwind باستخدام postcss: \"tailwind:dev\": \"postcss tailwind/global.scss -o assets/tailwind.css
  • يتم وضع مخرج CSS في assets ليتم تضمينه مع السمة. لاحظ أن about.json يتضمن موقع الأصل.
  • لا تشير Discourse SCSS مباشرة إلى هذا الـ CSS المنتج
  • بدلاً من ذلك، يوجد مُهيئ جافاسكريبت في javascripts/discourse/initializers/tailwind-init.js.es6 والذي يلحق الأصل بنهاية عنصر discourse-assets-stylesheets كعنصر link جديد
  • هام: تم تعطيل الفحص المسبق لـ Tailwind في tailwind.config.js، لأنه سيؤدي بخلاف ذلك إلى إعادة تعيين كل الـ CSS السابق. بدلاً من ذلك، أريد إضافة فئات Tailwind والاعتماد على الفحص المسبق الخاص بـ Discourse.

ليس أنيقًا، ولكنه يعمل معنا. استخدمه للإلهام الخاص بك. :slight_smile:

مع خالص التقدير،
أندرياس

4 إعجابات
4

هذا مثير للاهتمام. أنا فضولي بشأن نوع النتائج المرئية التي تحصل عليها عند إقران فئات Tailwind فوق ما أعلنته Discourse بالفعل في ملفات scss الخاصة بها.

هل تمر سطرًا بسطر في الفاحص وتعيد تنسيق العديد من عناصر النواة لاستخدام فئات Tailwind؟

هل تستخدم هذا فقط للإضافات الجديدة مثل مكونات السمات أو المكونات الإضافية؟

أود أن أرى مثالًا مباشرًا لهذا قيد التنفيذ.

4 إعجابات
5

لقد بدأنا في تبني Tailwind عبر مؤسستنا - من مواقع الويب إلى التطبيقات - لذا فإن الهدف الأولي هو استخدام Tailwind لتطبيق ألوان وخطوط العلامة التجارية من تعريف مشترك. سنستخدمه بعد ذلك للمكونات المخصصة مثل الرؤوس، والتنقل، والأبطال. هذا عمل كنت قد بدأته، وأنا ألتقطه الآن مرة أخرى.

هذا المظهر متاح على موقعنا، مع منشور نموذجي على Neo4j Discourse 2021 Theme - General - Neo4j Online Community

إذا كان الأمر مثيرًا للاهتمام، فسأقوم بنشر تحديثات عندما نصبح أكثر طموحًا.

7 إعجابات
7

أهلاً @abk،

نحن مهتمون بالتأكيد. نتطلع لمعرفة كيف تقدمت :slight_smile:

إعجابَين (2)
8

أنا أبحث عن مدخلات هنا حيث نرغب في تغيير السمة الافتراضية لـ Discourse إلى Tailwind CSS. أنا لست مطورًا متمرسًا، لذا أحاول فهم ما يتطلبه الأمر لإنجاز ذلك، بما في ذلك دمج Tailwind في مثيل Discourse والتخصيص حسب احتياجاتنا. لدينا مطورنا الخاص الذي يمكنه تخصيص Tailwind CSS حسب الحاجة، ولكنه غير مألوف بدمجه في Discourse. بالإضافة إلى ذلك، لم نتمكن من العثور على كل HTML المستخدم لسمة Discourse الافتراضية، ونفترض أيضًا أن ذلك سيكون نقطة البداية للتخصيص. أي إرشادات أو توجيهات حول كيفية التنقل في هذا ستكون موضع تقدير كبير. شكراً لمساعدتكم ودعمكم.

إعجاب واحد (1)