tailwind

Tailwind CSS v4 guide organized as modular rules. Covers the utility-first model, @theme variables, responsive/state variants, custom styles, performance, accessibility, and the Figma → Tailwind theme workflow for generating design tokens directly from Figma variables.

IF setting up Tailwind or understanding how utility classes work: → Read rules/core-utility-model.md

IF working with theme variables (@theme), design tokens, colors, fonts, spacing: → Read rules/core-theme-variables.md

مهارة أفضل ممارسات Tailwind CSS v4 التي تغطي أنماط المنفعة أولاً، ومتغيرات @theme، والتصميم سريع الاستجابة، والوضع المظلم، والأنماط المخصصة، والأداء، وإمكانية الوصول، وسير عمل إنشاء سمة Figma-to-Tailwind. يُستخدم عندما يذكر المستخدم Tailwind، أو tailwindcss، أو@theme، أو فئات الأدوات المساعدة، أو تكوين Tailwind، أو الرموز المميزة لتصميم Figma، أو عندما يطلب إنشاء مشروع Tailwind CSS أو تكوينه أو تدقيقه أو ترحيله (بما في ذلك عمليات ترحيل الإصدار 3 إلى الإصدار 4). المصدر: display-design-studio/skills.