Add Tailwind CSS to the popular Electron React Boilerplate (ERB)
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!