القائمة
Configuring and structuring styling components with utility-first CSS classes in HTML or JSX.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Lord1Egypt/ai-skillforge --skill tailwind-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | tailwind-design |
| description | Configuring and structuring styling components with utility-first CSS classes in HTML or JSX. |
| allowed-tools | Read Write Edit Bash |
| license | MIT license |
| metadata | {"skill-author":"Lord1Egypt"} |
Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design.
Use to construct highly responsive, modern dark-themed web page components visually.
<!-- A beautiful card designed with Tailwind -->
<div class="max-w-md mx-auto bg-slate-900 border border-slate-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl p-6">
<div class="uppercase tracking-wide text-sm text-indigo-400 font-semibold">Metadata</div>
<p class="mt-2 text-slate-300">This is a sleek dark layout card styled with Tailwind CSS variables.</p>
<button class="mt-4 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition">Action</button>
</div>
Customize tailwind.config.js files, apply custom color palettes, and handle dynamic dark mode transitions.