الواجهات والتصميم

DaisyUI Tailwind Components

سرّع تطوير الواجهات مع DaisyUI، بتضيف فئات مكونات دلالية وثيمات مدمجة لـ Tailwind CSS.

Claude Code Cursor Copilot Windsurf Gemini CLI

نظرة عامة

DaisyUI هي أشهر مكتبة مكونات لـ Tailwind CSS، تضيف أسماء فئات دلالية مثل btn و card و modal و navbar فوق فئات Tailwind المساعدة. يمكن لعملاء الذكاء الاصطناعي بناء صفحات كاملة بسرعة باستخدام فئات DaisyUI، والتبديل بين أكثر من 35 ثيمًا مدمجًا، وتخصيص المكونات بدون كتابة CSS مخصص.

على عكس مكتبات مكونات JavaScript، فإن DaisyUI هي CSS فقط. تعمل مع أي إطار عمل (React، Vue، Svelte، Astro، HTML عادي) ولا تضيف أي JavaScript لحزمتك. يمكن لعميل الذكاء الاصطناعي دمج فئات مكونات DaisyUI مع أدوات Tailwind للنمذجة السريعة، ثم ضبط التصميم حسب الحاجة.

توفر المكتبة نظام ثيمات حيث تتكيف جميع الألوان تلقائيًا عند تبديل الثيمات. يمكن لعملاء الذكاء الاصطناعي المساعدة في إنشاء ثيمات مخصصة، وتنفيذ تبديل الثيمات، وتخصيص أحجام ومتغيرات المكونات، وبناء تخطيطات متجاوبة باستخدام مكونات الشبكة والتخطيط في DaisyUI.

لمن هذه الأداة؟

مطورين عايزين إنتاجية Tailwind مع تجريدات على مستوى المكونات
فرق بتعمل نمذجة سريعة لواجهات لازم تبان حلوة فوراً
مطورين full-stack بيبنوا لوحات تحكم وداشبوردات بسرعة
مطورين عايزين ثيمات مدمجة مع دعم الوضع الداكن

التثبيت

إعداد Claude Code

npm install -D daisyui@latest

الإعدادات

// tailwind.config.ts
import daisyui from "daisyui";
export default {
  plugins: [daisyui],
  daisyui: {
    themes: ["light", "dark", "cupcake", "business"],
    darkTheme: "dark",
  },
};

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor