Tailwind Elements avec Symfony 6 !

Voir la vidéo

Objectifs

Dans cet article, je vais vous présenter Tailwind Elements, une surcouche de Tailwind CSS qui permet aux habitués de Bootstrap de se sentir comme chez eux !

En effet, Tailwind Elements est un ensemble de composants et de blocs prêts à l’emploi, qui vous permettront de créer rapidement des interfaces web, tout en bénéficiant de la puissance de Tailwind CSS !

Nous en profiteroins pour voir comment l’installer dans un projet Symfony 6 avec Webpack Encore.

Création d’un projet Symfony 6

• Pour commencer, nous allons créer un projet Symfony 6 vierge, en utilisant Symfony CLI.

symfony new TailwindComponents --webapp
cd TailwindComponents

• Puis, installons Webpack Encore.

composer require symfony/webpack-encore-bundle
npm install --force

• Activons le SassLoader dans le fichier webpack.config.js en décommentant la ligne // .enableSassLoader().

// webpack.config.js

// ...
.enableSassLoader()
// ...

• Installons Sass-loader et sass.

npm install sass-loader@^13.0.0 sass --save-dev

• Rennomons le fichier assets/styles/app.css en assets/styles/app.scss.

• Modifions le fichier assets/app.js pour qu’il utilise le fichier app.scss à la place de app.css.

// assets/app.js

// ...
import './styles/app.scss';
// ...

• Buildons le projet.

npm run build

• Et enfin, générons un controller et une vue pour notre page d’accueil, puis démarrons le serveur.

symfony console make:controller HomeController
symfony serve -d

Installation de Tailwind CSS

Nous allons maintenant installer Tailwind CSS au sein de notre projet Symfony 6.

• Installons quelques librairies necessaires à notre utilisation de Tailwind CSS.

npm install postcss-loader autoprefixer --dev

• Créons le fichier de configuration de PostCSS postcss.config.js.

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

• Et activons le PostCssLoader dans le fichier webpack.config.js.

// webpack.config.js

// ...
.enablePostCssLoader()
// ...

• Installons Tailwind CSS.

npm install tailwindcss

• Modifions le fichier postcss.config.js pour qu’il utilise Tailwind CSS.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

• Générons le fichier de configuration de Tailwind CSS tailwind.config.js.

npx tailwindcss init

• Et modifions le pour que Tailwind optimise le CSS généré en fonction des classes utilisées dans notre projet.

// tailwind.config.js

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

• Dernière étape pour la mise en place de Tailwind CSS, modifions le fichier assets/styles/app.scss pour qu’il utilise Tailwind CSS.

// assets/styles/app.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

• Nous pouvons maintenant build notre projet et passer en mode développement.

npm run build
npm run watch

Installation de Tailwind Elements

Place à l’installation de Tailwind Elements ! Vous allez voir, c’est très simple ! Le plus dur est dèjà fait avec Tailwind CSS !

• Commençons par installer Tailwind Elements.

npm install tw-elements

• Modifions le fichier de configuration de Tailwind CSS tailwind.config.js pour qu’il utilise Tailwind Elements.

// tailwind.config.js

/** @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')
  ],
}

• Ajoutons l’imporation de Tailwind Elements dans le fichier assets/app.js.

// assets/app.js

// ...
import 'tw-elements';

• Buildons le projet et lançons le mode développement.

npm run build
npm run watch

• Et c’est tout ! Vous pouvez maintenant utiliser Tailwind Elements dans votre projet Symfony 6 !