Set up Tailwind CSS JIT in a Rails project to compile styles 20x faster

07/04/2021
1.521

Tailwind CSS gained quite a lot of traction in the world of Ruby and Rails. We even have the official tailwindcss-rails gem blessed by DHH himself that you can use with good ol’ Asset Pipeline if, for some reason, you stay away from Webpacker, ES6 modules, and processing CSS with webpack.I joined the Tailwind army about a year ago when I started working on a new demo application for AnyCable. I was amazed by the powerful yet simple development flow: fast prototyping via Tailwind Play, componentization via @apply, and the built-in PurgeCSS integration for smaller compiled CSS files.Everything seemed perfect except for the one thing: a bit slower re-compilation in development (using webpack-dev-server) than I expected. The reason was that Webpack had to recompile all the Tailwind CSS styles whenever anything changed in the bundle. You can read more about the problem and the possible workaround in this article.
Set up Tailwind CSS JIT in a Rails project to compile styles 20x faster #ruby #rubydeveloper #rubyonrails #css #tailwind https://rubyonrails.ba/single/set-up-tailwind-css-jit-in-a-rails-project-to-compile-styles-20x-faster