TailwindCSS with Webpack Encore

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Use Tailwind to increase your development speed

Installing Tailwind

Tailwind, like any other framework, is available on a CDN, but you can configure it yourself,

Simply by running this command

# Using npm
npm install --dev @symfony/webpack-encore autoprefixer postcss-loader tailwindcss
# Using Yarn 
yarn add --dev @symfony/webpack-encore autoprefixer postcss-loader tailwindcss

Next, we need to generate the tailwind.config.js file:

npx tailwindcss init

Here you can add colors, edit font stack, and much more

Use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

I use Symfony for most of my projects, so for compiling my assets I always use Webpack. Here’s how you would set up Tailwind with webpack-encore:

You’ll want to add Tailwind as a PostCSS plugin in your build chain.

Generally, this means adding Tailwind as a plugin in your postcss.config.js file:

module.exports = {   
     plugins: [     
          require('tailwindcss'),   
     ] 
}

and inwebpack.encore.js we need to enable the PostCSS loader

// ...
.enablePostCssLoader()
// ...

You can also pass options into the PostCSS loader by passing a callback, as per the Encore PostCSS docs:

Encore.enablePostCssLoader(function(options) { 
  options.config = {     
     path: 'postcss.config.js'   
  } 
})

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

npm run watch

In conclusion

Tailwind provides a great developer experience and with webpack-encore it is especially easy to set up.