Stefan Bauer
Developer and Creator of PingPing.io, a simple website monitoring.
Blog Building PingPing About

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') // 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.

Imprint Cookie Policy Privacy Policy
Proudly hosted with Vultr