DEV Community

Heithem Moumni
Heithem Moumni

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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'),   
     ] 
}
Enter fullscreen mode Exit fullscreen mode

and in webpack.encore.js we need to enable the PostCSS loader

// ...
.enablePostCssLoader()
// ...
Enter fullscreen mode Exit fullscreen mode

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'   
  } 
})
Enter fullscreen mode Exit fullscreen mode

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

npm run watch
Enter fullscreen mode Exit fullscreen mode

In conclusion

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

Top comments (0)