Since it took me more time than it should’ve and since ERB’s webpack configuration is quite convoluted, I decided to share with you how I did to add TailwindCSS to my ERB project.

The following steps may vary with future versions but the base should be quite similar.

Firstly, I installed the dependencies

yarn add tailwindcss postcss-loader autoprefixer postcss -D

Next, I created a `postcss.config.js` file with the following config and placed it at the root:

module.exports = {  
   plugins: \[require(‘tailwindcss’), require(‘autoprefixer’)\]  
}

Followed by an empty `tailwind.config.js` file also placed at the root:

module.exports = {  
   theme: {},  
   variants: {},  
   plugins: \[\]  
}

Then I added the rule after css-loader rule in webpack.config.renderer.dev.babel.js

{  
 loader: ‘postcss-loader’,  
 options: {  
 postcssOptions: {  
 plugins: \[require(‘tailwindcss’), require(‘autoprefixer’)\],  
 },  
 }  
}

[Pastebin of the full config file]

And for a measure of good sake also I did the same after sass-loader in webpack.config.renderer.prod.babel.js

{  
 loader: ‘postcss-loader’,  
 options: {  
 postcssOptions: {  
 plugins: \[require(‘tailwindcss’), require(‘autoprefixer’)\],  
 },  
 }  
}

[Pastebin of the full config file]

Lastly, I added the following tailwind imports to app.global.css

[@tailwind](http://twitter.com/tailwind "Twitter profile for @tailwind") base;  
[@tailwind](http://twitter.com/tailwind "Twitter profile for @tailwind") components;  
[@tailwind](http://twitter.com/tailwind "Twitter profile for @tailwind") utilities;

And to test it out I added the following to my App.tsx component

<div className=”absolute inset-0 bg-white text-center h-full flex flex-col justify justify-center”>ERB + TAILWIND = ❤</div>

And rejoice!

ERB + TAILWIND = ❤

Thank you a lot for reading and I hope I spared you some time and as always don’t forget to drink water!