Développement Tailwind CSS dans Cursor
Tailwind CSS transforme la manière dont les développeurs abordent le style en fournissant un ensemble complet de classes utilitaires qui se composent directement dans le balisage. Associé à Cursor, un éditeur IDE piloté par l'IA, le développement Tailwind devient encore plus efficace grâce aux suggestions de classes intelligentes, à la configuration automatique et à l'extraction de composants. Ce guide couvre tout, de l'utilisation de base des classes utilitaires aux flux de travail de personnalisation avancés dans Cursor.
Premiers pas avec Tailwind dans Cursor
Cursor comprend Tailwind CSS à un niveau profond. L'éditeur fournit une complétion automatique intelligente pour les classes utilitaires, reconnaît les configurations personnalisées, et peut générer un balisage de composant complet à partir de descriptions de conception. Cette intégration élimine le besoin de basculer constamment entre la documentation et le code qui caractérisait traditionnellement le développement Tailwind.
Les flux de travail Tailwind clés améliorés par Cursor incluent :
- Complétion automatique de classes utilitaires en temps réel avec aperçu des propriétés CSS
- Génération IA de balisage de composants à partir de descriptions de conception
- Extraction automatique de modèles répétés en composants réutilisables
- Configuration de thème personnalisé avec IntelliSense type-safe
- Suggestions de variantes responsives et d'état
Ce guide suppose que vous avez une compréhension de base des concepts HTML et CSS. Tous les exemples utilisent React et TypeScript, bien que les principes s'appliquent à n'importe quel framework supporté par Tailwind.
Configuration de Tailwind dans un projet Cursor
Une configuration de projet appropriée garantit que Cursor peut fournir la gamme complète des fonctionnalités IntelliSense et IA de Tailwind.
Installation et configuration
Initialisez votre projet et installez les dépendances Tailwind :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configurez votre tailwind.config.js avec des chemins de contenu correspondant à la structure de votre projet :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Ajoutez les directives Tailwind à votre fichier CSS global :
@tailwind base;
@tailwind components;
@tailwind utilities;
Lorsque vous ouvrez cette configuration dans Cursor, l'éditeur indexe immédiatement toutes les classes utilitaires disponibles et les valeurs de thème personnalisées. L'IA comprend vos chemins de contenu et peut suggérer une utilisation de classes spécifique à la structure de votre projet.
Si l'extension Tailwind CSS IntelliSense est disponible sur le marketplace d'extensions de Cursor, installez-la. Elle fournit un aperçu des propriétés CSS en ligne lors du survol des classes utilitaires, accélérant considérablement le développement.
Intégration TypeScript
Pour la meilleure expérience de vérification de types de Cursor, assurez-vous que votre configuration TypeScript reconnaît les types JSX et de framework :
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"moduleResolution": "bundler",
"strict": true
}
}
Cursor utilise ces types pour fournir une complétion automatique précise pour les props de composants en parallèle des suggestions de classes Tailwind.
Maîtriser les classes utilitaires
Les classes utilitaires sont le fondement de Tailwind. Les fonctionnalités de complétion automatique et d'IA de Cursor vous aident à découvrir et à appliquer efficacement les bonnes classes utilitaires.
Modèles de classes utilitaires de base
Commencez par les classes utilitaires de mise en page. Cursor suggère les classes appropriées au fur et à mesure que vous tapez, affichant un aperçu du CSS généré :
export function Card() {
return (
<div className="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
Card Title
</h2>
<p className="mb-4 text-base text-gray-700">
This card demonstrates core Tailwind utility patterns.
</p>
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Action
</button>
</div>
);
}
Lorsque vous tapez des noms de classes dans Cursor, l'éditeur suggère des complétions dans un ordre logique : mise en page, espacement, dimensionnement, typographie, arrière-plans, bordures, effets et interactions. Cet ordre reflète la manière dont la documentation Tailwind organise les classes utilitaires.
Conception responsive avec des préfixes de points d'arrêt
Cursor reconnaît les préfixes responsives de Tailwind et les suggère de manière appropriée :
export function ResponsiveGrid() {
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div className="rounded-lg bg-gray-100 p-4">Item 1</div>
<div className="rounded-lg bg-gray-100 p-4">Item 2</div>
<div className="rounded-lg bg-gray-100 p-4">Item 3</div>
<div className="rounded-lg bg-gray-100 p-4">Item 4</div>
</div>
);
}
L'IA comprend la méthodologie mobile-first et vous avertit si vous essayez d'utiliser des modèles de points d'arrêt desktop-first. Elle suggère également les bonnes plages de points d'arrêt en fonction des paramètres de votre tailwind.config.js.
Variantes d'état et interactions
Les états de survol, de focus et actifs sont essentiels pour les éléments interactifs. Cursor fournit des suggestions intelligentes pour les variantes d'état :
export function InteractiveButton() {
return (
<button className="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 text-sm font-medium text-gray-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 group-hover:from-purple-600 group-hover:to-blue-500">
<span className="relative rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
Hover over me
</span>
</button>
);
}
Évitez d'utiliser excessivement des valeurs arbitraires comme w-[123px] lorsqu'une classe utilitaire standard existe. Cursor signale les modèles de valeurs arbitraires courantes qui ont des classes utilitaires intégrées équivalentes, vous aidant à maintenir la cohérence avec votre système de conception.
Configuration et thème personnalisés
Chaque projet nécessite une personnalisation au-delà des valeurs par défaut de Tailwind. Cursor vous aide à étendre la configuration du thème tout en maintenant une prise en charge IntelliSense complète.
Extension des couleurs et de la typographie
Ouvrez votre tailwind.config.js et définissez des jetons de conception personnalisés :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Cal Sans', 'Inter', 'system-ui', 'sans-serif'],
},
fontSize: {
'display-xl': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
'display-lg': ['3.75rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
},
},
},
plugins: [],
};
Après l'enregistrement, Cursor indexe immédiatement ces valeurs personnalisées. Taper bg-brand- affiche votre palette de couleurs complète, et text-display-xl apparaît dans les suggestions de tailles de police.
Plugins et composants personnalisés
Pour les composants de système de conception, créez des plugins Tailwind que Cursor reconnaît :
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ... autre configuration
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.btn': {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: theme('borderRadius.md'),
padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
fontWeight: theme('fontWeight.medium'),
transitionProperty: theme('transitionProperty.colors'),
transitionDuration: theme('transitionDuration.150'),
},
'.btn-primary': {
backgroundColor: theme('colors.brand.600'),
color: theme('colors.white'),
'&:hover': {
backgroundColor: theme('colors.brand.700'),
},
},
});
}),
],
};
La complétion automatique de Cursor inclut désormais btn et btn-primary comme noms de classes valides, et l'aperçu au survol affiche le CSS généré.
Utilisez l'IA de Cursor pour convertir des fichiers CSS ou SCSS existants en extensions de configuration Tailwind. Sélectionnez vos anciens styles et demandez : « Convertissez ces styles en extensions de thème Tailwind et classes utilitaires personnalisées. »
Modèles d'extraction de composants
Au fur et à mesure que votre projet grandit, les combinaisons répétées de classes utilitaires devraient devenir des composants réutilisables. L'IA de Cursor excelle à identifier les opportunités d'extraction.
Identifier les candidats à l'extraction
Considérez ce composant lourd en classes utilitaires inline :
export function UserProfile() {
return (
<div className="flex items-center space-x-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
<img
className="h-12 w-12 rounded-full object-cover"
src="/avatar.jpg"
alt="User avatar"
/>
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
<p className="text-sm text-gray-500">Software Engineer</p>
</div>
<button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
Follow
</button>
</div>
);
}
Sélectionnez ce composant dans Cursor et demandez à l'IA : « Extrayez les styles du conteneur de carte en un composant Card réutilisable avec des variantes de padding et d'ombre. » L'IA génère :
// components/Card.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const cardVariants = cva('rounded-lg border border-gray-200 bg-white', {
variants: {
padding: {
none: '',
sm: 'p-3',
md: 'p-4',
lg: 'p-6',
},
shadow: {
none: '',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg',
},
},
defaultVariants: {
padding: 'md',
shadow: 'sm',
},
});
export interface CardProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof cardVariants> {}
export function Card({
className,
padding,
shadow,
...props
}: CardProps) {
return (
<div
className={cn(cardVariants({ padding, shadow }), className)}
{...props}
/>
);
}
Le UserProfile refactorisé devient plus propre et plus maintenable :
export function UserProfile() {
return (
<Card className="flex items-center space-x-4">
<img
className="h-12 w-12 rounded-full object-cover"
src="/avatar.jpg"
alt="User avatar"
/>
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
<p className="text-sm text-gray-500">Software Engineer</p>
</div>
<button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
Follow
</button>
</Card>
);
}
Utilisation de class-variance-authority
La bibliothèque class-variance-authority s'associe parfaitement à Tailwind et Cursor. Elle fournit des variantes de composants type-safe que l'IntelliSense de Cursor prend entièrement en charge.
// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-brand-600 text-white hover:bg-brand-700',
destructive: 'bg-red-600 text-white hover:bg-red-700',
outline: 'border border-gray-300 bg-transparent hover:bg-gray-50',
ghost: 'hover:bg-gray-100',
link: 'text-brand-600 underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-8 px-3 text-xs',
lg: 'h-12 px-8 text-base',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {}
export function Button({
className,
variant,
size,
...props
}: ButtonProps) {
return (
<button
className={cn(buttonVariants({ variant, size }), className)}
{...props}
/>
);
}
Avec cette configuration, Cursor fournit une complétion automatique pour les props variant et size avec leurs options disponibles, capturant les combinaisons invalides au moment de la compilation.
Suggestions de classes IA
L'une des fonctionnalités les plus puissantes de Cursor est la génération de balisage Tailwind à partir de descriptions en langage naturel.
Génération de composants à partir de descriptions
Décrivez ce que vous voulez, et Cursor génère le balisage :
Prompt :
Créez un composant de carte de tarification avec des classes Tailwind. Il devrait avoir :
- Un badge "Pro" proéminent en haut
- Un grand affichage de prix avec "/month"
- Une liste de 4 fonctionnalités avec des coches
- Un bouton CTA proéminent
- Un effet de survol subtil avec soulèvement
Cursor génère :
export function PricingCard() {
return (
<div className="relative flex flex-col rounded-2xl border-2 border-brand-500 bg-white p-8 shadow-xl transition-transform duration-300 hover:-translate-y-1">
<div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-4 py-1 text-sm font-semibold text-white">
Pro
</div>
<div className="mb-6 text-center">
<span className="text-5xl font-bold text-gray-900">$29</span>
<span className="text-lg text-gray-500">/month</span>
</div>
<ul className="mb-8 space-y-4">
{[
'Unlimited projects',
'Priority support',
'Advanced analytics',
'Custom integrations',
].map((feature) => (
<li key={feature} className="flex items-center text-gray-700">
<svg className="mr-3 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
{feature}
</li>
))}
</ul>
<button className="mt-auto rounded-lg bg-brand-600 py-3 text-center font-semibold text-white transition-colors hover:bg-brand-700">
Get Started
</button>
</div>
);
}
Cette fonctionnalité accélère considérablement le prototypage et réduit le besoin de parcourir la documentation Tailwind.
Refactoring des styles inline en Tailwind
Lors de la migration de code existant, sélectionnez les styles inline et demandez à Cursor : « Convertissez ces styles inline en classes utilitaires Tailwind. » L'IA génère un balisage Tailwind idiomatique tout en préservant l'apparence visuelle.
// Avant
<div style={{ marginBottom: '24px', padding: '16px', backgroundColor: '#f3f4f6', borderRadius: '8px' }}>
// Après
<div className="mb-6 rounded-lg bg-gray-100 p-4">
Pour des conceptions complexes, collez une capture d'écran ou décrivez la hiérarchie visuelle. Cursor peut suggérer des combinaisons appropriées de classes utilitaires flexbox, grid et d'espacement pour obtenir la mise en page souhaitée.
Mode sombre et thèmes
Les applications modernes nécessitent une prise en charge du mode sombre. Cursor aide à implémenter et à maintenir les configurations multi-thèmes.
Implémentation du mode sombre
Activez le mode sombre dans la configuration Tailwind :
module.exports = {
darkMode: 'class',
// ... reste de la configuration
};
Utilisez le préfixe dark: pour le style adapté au thème :
export function ThemedCard() {
return (
<div className="rounded-lg border border-gray-200 bg-white p-6 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
<h2 className="text-xl font-bold">Adaptive Content</h2>
<p className="mt-2 text-gray-600 dark:text-gray-300">
This card automatically adjusts to the current theme.
</p>
</div>
);
}
Cursor suggère les variantes dark: à côté des classes utilitaires standard et vous avertit si les ratios de contraste importants pourraient échouer dans un thème donné.
Conclusion
Le développement Tailwind CSS dans Cursor représente un saut important dans la productivité des développeurs front-end. La combinaison du style utility-first et de l'assistance pilotée par l'IA élimine la friction du processus de mise en œuvre de la conception.
Points clés de ce guide :
- Configurez Tailwind correctement pour que Cursor puisse indexer vos valeurs de thème personnalisées
- Utilisez la complétion automatique de Cursor pour découvrir les utilitaires sans quitter l'éditeur
- Extrayez les modèles répétés en composants type-safe avec class-variance-authority
- Exploitez la génération IA pour un prototypage rapide à partir de descriptions en langage naturel
- Maintenez la cohérence du thème avec le mode sombre et les jetons de conception personnalisés
- Laissez Cursor signaler les anti-modèles comme les valeurs arbitraires inutiles
Avec ces techniques, vous livrerez des interfaces plus rapidement tout en maintenant votre base de code propre et évolutive.