Tailwind est un framework CSS mais avec Tailwind et Tailwind Elements il est possible d’utiliser de nombreux composants préfait. Dans cette procédure, je vous explique comment installer Tailwind et Tailwind Elements dans un projet Symfony 6.
Prérequis :
- Avoir Symfony 6 d’installer sur sa machine
- Avoir Npm ou Yarn d’installé sur sa machine
Symfony 6 Tailwind :
Dans un premier temps, nous allons créer un nouveau projet Symfony 6 :
symfony new --webapp projet_tailwind
Installation du Sass dans le projet Symfony :
Ensuite on va installer Webpack Encore :
composer require symfony/webpack-encore-bundle
Puis on télécharge les dépendances avec Npm ou Yarn :
npm install
# Ou avec yarn
yarn install
Ensuite on va activer le SassLoader dans le fichier de configuration de Webpack webpack.config.js :
En remplacent la ligne suivante :
//.enableSassLoader()
// Par
.enableSassLoader()
Puis on va installer sass-loader :
npm install sass-loader@^13.0.0 sass --save-dev
Ensuite on va renommer le fichier qui se trouve dans le dossier assets/styles/app.css en app.scss
Puis dans le fichier assets/styles/app.js modifier la ligne suivante :
import './styles/app.css';
// par
import './styles/app.scss';
Enfin, on peut vérifier l’installation de Sass avec la commande suivante :
npm run build
Installation de Tailwind dans le projet Symfony :
D’abord nous allons installer Postcss-loader autoprefixer :
npm install postcss-loader autoprefixer --dev
Ensuite nous allons créer le fichier postcss.config.js à la racine du projet :
touch postcss.config.js
Puis nous allons y ajouter le contenu suivant :
module.exports = {
plugins: {
autoprefixer: {},
}
}
Ensuite nous allons activer le PostCssLoader dans la configuration de webpack.config.js en ajoutant la ligne suivante dans le le fichier (après « .enableSassLoader() ») :
.enablePostCssLoader()
Puis nous pouvons installer Tailwindcss :
npm install tailwindcss
Ensuite nous allons remplacer ke contenu du fichier postcss.config.js par le contenu suivant :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
Puis nous allons génerer le fichier de configuration avec la commande suivante :
npx tailwindcss init
Ensuite nous allons spécifier à tailwind que nous allons mettre nos contenus html dans le repertoire ‘./templates/**/*.html.twig‘ en modifiant le fichier tailwind.config.js par :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./templates/**/*.html.twig'],
theme: {
extend: {},
},
plugins: [],
}
Ensuite dans le fichier assets/styles/app.scss, on va spécifier l’emplacement de tailwind :
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enfin nous pouvons démarrer la compilation avec npm dans un terminal :
npm run watch
Ensuite un créer un controller pour nos test :
symfony console make:controller testController
Puis nous pouvons démarrer le serveur Symfony :
symfony serve
Puis il est possible de copier des modèles directement depuis le site https://tailwindui.com/
Installation de Tailwind Elements dans le projet Symfony 6 :
Pour installer Tailwind Elements nous devons d’abord exécuter la commande suivante :
npm install tw-elements
Ensuite nous devons modifier le fichier de configuration de tailwind (tailwind.config.js) par :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./templates/**/*.html.twig',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
extend: {},
},
plugins: [
require('tw-elements/dist/plugin')
],
}
Puis nous devons ajouter l’import de Tailwind Elements dans le fichier assets/app.js :
import 'tw-elements';
Enfin nous pouvons compiler et essayer les composants de Tailwind Elements :
npm run build
Sources :
https://tailwindcss.com/
https://tailwind-elements.com/