One common task when starting a new Rails application is to integrate with a CSS library or design framework. Because the CSS landscape has enjoyed quite a bit of expansion over the past few years, one of the more recent popular design frameworks is Tailwind CSS.
With that in mind, the focus of this tutorial is to go through the process of adding tailwindcss to your Rails 6 project.
Let’s dive in!
Open your shell and head to your favorite project directory. Then let’s rails new
the project!
1
rails new rails-use-tailwindcss
Once Rails and the bundler finish setting up the new project, let’s get it committed to the git
repository that
Rails initializes for you.
1
2
3
cd rails-use-tailwindcss
git add .
git commit -m "initial commit"
NB: I may forget to write / mention it from time to time, but it’s *usually* a good idea to “sanity check” your
system configuration by running bin/rails s
before you do anything else, just to quickly verify your app loads
ok.
To help deal with CSS and JavaScript for your Rails application, a default Rails 6 project comes with 2 front end technologies: Yarn and Webpack:
Yarn is a package manager, which is a tool similar to Bundler for Rails, only we strictly use it for JavaScript packages. While Webpack is a utility that takes all of our JavaScript, CSS, and creates an optimized JavaScript “blob” for us to use. Try not to worry if that wording didn’t make too much sense, as you start using them you begin to see where they fit into the overall picture.
Back on the command line, use Yarn to install Tailwind CSS.
1
yarn add tailwindcss
Once yarn finishes installing everything, you need to create a new folder and file:
1
2
mkdir app/javascript/css
touch app/javascript/css/application.css
To the newly created application.css
, you need to add some basic tailwindcss
imports:
1
2
3
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
now make use of tailwind
itself to generate a configuration file,
1
yarn tailwind init app/javascript/css/tailwind.js
With those updates to the CSS, it’s time to add a new stylesheet_pack_tag
to the main application layout. Open
app/views/layouts/application.html.erb
, and add a new entry under the original two:
1
2
3
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
In order to ensure the new CSS files we’ve created make it into the application javascript pack, we need to add a reference to it.
Open up app/javascript/packs/application.js
and add a new require
at the end of the file:
1
require("../css/application.css")
We’re almost done. Tailwind makes use of Postcss
, so we need to make some modifications to the postcss.config.js
in
your application root. Open it up and update it to look like the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('tailwindcss')('./app/javascript/css/tailwind.js'),
require('autoprefixer'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
};
Let’s generate a static home page to verify our updated CSS setup.
1
rails g controller pages home
Update the root
Route in config/routes.rb
to use the new static page:
1
2
3
4
Rails.application.routes.draw do
get '/home' => 'pages#home'
root 'pages#home'
end
Finally, let’s put some basic Tailwind in the new app/views/pages/home.html.erb
view.
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="bg-white px-8 pt-2 shadow-md">
<div class="-mb-px flex justify-center">
<a class="no-underline text-teal-dark border-b-2 border-teal-dark uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
Home
</a>
<a class="no-underline text-grey-dark border-b-2 border-transparent uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
About
</a>
<a class="no-underline text-grey-dark border-b-2 border-transparent uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
Pricing
</a>
</div>
</nav>
You can find the code for this project on my github - https://github.com/erikyuzwa/rails-use-bootstrap