How to use TailwindCSS with Symfony’s Encore

Published on May 10, 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 dependecies we need. I use less in my case. If you would like to use scss, you can. Just pull in the apropriate package. We're also gonna install the autoprefixer package. 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"
    }
}

Configuration

Configuration is so simple. I created my tailwind.js configuration file in the my projects 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!

webpack.config.js

var Encore = require('@symfony/webpack-encore');
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/app', './assets/less/app.less')
    .enableLessLoader()
    .enablePostCssLoader()
;
module.exports = Encore.getWebpackConfig();

postcss.config.js

let tailwindcss = require('tailwindcss');
module.exports = {
     plugins: [
         tailwindcss('tailwind.js'), // your tailwind configuration
         require('autoprefixer'),
     ]
 }

Run

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.

If you would like to join me, follow me on Twitter.

If you enjoyed this article, please help out your friends with a 💙 or a share.

I am Stefan Bauer, a Developer, Team-Leader, UI/UX Enthusiast and Bacon-Lover located Germany, Munich. I love PHP, Symfony, Laravel and great UI.

Originally published at stefanbauer.me.