tailwind-css-v4-mastery
إتقان Tailwind CSS V4 بإرشادات مدعومة بالذكاء الاصطناعي
يقدم Tailwind CSS V4 تغييرات ثورية مع محرك Oxide والتكوين الذي يعتمد على CSS أولاً. توفر هذه المهارة إرشادات خبيرة للتنقل في الترحيل، وتحسين الأداء، وبناء أنظمة تصميم حديثة.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「tailwind-css-v4-mastery」。 ساعدني في ترحيل أدوات الظلال من v3 إلى v4
預期結果:
- ترحيل الظلال من v3 إلى v4:
- • .shadow → .shadow-sm (تم تقليل الظل الافتراضي)
- • .shadow-sm → .shadow-xs (الصغير يصبح صغيرًا جدًا)
- • .shadow-md → .shadow (المتوسط أصبح الآن الافتراضي)
- • لا توجد تغييرات لـ shadow-lg و shadow-xl و shadow-2xl
- إصلاح سريع: البحث والاستبدال في ملفاتك:
- sed -i 's/\bshadow\b/shadow-sm/g' *.html
- sed -i 's/\bshadow-sm\b/shadow-xs/g' *.html
正在使用「tailwind-css-v4-mastery」。 إنشاء تكوين @theme لألوان علامتي التجارية
預期結果:
- أضف هذا إلى ملف CSS الخاص بك:
- @import "tailwindcss";
- @theme {
- --color-brand-primary: oklch(0.6 0.15 250);
- --color-brand-secondary: oklch(0.7 0.12 180);
- --color-brand-accent: oklch(0.8 0.2 45);
- }
- الاستخدام: bg-brand-primary، text-brand-accent، إلخ.
正在使用「tailwind-css-v4-mastery」。 أي إضافة V4 يجب أن أستخدمها مع Vite؟
預期結果:
- استخدم @tailwindcss/vite للحصول على أسرع أداء:
- 1. npm install -D @tailwindcss/vite
- 2. أضف إلى vite.config.ts:
- import tailwindcss from '@tailwindcss/vite';
- plugins: [react(), tailwindcss()]
- التحسين المتوقع: أسرع من 10 إلى 100 مرة مقارنة بـ PostCSS
安全審計
安全This is a documentation-only skill containing Tailwind CSS V4 guides and one benign migration shell script. The static analyzer generated 435 false positives by misinterpreting markdown backticks as shell execution, documentation URLs as network threats, and text patterns like 'md' as weak cryptography. All findings are false positives - no cryptographic code, no credential access, no exfiltration patterns, no malicious behavior exists. The migration script only performs standard file backup and sed operations for CSS migration purposes.
低風險問題 (1)
風險因素
⚡ 包含腳本 (1)
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
الترحيل من Tailwind v3 إلى v4
ترحيل آلي مع اكتشاف التغييرات الجذرية، وتحديث الأدوات المساعدة، وتحويل التكوين من JavaScript إلى نهج يعتمد على CSS أولاً.
بناء مكتبات مكونات حديثة
إنشاء أنظمة تصميم قابلة للتطوير باستخدام متغيرات CSS، ودعم متعدد السمات، وتصميم المكونات المحدد النطاق باستخدام بنية V4.
تحسين أداء البناء
تحقيق بناء أسرع من 10 إلى 100 مرة باستخدام تكوين محرك Oxide، واختيار الإضافات، وأنماط تحسين CSS.
試試這些提示
أحتاج إلى ترحيل مشروعي من Tailwind v3 إلى v4. هل يمكنك التحقق من التغييرات الجذرية التي تؤثر على إعداداتي الحالية؟ أستخدم أدوات الظلال والزوايا المستديرة والشفافية بشكل مكثف.
ساعدني في تصميم نظام مكون زر في Tailwind V4 مع متغيرات أساسية/ثانوية، وأحجام، ودعم الوضع المظلم باستخدام تكوين @theme.
عمليات البناء في Tailwind v4 تستغرق 2-3 ثوانٍ مع PostCSS. كيف يمكنني تحسين ذلك؟ أستخدم Webpack في مشروع Next.js.
أحتاج إلى دعم 5 سمات علامات تجارية مختلفة في تطبيق المؤسسة الخاص بنا. أرني كيفية إعداد متغيرات CSS والتبديل بين السمات باستخدام سمات البيانات في Tailwind V4.
最佳實務
- استخدم دائمًا البادئة -- في كتل @theme: --color-primary وليس color-primary
- اختر الإضافة المناسبة لأداة البناء الخاصة بك: @tailwindcss/vite لـ Vite، @tailwindcss/postcss لـ Webpack
- اختبر ألوان الحدود وعرض الحلقات بعد الترحيل - تغيرت الإعدادات الافتراضية بشكل كبير
避免
- لا تحتفظ بـ tailwind.config.js - يتجاهله V4 تمامًا. استخدم @theme في CSS بدلاً من ذلك
- تجنب تعريف لوحات ألوان كاملة - استبدل فقط ما تحتاجه من الإعدادات الافتراضية
- لا تستخدم أبدًا أدوات الشفافية - تم إزالتها. استخدم معدلات الألوان مثل bg-black/50 بدلاً من ذلك