Patrick Rodrigues
Patrick's Public Grimoire

Patrick's Public Grimoire

Add Tailwind CSS to the popular Electron React Boilerplate (ERB)

Patrick Rodrigues's photo
Patrick Rodrigues
·Mar 25, 2021·

2 min read

Add Tailwind CSS to the popular Electron React Boilerplate (ERB)

Subscribe to my newsletter and never miss my upcoming articles

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!

 
Share this