September 6, 2023

Using Jumpstart Pro without Tailwind

My talented pal Narath recommended using Jumpstart Pro for my next Ruby on Rails side project, and it was excellent advice.

There has been a bit of a learning curve coming from bare-metal Rails, where the challenge is bringing in all the right third-party gems and frameworks. With all that Jumpstart includes out of the box, my challenge is to determine what I want to keep and what’s getting in my way.

Take Tailwind. I’ve encountered a couple real Tailwind promoters, and I’m impressed with what they can achieve with it. But having just left the Bootstrap world in favor of custom-built design systems, Tailwind feels like a step backward for me – dozens or hundreds of CSS class references in every ERB file, making the HTML much more repetitive, less semantic, and harder to read.

So if you’re like me, and you want to write your own minimal, clean CSS, here’s how I’ve constrained Tailwind to only the administrate area and enabled SASS for my application.

Move/rename the application.tailwind.css into the administrate subfolder

 ~ cd your-app-name
 ~ mv app/assets/stylesheets/application.tailwind.css app/assets/stylesheets/administrate/tailwind.css

Move all the components CSS into administrate/components

 ~ mv app/assets/stylesheets/components/* app/assets/stylesheets/administrate/components
 ~ rmdir app/assets/stylesheets/components

Add SASS to the project with rails css:install:sass (ignoring the warnings)
```
 ~ rails css:install:sass
```

Update the build:css script in package.json to compile both Tailwind and SASS. (Put the sass command second so that it can receive the --watch option passed through Procfile.dev)

 {
   "scripts": {
   	"build:css": "tailwindcss --postcss --minify -i ./app/assets/stylesheets/administrate/tailwind.css -o ./app/assets/builds/tailwind.css && sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
   	"build": "..."
   }
 }

Test your change by running yarn run build:css
Update the admin/application/_stylesheet.html.erb to use the new tailwind CSS instead of application.
```
 <%= stylesheet_link_tag "tailwind", media: "all", "data-turbo-track": "reload" %>
```
Start writing application (S)CSS in application.sass.scss!

← → Top