https://github.com/henocn/tailwind-cms
Tailwind CMS Editor, pour écrire et éditer des articles complet en utilisant la stylisation tailwindcss et ensuite copier le code correspondant
https://github.com/henocn/tailwind-cms
cms codegenerator design react tailwindcss
Last synced: about 1 month ago
JSON representation
Tailwind CMS Editor, pour écrire et éditer des articles complet en utilisant la stylisation tailwindcss et ensuite copier le code correspondant
- Host: GitHub
- URL: https://github.com/henocn/tailwind-cms
- Owner: henocn
- License: other
- Created: 2025-06-13T11:30:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-13T23:08:09.000Z (about 1 year ago)
- Last Synced: 2025-06-13T23:18:02.804Z (about 1 year ago)
- Topics: cms, codegenerator, design, react, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 67.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind CMS Editor
Un éditeur de contenu moderne et professionnel utilisant React, TypeScript, Vite et Tailwind CSS. Créez, stylisez et exportez vos articles avec une interface intuitive et des contrôles avancés.
## Fonctionnalités
### Éditeur de Texte Avancé
- **Styles de texte** : Gras, italique, souligné
- **Typographie** : Taille, poids, interligne, espacement des lettres
- **Alignement** : Gauche, centre, droite, justifié
- **Couleurs** : Palettes visuelles pour texte, arrière-plan et bordures
- **Espacement** : Contrôle du padding et des marges
- **Bordures** : Épaisseur, couleur et arrondis personnalisables
### Interface Utilisateur
- **Design moderne** avec icônes Lucide React
- **Palettes de couleurs visuelles** (plus de sélecteurs texte)
- **Aperçu en temps réel** des styles appliqués
- **Mode prévisualisation** pour voir le rendu final
- **Interface responsive** adaptée à tous les écrans
### Types de Contenu
- **Paragraphes** : Texte standard avec styles personnalisés
- **Titres** : Headers avec mise en forme avancée
- **Citations** : Blockquotes avec bordure latérale
- **Gestion des blocs** : Ajout, suppression et organisation
### Génération de Code
- **Code HTML complet** avec Tailwind CSS
- **Copie en un clic** dans le presse-papiers
- **Téléchargement direct** en fichier HTML
- **Code optimisé** et prêt à l'emploi
## Utilisation
### 1. Créer du Contenu
- Tapez votre texte dans la zone de saisie
- Utilisez les contrôles de style pour personnaliser l'apparence
- L'aperçu se met à jour en temps réel
### 2. Appliquer des Styles
- **Formatage** : Boutons gras, italique, souligné
- **Couleurs** : Cliquez sur les palettes de couleurs
- **Espacement** : Ajustez padding, marges et bordures
- **Typographie** : Modifiez taille, poids et interligne
### 3. Ajouter des Blocs
- **Paragraphe** : Texte standard
- **Titre** : Header avec styles
- **Citation** : Blockquote avec bordure
### 4. Prévisualiser et Exporter
- Basculez en mode prévisualisation
- Copiez le code généré
- Téléchargez le fichier HTML complet
## Palettes de Couleurs
### Couleurs de Texte
16 couleurs disponibles : noir, gris, rouge, bleu, vert, violet, orange, jaune, rose, indigo, cyan...
### Couleurs d'Arrière-plan
14 couleurs d'arrière-plan : transparent, blanc, nuances de gris et couleurs pastel
### Couleurs de Bordure
9 couleurs de bordure : transparent, gris et couleurs principales
## Contribution
Les contributions sont les bienvenues ! Pour contribuer :
1. Fork le projet
2. Créez une branche feature (`git checkout -b feature/AmazingFeature`)
3. Commit vos changements (`git commit -m 'Add AmazingFeature'`)
4. Push vers la branche (`git push origin feature/AmazingFeature`)
5. Ouvrez une Pull Request
## Roadmap
### Fonctionnalités Prévues
- [ ] **Éditeur WYSIWYG** complet
- [ ] **Templates prédéfinis** d'articles
- [ ] **Import/Export JSON** des articles
- [ ] **Historique des modifications** (undo/redo)
- [ ] **Sauvegarde automatique** en localStorage
- [ ] **Mode sombre** pour l'interface
- [ ] **Raccourcis clavier** pour l'édition
- [ ] **Drag & Drop** pour réorganiser les blocs
- [ ] **Composants personnalisés** (boutons, cards, etc.)
- [ ] **Export vers autres formats** (Markdown, PDF)
### Améliorations Techniques
- [ ] **Tests unitaires** avec Vitest
- [ ] **Tests E2E** avec Playwright
- [ ] **Storybook** pour les composants
- [ ] **PWA** pour utilisation hors-ligne
- [ ] **Optimisation des performances**
## Signaler un Bug
Si vous trouvez un bug, veuillez ouvrir une issue avec :
- Description détaillée du problème
- Étapes pour reproduire
- Captures d'écran si applicable
- Informations sur votre environnement
**N'hésitez pas à donner une étoile si ce projet vous plaît !**