Tailwind CSS

Vous trouverez une documentation pour intégrer tailwind dans un projet Symfony.

Documentation

📓 Tailwind CSS 📓 Symfony

Installer le bundle webpack encore

Installez Webpack Encore, ce bundle gère la construction des assets.

Installer le bundle symfony/webpack-encore-bundle

composer require symfony/webpack-encore-bundle

symfony/webpack-encore-bundle

📓 Documentation
📦 Component

Installer Tailwind CSS

En utilisant npm, installez tailwindcss et ses dépendances, ainsi que postcss-loader, puis exécutez la commande init pour générer à la fois tailwind.config.js et postcss.config.js.

Installer le bundle symfony/webpack-encore-bundle

npm install -D tailwindcss postcss postcss-loader autoprefixer
npx tailwindcss init -p

Activer le support PostCSS

Activez PostCSS Loader dans le script webpack.config.js.

webpack.config.js

// ...
 .enablePostCssLoader();

PostCSS

📓 Documentation
📦 PostCSS

Configurer vos chemins

Ajoutez les chemins d’accès à tous vos fichiers de modèle dans votre fichier tailwind.config.js.

webpack.config.js

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

Ajoutez les directives Tailwind à votre CSS

Ajoutez les directives @tailwind pour chacune des couches de Tailwind à votre fichier ./assets/styles/app.css.

./assets/styles/app.css

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

Processus de construction

Exécutez votre processus de compilation avec npm run watch..

"Exécuter

npm run watch