Skip to content

Instantly share code, notes, and snippets.

@back-2-95
Created December 10, 2021 17:48
Show Gist options
  • Save back-2-95/3d059e4443ee8f028ab5c8c20b602b2f to your computer and use it in GitHub Desktop.
Save back-2-95/3d059e4443ee8f028ab5c8c20b602b2f to your computer and use it in GitHub Desktop.
Use Tailwindcss 3 with Symfony 5/6

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment