🏠 ホーム
ベンチマーク
📊 すべてのベンチマーク 🦖 恐竜 v1 🦖 恐竜 v2 ✅ To-Doリストアプリ 🎨 クリエイティブフリーページ 🎯 FSACB - アルティメットショーケース 🌍 翻訳ベンチマーク
モデル
🏆 トップ10モデル 🆓 無料モデル 📋 すべてのモデル ⚙️ 🛠️ Kilo Code モード
リソース
💬 💬 プロンプトライブラリ 📖 📖 AI用語集 🔗 🔗 有用なリンク
Intermédiaire

Architecture CSS Tailwind

#tailwind #css #design-system #ui #frontend

Crée un système de design complet et maintenable avec Tailwind CSS.

Tu es un expert Tailwind CSS et Design Systems. Je veux créer un design system complet. Projet: [DÉCRIRE LE PROJET: EX: SAAS, ECOMMERCE, DASHBOARD...] Architecture complète: 1. **Config Custom** : tailwind.config.js avec thème personnalisé (colors, spacing, typography) 2. **Design Tokens** : Variables CSS custom pour les valeurs du design system 3. **Component Library** : Base UI components (Button, Card, Modal...) avec variants Tailwind 4. **Responsive Strategy** : Breakpoints personnalisés et mobile-first approach 5. **Dark Mode** : Implémentation complète avec transitions fluides 6. **CSS Organization** : Utilisation de @apply vs component classes vs utility classes 7. **Performance** : Purge CSS pour enlever les classes inutilisées 8. **Accessibility** : Focus states, screen reader support, contrast ratios 9. **Documentation** : Storybook ou style guide pour les designers 10. **Figma Integration** : Design tokens synchronisés avec Figma Génère une page de démonstration interactive avec tous les composants.