🏠 홈
벤치마크
📊 모든 벤치마크 🦖 공룡 v1 🦖 공룡 v2 ✅ 할 일 목록 앱 🎨 창의적인 자유 페이지 🎯 FSACB - 궁극의 쇼케이스 🌍 번역 벤치마크
모델
🏆 톱 10 모델 🆓 무료 모델 📋 모든 모델 ⚙️ 킬로 코드 모드
리소스
💬 프롬프트 라이브러리 📖 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.