Rails Kickoff – Tailwind
A rapid Rails 6 application template for personal use. This particular template utilizes Tailwind CSS, a utility-first CSS framework for rapid UI development.
Need version 5.2.3 support? Check out this branch
Tailwind depends on Webpack so this also comes bundled with webpacker support.
Be sure to also check out Jumpstart Pro to save loads of time creating your next Rails application. Chris, Jason, and I teamed up on it.
Tailwind CSS by default
With Rails 6 we have webpacker by default now. Using PostCSS we can install Tailwind as a base CSS framework to harness. I prefer Tailwind due to it's un-opinionated approach.
How it works
When creating a new rails app simply pass the template file through.
Creating a new app
$ rails new sample_app -d <postgresql, mysql, sqlite3> -m template.rb
Once installed what do I get?
- Webpack support + Tailwind CSS configured in the
- Devise with a new
namefield already migrated in. The name field maps to the
last_namefields in the database thanks to the
- Enhanced views using Tailwind CSS.
- Support for Friendly IDs thanks to the handy friendly_id gem. Note that you'll still need to do some work inside your models for this to work. This template installs the gem and runs the associated generator.
- Optional Foreman support thanks to a
Procfile. Once you scaffold the template, run
foreman startto initalize and head to
bin/webpack-dev-serverrunning all in one terminal instance. Note: Webpack will still compile down with just
rails serverif you don't want to use Foreman. Foreman needs to be installed as a global gem on your system for this to work. i.e.
gem install foreman
- A custom scaffold view template when generating theme resources (Work in progress).
- Git initialization out of the box
- PurgeCSS configuration to help with CSS file sizes
- Custom defaults for button and form elements
Boot it up
$ rails server
Boot it up (with foreman)
foreman start. Head to
locahost:5000 to see your app. You'll have hot reloading on
scss/sass files by default. Feel free to configure to look for more to compile reload as your app scales.