Introduction

Tailwind CSS a révolutionné la façon d'écrire du CSS. Fini les fichiers CSS de 5000 lignes, les conflits de classes et le temps perdu à nommer vos éléments. Avec Tailwind, vous stylisez directement dans votre HTML avec des classes utilitaires.

Ce guide vous accompagne de l'installation à la maîtrise de Tailwind CSS.

Pourquoi Tailwind CSS ?

Avantages

Inconvénients (et solutions)

Installation

Avec Next.js (recommandé)

``bash npx create-next-app@latest mon-projet # Sélectionnez "Yes" pour Tailwind CSS `

Projet existant

`bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p `

Configuration tailwind.config.js :

`javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } `

Ajoutez dans votre CSS principal :

`css @tailwind base; @tailwind components; @tailwind utilities; `

Les classes essentielles

Espacement (margin & padding)

`html

`

Flexbox

`html

`html

`html

Titre

`html

Texte sombre

`

Bordures et arrondis

`html

`html

`

États et interactions

`html Hover me

Click me

`css /* globals.css */ @layer components { .btn-primary { @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium; } } `

Avec des composants React (recommandé)

`tsx // components/Button.tsx interface ButtonProps { children: React.ReactNode; variant?: "primary" | "secondary"; }

export function Button({ children, variant = "primary" }: ButtonProps) { const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors"; const variants = { primary: "bg-blue-500 text-white hover:bg-blue-600", secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200", };

return ( ${baseClasses} ${variants[variant]}}> {children} ); } `

Personnalisation

Étendre le thème

`javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { 50: '#f0f9ff', 500: '#0ea5e9', 900: '#0c4a6e', }, }, fontFamily: { sans: ['Inter', 'sans-serif'], }, spacing: { '128': '32rem', }, }, }, } `

Plugins utiles

`bash npm install @tailwindcss/forms @tailwindcss/typography `

`javascript // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } ``

Conclusion

Tailwind CSS demande un temps d'adaptation, mais une fois maîtrisé, c'est un gain de productivité considérable. Commencez par un petit projet pour vous familiariser avec les classes, puis vous ne pourrez plus vous en passer !

Besoin d'aide sur votre projet Tailwind ? Contactez-moi.