For a new project I finally got a chance to explore
Tailwind CSS. A utility-first CSS
framework you’ve most likely heard of before.
I tried to find the smallest amount of steps needed to get Tailwind working in a fresh, yet deployable Rails 6 application. Tailwind generates a bazillion CSS classes, so clearing out all the unused ones is a must-do for production deployments and therefore included in the following steps via PurgeCSS.
Installing the needed tools
The following creates a new rails application with webpack included by default. I’m choosing PostgreSQL as database to allow deployments to Heroku right away. But feel free to pick something else.
$ rails new freshwind -d postgresql $ cd freshwind $ yarn add tailwindcss --dev $ yarn add @fullhuman/postcss-purgecss --dev
I’m providing a Git patch at the end of this article you can apply
rails new ....
From here on I’m basically following the
official installation guide
adjusted to Rails. PurgeCSS is only run on production builds. I’m still using
regular Rails views in
./app/views/**/*.html.erb. Extend the
with more paths for React, Vue, etc.
Starting to use TailwindCSS
At this point TailwindCSS is installed. Let’s adjust the default Rails layout
to start making use of it. In development
stylesheet_pack_tag will return
while all your CSS is delivered through the JS pack. You can control this with
Deployment to Heroku
Allow Heroku to make use of modules in
$ heroku config:set NPM_CONFIG_PRODUCTION=false
Apply everything mentioned here via patch file.