How to use TailwindCSS with Symfony's Encore // Stefan Bauer

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:

package.json

{
    "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

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!

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') // your js entry file
    .addStyleEntry('css/app', './assets/less/app.less') // your less/scss entry file

    .enableLessLoader()
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

postcss.config.js

let tailwindcss = require('tailwindcss');

 module.exports = {
     plugins: [
         tailwindcss('tailwind.js'), // your tailwind.js configuration file path
         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.