How to use TailwindCSS with Symfony's Encore

Published on May 10th, 2018

The integration of TailwindCSS into Symfony's Webpack-Encore is quite easy. Here I'm gonna show you how it works.

Install the needed dependencies

First of all, we need to install the dependencies we need. I use less in my case. If you would like to use scss, you can. Just pull in the appropriate package. We're also gonna install the autoprefixerpackage. And of course we need TailwindCSS itself. TailwindCSS needs a package called postcss-loader. So let's also pull that it. So we end up with something like

yarn add --dev @symfony/webpack-encore less-loader less autoprefixer postcss-loader tailwindcss

The result should be a package.json like this:

    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0",
        "autoprefixer": "^8.4.1",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "postcss-loader": "^2.1.5",
        "tailwindcss": "^0.5.3"
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"


The configuration is so simple. I created my tailwind.js configuration file in my project's root. Additionally to that, I also created my app.less file in assets/less/app.less with all the basic tailwind stuff you can find here.

There are only two things missing:

  • Webpack should use our less-loader
  • Webpack should use tailwind and autoprefixer as postcss modules

Easy enough!

var Encore = require('@symfony/webpack-encore');


    .addEntry('js/app', './assets/js/app.js') // your js entry file
    .addStyleEntry('css/app', './assets/less/app.less') // your less/scss entry file


module.exports = Encore.getWebpackConfig();
let tailwindcss = require('tailwindcss');

 module.exports = {
     plugins: [
         tailwindcss('tailwind.js'), // your tailwind.js configuration file path


That's it. Now you can just run it as always.

yarn run dev

for development.

yarn run watch

if you would like to run the watcher.

yarn run build

to run the production build.

Bobby Bouwmann and I are writing a book called "Laravel Secrets".
You will learn everything about the undocumented secrets of the popular Laravel framework. You can sign up using the form below to get early updates.
      Visit to get more information.