Centralisation du Design avec Tailwind CSS

Guide d'Installation et de Configuration de Tailwind CSS pour un Projet PHP

Ce support de cours vous guidera à travers le processus d'installation et de configuration de Tailwind CSS dans votre projet PHP actuel. Nous allons utiliser les fichiers fournis (tailwind.config.js, input.css, et package.json) et configurer Tailwind pour qu'il fonctionne avec des fichiers PHP.

Étape 1 : Pré-requis

Avant de commencer, assurez-vous d'avoir installé Node.js et npm sur votre machine. Vous pouvez télécharger et installer Node.js à partir de nodejs.org.

Étape 2 : Initialisation du Projet

Initialisez votre projet npm : Ouvrez votre terminal dans le répertoire racine de votre projet PHP et exécutez la commande suivante pour initialiser un projet npm :
```
npm init -y
```
Cela créera un fichier package.json si ce n'est pas déjà fait.

Ajoutez les fichiers fournis : Remplacez le contenu de votre package.json par celui fourni :

{
  "name": "user_managment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\\"Error: no test specified\\\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.4.4"
  }
}

Étape 3 : Installation de Tailwind CSS

Installez Tailwind CSS : Exécutez la commande suivante pour installer Tailwind CSS et ses dépendances :
```
npm install -D tailwindcss
npx tailwindcss init
```

Étape 4 : Configuration de Tailwind CSS

Créez le fichier de configuration de Tailwind CSS : Si ce n'est pas déjà fait, créez un fichier tailwind.config.js et copiez-y le contenu fourni :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,php,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Créez le fichier d'entrée CSS : Créez un fichier input.css dans votre répertoire racine ou dans un dossier approprié (par exemple, ./assets/css/). Copiez-y le contenu fourni :
```
@tailwind base;
@tailwind components;
@tailwind utilities;

button {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
```

Étape 5 : Construction du CSS

Ajoutez un script de build dans package.json : Modifiez votre package.json pour inclure un script de build Tailwind :

"scripts": {
    "build:css": "tailwindcss build input.css -o output.css",
    "watch:css": "tailwindcss build input.css -o output.css --watch"
}

Compilez le CSS : Exécutez la commande suivante pour compiler votre CSS :
```
npm run build:css
npm run watch:css
```
Cela génèrera un fichier output.css que vous pourrez inclure dans vos fichiers PHP.

Étape 6 : Inclusion du CSS dans vos Fichiers PHP

Incluez le fichier CSS généré (output.css) dans vos fichiers PHP :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Projet PHP avec Tailwind CSS</title>
    <link rel="stylesheet" href="output.css">
</head>
<body>
	<!-- content -->
</body>
</html>

Conclusion

En suivant ces étapes, vous avez installé et configuré Tailwind CSS dans votre projet PHP. Vous pouvez maintenant utiliser les utilitaires Tailwind CSS pour styliser vos composants sans avoir à répéter les mêmes classes à chaque fois, grâce à la directive @apply que nous avons utilisée dans input.css. N'oubliez pas de recompiler votre CSS (npm run build:css) chaque fois que vous modifiez input.css.