---
title: "Tailwind Elements avec Symfony 6 !"
excerpt: "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."
publishDate: 2022-09-10T00:00:00.000Z
tags: ["tailwind", "tailwindcss", "symfony", "symfony6"]
canonical: "https://yoandev.co/tailwind-elements-avec-symfony-6"
---

<YouTube id="lIY5qUV0R3c" />

## Objectifs

Dans cet article, je vais vous présenter [Tailwind Elements](https://tailwind-elements.com/), une surcouche de [Tailwind CSS](https://tailwindcss.com/) qui permet aux habitués de [Bootstrap](https://getbootstrap.com/) 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](https://symfony.com/download).

```bash
symfony new TailwindComponents --webapp
cd TailwindComponents
```

* Puis, installons Webpack Encore.

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

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

```js
// webpack.config.js

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

* Installons Sass-loader et sass.

```bash
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`.

```js
// assets/app.js

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

* Buildons le projet.

```bash
npm run build
```

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

```bash
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.

```bash
npm install postcss-loader autoprefixer --dev
```

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

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

* Et activons le `PostCssLoader` dans le fichier `webpack.config.js`.

```js
// webpack.config.js

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

* Installons Tailwind CSS.

```bash
npm install tailwindcss
```

* Modifions le fichier `postcss.config.js` pour qu'il utilise Tailwind CSS.

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

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

```bash
npx tailwindcss init
```

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

```js
// 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.

```scss
// 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.

```bash
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.

```bash
npm install tw-elements
```

* Modifions le fichier de configuration de Tailwind CSS `tailwind.config.js` pour qu'il utilise Tailwind Elements.

```js
// 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`.

```js
// assets/app.js

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

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

```bash
npm run build
npm run watch
```

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