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

Tailwind CSS Custom Plugins

وسّع Tailwind CSS بإضافات مخصصة عشان تضيف أدوات ومكونات ومتغيرات وأساسيات نظام تصميم جديدة.

Claude Code Cursor Copilot Windsurf

نظرة عامة

تتيح إضافات Tailwind CSS توسيع الإطار بأدوات مساعدة ومكونات وأنماط أساسية ومتغيرات مخصصة. يمكن لعملاء الذكاء الاصطناعي كتابة إضافات تضيف فئات أدوات جديدة، وتسجل متغيرات مخصصة، وتنشئ اختصارات مكونات، وتتكامل مع رموز نظام التصميم الخاص بك.

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

الإضافات هي الطريقة الموصى بها لمشاركة امتدادات Tailwind عبر المشاريع أو الفرق. يمكن لعملاء الذكاء الاصطناعي المساعدة في بناء إضافات تستهلك رموز التصميم الخاصة بك، وإنشاء أنظمة مكونات مبنية على المتغيرات (مشابهة لـ CVA)، وتنفيذ نقاط توقف مخصصة للشاشة، وإضافة دعم لميزات مثل @starting-style أو استعلامات الحاوية قبل وصول الدعم الرسمي.

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

فرق بتعمل امتدادات Tailwind خاصة بالمؤسسة
مطورين بيضيفوا أدوات مخصصة زي ظل النص والتدرجات
مهندسي أنظمة تصميم بيغلفوا أنماط المكونات كإضافات
فرق frontend بتشارك تكوينات Tailwind قابلة لإعادة الاستخدام عبر المشاريع

التثبيت

إعداد Claude Code

إضافات Tailwind بتتكتب مباشرة في tailwind.config.ts

الإعدادات

// tailwind.config.ts
import plugin from "tailwindcss/plugin";

export default {
  plugins: [
    plugin(function ({ addUtilities, addVariant }) {
      addUtilities({
        ".text-shadow-sm": { textShadow: "0 1px 2px rgba(0,0,0,0.1)" },
        ".text-shadow-md": { textShadow: "0 2px 4px rgba(0,0,0,0.2)" },
      });
      addVariant("hocus", ["&:hover", "&:focus"]);
    }),
  ],
};

زيارة المصدر (المستندات الرسمية)

استكشف أدوات 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