Updates
- Sunday, November 29 2020: Updated for TailwindCSS 2.x PostCSS 7 compatibility.
Starting your new Rails 6 app
Getting started on a new Rails 6.x app and want the latest TailwindCSS, Webpack, and Stimulus as your base development stack?
Look no further! This article is all you need.
I'll keep updating it over the course of the next couple of weeks as a few compatibility issues will be resolved.
Installation and generator commands are included below. As well as Tailwind configuration files you need to add or modify for Rails specifically. I've also included references to any upstream documentation.
Let's get started.
Installing Rails 6.x
At the time of writing the latest Rails release is 6.0.3.4 and latest RC is 6.1.0.rc1.
Install or update your local Rails gem with:
$ gem install rails
Generating the Rails app with Webpack, Stimulus, and PostgreSQL
Here's the Rails app generator command I use:
$ rails new mynewapp --database=postgresql --webpack=stimulus
$ cd mynewapp
Yarn add TailwindCSS with a PostCSS compatibility fix
First, add TailwindCSS to your Rails app via Yarn (and not via npm). You will be installing TailwindCSS as a PostCSS Plugin because that's how you do JavaScript libraries in Rails.
In addition, you need install a TailwindCSS compatibility build that works with PostCSS 7. As Rails is not on the required PostCSS 8 yet.
Run the following command and select 2.0.1-compat as the version to install.
$ yarn add tailwindcss@comp
yarn add v1.22.4
info No lockfile found.
[1/4] š Resolving packages...
Couldn't find any versions for "tailwindcss" that matches "comp"
? Please choose a version of "tailwindcss" from this list:
2.0.1
āÆ 2.0.1-compat
2.0.0
2.0.0-compat
Add TailwindCSS to PostCSS config
Edit the generated postcss.config.js in your Rails app and add the tailwindcss and autoprefixer requires. You'll add a configuration parameter to the tailwindcss require to tell TailwindCSS where to look for its configuration file.
Create the TailwindCSS config file with Inter font and Forms plugin
Create the tailwind.config.js configuration file in app/javascripts and set it to use the Inter font as recommended in the Tailwind UI documentation. I've also added in the @tailwindcss/forms :
Add TailwindCSS Forms plugin with Yarn
At this stage your bin/webpack-dev-server won't start unless you add the tailwindcss/forms plugin to your app:
$ yarn add @tailwindcss/forms
Add TailwindCSS imports to your JavaScript pack
This article uses the setup where we combine the Javascript and CSS of the app into one pack. So we will include the TailwindCSS import directive directly into the top-level app/packs/application.js file:
Update your application layout's CSS include for a combined JavaScript/CSS Pack
Rename the stylesheet_link_tag to stylesheet_pack_tag in your application.html.erb to make sure your CSS is loaded in.
Create and migrate your initial database
The app we generated at the start of this article uses a PostgreSQL database. Run the initial database creation and migration to get started!
$ bin/rails db:create
$ bin/rails db:migrate
That's it! Please definitely let me know if you've used this article. And also if you're experiencing any troubles ā I can add a troubleshooting section then.
You can reach me on Twitter or via email at michiel [at] hey [dot] com.
See you in the next one.
ā Michiel
Top comments (5)
Thank you Michiel!
I was struggling a lot but your tutorial was very helpful!
Great to hear that Joaquin!
I followed the steps and for some reason it didn't work, so looking I found the following fix:
from application.jsDelete
Run
Hi Eduardo,
I think I don't have a
import "components"
in my application.js at the time of writing.
Maybe this is something added in a newer version of Rails or related to a different JS framework you are using. could that be it?
Michiel, Thanks for writing this. I tried a few other tutorials and this got me up and running on Tailwind 2/Rails 6.1 nicely. Thanks, Joel