· 3 min read

Tailwind Elements avec Symfony 6 !

Vous avez envie d'utiliser Tailwind, mais vous avez peur de perdre vos marques vis à vis de Bootstrap ? Je vous propose découvrir Tailwind Elements qui est un Bootstrap like plus joli et plus complet.

Vous avez envie d'utiliser Tailwind, mais vous avez peur de perdre vos marques vis à vis de Bootstrap ? Je vous propose découvrir Tailwind Elements qui est un Bootstrap like plus joli et plus complet.

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 !
Share:
Back to Blog