Workshop Tailwindcss

Workshop TailwindCSS

Bienvenue sur notre repo pour la préparation au workshop sur TailwindCSS ! Tout d'abord et afin de facilier le bon déroulement de la présentation, nous avons créé 3 sous-dossiers où Tailwind est déjà installé et configuré : Natif, React et Laravel. Vous n'avez plus qu'à choisir la techno que vous voulez et vous pourrez commencer directement à styliser votre formulaire ! N'oubliez pas d'utiliser npm install pour les versions Natif et React et composer install pour Laravel.

Attention: si vous décidez de prendre le dossier Laravel déjà initialisé, vous devrez exécuter quelques commandes avant de pouvoir commencer :

composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan migrate
npm run dev
php artisan serve

Voici le lien vers la doc de TailwindCSS pour chercher les équivalents Tailwind des propriétés CSS : https://tailwindcss.com/docs/utility-first
Utilisez la barre de recherche "Quick search" pour trouver les propriétés que vous cherchez.

Nous allons quand même vous détailler ci-dessous comment faire l'installation et la configuration de Tailwind, vous pourrez ainsi le réutiliser pour vos futurs projets !

Extension VSCode recommandée

Installer l'extension Tailwind CSS IntelliSense.

Natif (via CLI)

Installer tailwindcss via npm, et créer le fichier tailwind.config.js.
```
npm install -D tailwindcss
npx tailwindcss init
```

Ajouter les chemins d'accès à tous les fichiers modèles dans le fichier tailwind.config.js.

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

Attention : dans content: [], le chemin n'est pas toujours le bon. En effet, index.html et app.js se retrouveront souvent à la racine. Donc changer le chemin par : content: ["./*.{html,js}"],

Ajouter les directives @tailwind pour chacune des couches de Tailwind à du fichier CSS principal.

Créer un dossier src et à l'intérieur un fichier input.css. Ajouter ce qui suit dedans :

@tailwind base;
@tailwind components;
@tailwind utilities;

Exécuter l'outil CLI pour rechercher des classes dans les fichiers modèles et créer le CSS.

Utiliser la commande suivante dans le terminal :

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Ca aura pour effet de créer un fichier output.css dans le dossier src.

Ajouter le lien vers le CSS dans la balise head de index.html.

<link href="./src/output.css" rel="stylesheet">

Vous trouverez ici le lien vers la doc de Tailwind : https://tailwindcss.com/docs/installation

React

Installer Tailwind CSS via npm (lorsque le projet en React est initialisé).

npm install -D tailwindcss postcss autoprefixer

Initialiser la configuration de Tailwind CSS.

npx tailwindcss init -p

Cette commande va créer deux fichiers dans le projet :

tailwind.config.js : pour configurer Tailwind.
postcss.config.js : pour configurer PostCSS.

Configurer le fichier tailwind.config.js.
Ouvre le fichier tailwind.config.js et ajouter ceci :

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

Dans index.css, ajouter ceci :

@tailwind base;
@tailwind components;
@tailwind utilities;

S'assurer que index.css est bien importé dans main.js.
Il n'y a plus qu'à lancer le serveur.

npm run dev

Lien vers la doc : https://tailwindcss.com/docs/guides/vite

Laravel

Installer Tailwind CSS via Npm (lorsque le projet en Laravel est initialisé)

npm install -D tailwindcss postcss autoprefixer

Initialiser la configuration de Tailwind CSS

npx tailwindcss init -p

Configurer le fichier tailwind.config.js.
Ouvre le fichier tailwind.config.js et ajouter ceci :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans ./resources/css/app.css, ajouter ceci :

@tailwind base;
@tailwind components;
@tailwind utilities;

Dans le fichier *.blade.php, ajouter @vite('resources/css/app.css') dans la balise head. Par exemple, lors de l'initialisation du projet dans le dossier ./resources/views/welcome.blade.php se trouve la vue 'Welcome'. On peut supprimer ce qui se trouve dedans et ajouter le lien ci-dessus dans le doctype.
Il n'y a plus qu'à lancer npm run dev

Lien vers la doc : https://tailwindcss.com/docs/guides/laravel

Auteurs

Caroline & Justine

Top categories