تطوير Tailwind CSS في Cursor

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

مقدمة إلى Tailwind في Cursor

يفهم Cursor Tailwind CSS على مستوى عميق. يوفر المحرر إكمالًا تلقائيًا ذكيًا للفئات المساعدة، ويتعرف على التكوينات المخصصة، ويمكنه توليد ترميز مكونات كامل بناءً على أوصاف التصميم. يزيل هذا التكامل التبديل المستمر للسياق بين التوثيق والكود الذي يرافق تقليديًا تطوير Tailwind.

سير عمل Tailwind الرئيسي المعزز بـ Cursor يشمل:

• إكمال تلقائي للفئات المساعدة في الوقت الفعلي مع معاينات خصائص CSS
• ترميز مكونات مولدة بالذكاء الاصطناعي من أوصاف التصميم
• استخراج تلقائي للأنماط المتكررة إلى مكونات قابلة لإعادة الاستخدام
• تكوين سمة مخصص مع IntelliSense آمن من حيث النوع
• اقتراحات المتغيرات المتجاوبة والحالة

يفترض هذا الدليل أن لديك فهمًا أساسيًا لمفاهيم HTML و CSS. جميع الأمثلة تستخدم React مع TypeScript، على الرغم من أن المبادئ تنطبق على أي إطار يدعمه Tailwind.

إعداد Tailwind في مشروع Cursor الخاص بك

يضمن إعداد المشروع المناسب أن يتمكن Cursor من توفير النطاق الكامل لميزات Tailwind IntelliSense والذكاء الاصطناعي.

التثبيت والتكوين

قم بتهيئة مشروعك وتثبيت تبعيات Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

قم بتكوين tailwind.config.js الخاص بك بمسارات محتوى تتطابق مع هيكل مشروعك:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

أضف توجيهات Tailwind إلى ملف CSS العام الخاص بك:

@tailwind base;
@tailwind components;
@tailwind utilities;

عند فتح هذا التكوين في Cursor، يقوم المحرر فورًا بفهرسة جميع الفئات المساعدة المتاحة وقيم السمة المخصصة. يفهم الذكاء الاصطناعي مسارات المحتوى الخاصة بك ويمكنه اقتراح استخدام فئات محدد لهيكل مشروعك.

تلميح

قم بتثبيت إضافة Tailwind CSS IntelliSense إذا كانت متاحة في سوق إضافات Cursor. يوفر هذا معاينات خصائص CSS مضمنة عند التمرير فوق الفئات المساعدة، مما يسرع التطوير بشكل كبير.

تكامل TypeScript

للحصول على أفضل تجربة مع فحص الأنواع في Cursor، تأكد من أن تكوين TypeScript الخاص بك يتعرف على JSX وأنواع إطار العمل الخاص بك:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true
  }
}

يستخدم Cursor هذه الأنواع لتوفير إكمال تلقائي دقيق لخصائص المكونات إلى جانب اقتراحات فئات Tailwind.

إتقان الفئات المساعدة

الفئات المساعدة هي أساس Tailwind. تساعدك ميزات الإكمال التلقائي والذكاء الاصطناعي في Cursor على اكتشاف وتطبيق الفئات المساعدة المناسبة بكفاءة.

أنماط الفئات المساعدة الأساسية

ابدأ بفئات التخطيط المساعدة. يقترح Cursor الفئات المناسبة أثناء الكتابة، مع عرض معاينات CSS الناتج:

export function Card() {
  return (
    <div className="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md">
      <h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
        Card Title
      </h2>
      <p className="mb-4 text-base text-gray-700">
        This card demonstrates core Tailwind utility patterns.
      </p>
      <button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Action
      </button>
    </div>
  );
}

عند كتابة أسماء الفئات في Cursor، يقترح المحرر الإكمالات بترتيب منطقي: التخطيط، التباعد، التحجيم، الطباعة، الخلفيات، الحدود، التأثيرات، والتفاعلات. يعكس هذا الترتيب كيفية تنظيم توثيق Tailwind للفئات المساعدة.

التصميم المتجاوب مع بادئات نقاط التوقف

يتعرف Cursor على بادئات Tailwind المتجاوبة ويقترحها بشكل مناسب:

export function ResponsiveGrid() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <div className="rounded-lg bg-gray-100 p-4">Item 1</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 2</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 3</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 4</div>
    </div>
  );
}

يفهم الذكاء الاصطناعي منهجية الأولوية للجوال ويحذر إذا حاولت استخدام أنماط نقاط توقف الأولوية لسطح المكتب. كما يقترح نطاقات نقاط التوقف الصحيحة بناءً على إعدادات tailwind.config.js الخاصة بك.

متغيرات الحالة والتفاعلات

حالات التمرير والتركيز والنشاط ضرورية للعناصر التفاعلية. يوفر Cursor اقتراحات ذكية لمتغيرات الحالة:

export function InteractiveButton() {
  return (
    <button className="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 text-sm font-medium text-gray-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 group-hover:from-purple-600 group-hover:to-blue-500">
      <span className="relative rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
        Hover over me
      </span>
    </button>
  );
}

warning

تجنب الإفراط في استخدام القيم الاعتباطية مثل w-[123px] عندما توجد فئات مساعدة قياسية. يشير Cursor إلى أنماط القيم الاعتباطية الشائعة التي لها فئات مساعدة مدمجة مكافئة، مما يساعدك في الحفاظ على الاتساق مع نظام التصميم.

التكوين المخصص والتنسيق

كل مشروع يتطلب تخصيصًا يتجاوز إعدادات Tailwind الافتراضية. يساعدك Cursor في توسيع تكوين السمة مع الحفاظ على دعم IntelliSense الكامل.

توسيع الألوان والطباعة

افتح tailwind.config.js الخاص بك وحدد رموز التصميم المخصصة:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Cal Sans', 'Inter', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        'display-xl': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-lg': ['3.75rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
      },
    },
  },
  plugins: [],
};

بعد الحفظ، يقوم Cursor فورًا بفهرسة هذه القيم المخصصة. كتابة bg-brand- تظهر لوحة الألوان الكاملة الخاصة بك، ويظهر text-display-xl في اقتراحات حجم الخط.

الإضافات والمكونات المخصصة

لمكونات نظام التصميم، أنشئ إضافات Tailwind يتعرف عليها Cursor:

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ... other config
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.btn': {
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: theme('borderRadius.md'),
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          fontWeight: theme('fontWeight.medium'),
          transitionProperty: theme('transitionProperty.colors'),
          transitionDuration: theme('transitionDuration.150'),
        },
        '.btn-primary': {
          backgroundColor: theme('colors.brand.600'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.brand.700'),
          },
        },
      });
    }),
  ],
};

يتضمن الإكمال التلقائي في Cursor الآن btn و btn-primary كأسماء فئات صالحة، مع معاينات التمرير التي تظهر CSS المولد.

تلميح

استخدم الذكاء الاصطناعي في Cursor لتحويل ملفات CSS أو SCSS الموجودة إلى امتدادات تكوين Tailwind. حدد أنماطك القديمة واسأل: "حول هذه الأنماط إلى امتدادات سمة Tailwind وفئات مساعدة مخصصة."

أنماط استخراج المكونات

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

تحديد المرشحين للاستخراج

انظر إلى هذا المكون المليء بالفئات المساعدة المضمنة:

export function UserProfile() {
  return (
    <div className="flex items-center space-x-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
      <img
        className="h-12 w-12 rounded-full object-cover"
        src="/avatar.jpg"
        alt="User avatar"
      />
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
        <p className="text-sm text-gray-500">Software Engineer</p>
      </div>
      <button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
        Follow
      </button>
    </div>
  );
}

حدد هذا المكون في Cursor ووجه: "استخرج أنماط حاوية البطاقة إلى مكون Card قابل لإعادة الاستخدام مع متغيرات للحشو والظل." يولد الذكاء الاصطناعي:

// components/Card.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const cardVariants = cva('rounded-lg border border-gray-200 bg-white', {
  variants: {
    padding: {
      none: '',
      sm: 'p-3',
      md: 'p-4',
      lg: 'p-6',
    },
    shadow: {
      none: '',
      sm: 'shadow-sm',
      md: 'shadow-md',
      lg: 'shadow-lg',
    },
  },
  defaultVariants: {
    padding: 'md',
    shadow: 'sm',
  },
});

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {}

export function Card({
  className,
  padding,
  shadow,
  ...props
}: CardProps) {
  return (
    <div
      className={cn(cardVariants({ padding, shadow }), className)}
      {...props}
    />
  );
}

يصبح UserProfile المعاد هيكلته أنظف وأسهل في الصيانة:

export function UserProfile() {
  return (
    <Card className="flex items-center space-x-4">
      <img
        className="h-12 w-12 rounded-full object-cover"
        src="/avatar.jpg"
        alt="User avatar"
      />
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
        <p className="text-sm text-gray-500">Software Engineer</p>
      </div>
      <button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
        Follow
      </button>
    </Card>
  );
}

استخدام class-variance-authority

تتناغم مكتبة class-variance-authority بشكل استثنائي مع Tailwind و Cursor. توفر متغيرات مكونات آمنة من حيث النوع يدعمها IntelliSense في Cursor بالكامل.

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-brand-600 text-white hover:bg-brand-700',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
        outline: 'border border-gray-300 bg-transparent hover:bg-gray-50',
        ghost: 'hover:bg-gray-100',
        link: 'text-brand-600 underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-8 px-3 text-xs',
        lg: 'h-12 px-8 text-base',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({
  className,
  variant,
  size,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}

مع هذا الإعداد، يوفر Cursor إكمالًا تلقائيًا لخصائص variant و size مع خياراتها المتاحة، ويلتقط التركيبات غير الصالحة في وقت الترجمة.

اقتراحات الفئات بالذكاء الاصطناعي

واحدة من أقوى ميزات Cursor هي توليد ترميز Tailwind من أوصاف اللغة الطبيعية.

توليد المكونات من الأوصاف

صف ما تريد، ويقوم Cursor بتوليد الترميز:

الموجه:

Create a pricing card component with Tailwind classes. It should have:
- A highlighted "Pro" badge at the top
- A large price display with "/month"
- A list of 4 features with checkmarks
- A prominent CTA button
- A subtle hover lift effect

يقوم Cursor بتوليد:

export function PricingCard() {
  return (
    <div className="relative flex flex-col rounded-2xl border-2 border-brand-500 bg-white p-8 shadow-xl transition-transform duration-300 hover:-translate-y-1">
      <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-4 py-1 text-sm font-semibold text-white">
        Pro
      </div>
      <div className="mb-6 text-center">
        <span className="text-5xl font-bold text-gray-900">$29</span>
        <span className="text-lg text-gray-500">/month</span>
      </div>
      <ul className="mb-8 space-y-4">
        {[
          'Unlimited projects',
          'Priority support',
          'Advanced analytics',
          'Custom integrations',
        ].map((feature) => (
          <li key={feature} className="flex items-center text-gray-700">
            <svg className="mr-3 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
            </svg>
            {feature}
          </li>
        ))}
      </ul>
      <button className="mt-auto rounded-lg bg-brand-600 py-3 text-center font-semibold text-white transition-colors hover:bg-brand-700">
        Get Started
      </button>
    </div>
  );
}

تسرع هذه القدرة النمذجة الأولية بشكل كبير وتقلل من الحاجة إلى تصفح توثيق Tailwind.

إعادة هيكلة الأنماط المضمنة إلى Tailwind

عند ترحيل الكود القديم، حدد الأنماط المضمنة واطلب من Cursor: "حول هذه الأنماط المضمنة إلى فئات Tailwind المساعدة." يحافظ الذكاء الاصطناعي على المظهر المرئي مع إنتاج ترميز Tailwind اصطلاحي.

// Before
<div style={{ marginBottom: '24px', padding: '16px', backgroundColor: '#f3f4f6', borderRadius: '8px' }}>

// After
<div className="mb-6 rounded-lg bg-gray-100 p-4">

تلميح

للتصاميم المعقدة، الصق لقطة شاشة أو صف التسلسل الهرمي المرئي. يمكن لـ Cursor اقتراح التركيبة المناسبة من فئات flexbox و grid والتباعد لتحقيق التخطيط المطلوب.

الوضع الداكن والتنسيق

تتطلب التطبيقات الحديثة دعم الوضع الداكن. يساعد Cursor في تنفيذ وصيانة إعدادات السمات المتعددة.

تنفيذ الوضع الداكن

قم بتمكين الوضع الداكن في تكوين Tailwind الخاص بك:

module.exports = {
  darkMode: 'class',
  // ... rest of config
};

استخدم البادئة dark: للتنسيق المدرك للسمة:

export function ThemedCard() {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
      <h2 className="text-xl font-bold">Adaptive Content</h2>
      <p className="mt-2 text-gray-600 dark:text-gray-300">
        This card automatically adjusts to the current theme.
      </p>
    </div>
  );
}

يقترح Cursor متغيرات dark: إلى جانب الفئات المساعدة القياسية ويحذر إذا كانت نسب التباين الحرجة قد تفشل في سمة واحدة.

الخاتمة

يمثل تطوير Tailwind CSS في Cursor قفزة كبيرة في الإنتاجية لمطوري الواجهة الأمامية. مزيج التنسيج القائم على الأولوية المساعدة والمساعدة المدعومة بالذكاء الاصطناعي يزيل الاحتكاك من عملية تنفيذ التصميم.

النقاط الرئيسية من هذا الدليل:

• قم بتكوين Tailwind بشكل صحيح حتى يتمكن Cursor من فهرسة قيم السمة المخصصة الخاصة بك
• استخدم الإكمال التلقائي في Cursor لاكتشاف الفئات المساعدة دون مغادرة المحرر
• استخرج الأنماط المتكررة إلى مكونات آمنة من حيث النوع باستخدام class-variance-authority
• استفد من توليد الذكاء الاصطناعي للنمذجة الأولية السريعة من أوصاف اللغة الطبيعية
• حافظ على تنسيق متسق مع الوضع الداكن ورموز التصميم المخصصة
• دع Cursor يشير إلى الأنماط المضادة مثل القيم الاعتباطية غير الضرورية

مع هذه التقنيات، ستقدم واجهات مصقولة ومتسقة بشكل أسرع مع الحفاظ على قاعدة الكود قابلة للصيانة والتوسع.