- Sunday, November 29 2020: Updated for TailwindCSS 2.x PostCSS 7 compatibility.
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.
At the time of writing the latest Rails release is 188.8.131.52 and latest RC is 6.1.0.rc1.
Install or update your local Rails gem with:
$ gem install rails
Here's the Rails app generator command I use:
$ rails new mynewapp --database=postgresql --webpack=stimulus $ cd mynewapp
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
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.
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
Rename the stylesheet_link_tag to stylesheet_pack_tag in your application.html.erb to make sure your CSS is loaded in.
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.