TailwindCSS and Symfony’s Webpack Encore

A quick guide to integrating TailwindCSS into Webpack encore

Amir Bizimana

Published in

Better Programming

2 min readJan 3, 2020

I recently had the chance to choose and work with the TailwindCSS framework for a project at work.

After some initial hesitation about its utility-first CSS concept, I conducted a bit more research and interacted with the tailwind community. I eventually came away with enough buy-in to revise my initial judgement and give it a shot.

A most pleasant experience!

I’m currently working on a project that uses PHP’s Symfony framework on the backend and was tasked with integrating Tailwind into Webpack encore, Symfony’s version of Webpack.

Here’s how I went about integrating them.

Dependencies

First, we need to install a couple of dependencies:

tailwindcss itself.
A package called postcss-loader required by tailwind.
The autoprefixer package that helps with vendor prefixes.

Assuming you already have Webpack-encore installed, you can remove @symfony/webpack-encore, otherwise, all dependencies stowed together, we end up with the following command:

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

Composer being our package manager. I’m using theyarn addcommand but the same outcome could be achieved with npm via npm install.

Configuration

There are four files I configured and/or created:

tailwind.css
tailwind.config.js
postcss.config.js
webpack.config.js

tailwind.css: I created this file under my project’s CSS assets directory — assets/css/tailwind.css — but you can put it anywhere you like. The “@tailwind” directive injects the base, components, and utilities styles into your CSS.

tailwind.config.js: This file is optional, but if you need to customize tailwind in any way (e.g., adding a prefix to class names, customizing a colour or font size, etc), you’ll need to create this file via the tailwind CLI by running npx tailwind init. This will generate the file in your root folder.

postcss.config.js: I created this file in the root of my project. This is where we specify the PostCSS plugins we want to use to process our CSS.

webpack.config.js: If you were already using Webpack-encore, the file should already be configured, otherwise this could help. The config for this file was just as swift as the others: I added .addStyleEntry('tailwind', './assets/css/tailwind.css') pointing to our injected styles in tailwind.css and enabled PostCSS loader, as shown below:

Templates

Twig is the templating engine for our project, hence I also had to include an encore_entry_link_tags() function in my base.html.twig template file. This is pretty much like adding a style sheet link, so if you forget to include it and start writing your classes, nothing will happen and madness will ensue.

Voila!

You can now run yarn run dev for your dev environment or yarn run build for production and you should be good to style away! I hope this little guide was helpful.