Symfony 6 Tailwindcss 3

• Création de votre projet
• Installer webpack
• Faire un npm install
• Installer TailwindCss npm install -D tailwindcss postcss-loader purgecss-webpack-plugin glob-all path autoprefixer
• Installer Postcss Import npm install -D postcss-import
• Installer Postcss.config.js & Tailwind.config.js npx tailwindcss init -p
• Dans le Postcss rajouter :

let tailwindcss = require('tailwindcss')

module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('postcss-import'),
        require('autoprefixer')
    ],
};

• Dans le Tailwind rajouter :

module.exports = {
  content: ["./templates/**/*.{html,twig}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• MODIModifier le Webpack.config.js :

 .enablePostCssLoader((options) => {
        options.postcssOptions = {
            // the directory where the postcss.config.js file is stored
            config: './postcss.config.js'
        };
    })

• Décommentaiter les balise dans base.html.twig
• Ajouter dans le asset/style/app.css

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

• Lancer npx tailwindcss -i assets/styles/app.css -o public/build/app.css --watch
• Lancer le server symfony : symfony serve -d
• Pour la mise en prod faire un npm run build