Use Tailwindcss 3 with Symfony 5/6

readme.md

Symfony 5/6 and Tailwindcss 3

Requirements

• symfony/webpack-encore-bundle

Steps

Add Tailwindcss & Friends with Yarn:

yarn add tailwindcss@latest postcss@latest postcss-loader@latest autoprefixer@latest --dev

Create file tailwind.config.js with following contents:

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

Create file postcss.config.js with following contents:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

Add this line to webpack.config.js;

.enablePostCssLoader()

Create some styles with Tailwindcss in assets/styles/app.css:

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

body {
    @apply bg-gradient-to-r from-purple-400 via-pink-500 to-red-500;
}
h1 {
    @apply text-2xl font-bold leading-7 sm:text-3xl sm:truncate mt-8 mb-8 filter drop-shadow-lg font-mono;
}

Build CSS:

yarn encore dev --watch

Check your site with styles created with Tailwindcss