Adding Basic Tailwind CSS Support to Rails6
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!
Assumptions & Goals
- You are on a system that has Ruby on Rails 6 setup and available to you
- We want to have TailwindCSS available for use with our front end
Open your shell and head to your favorite project directory. Then let’s
rails new the project!
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.
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
add Tailwind CSS via Yarn
Back on the command line, use Yarn to install Tailwind CSS.
yarn add tailwindcss
generate a Tailwind configuration file
Once yarn finishes installing everything, you need to create a new folder and file:
To the newly created
application.css, you need to add some basic
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
now make use of
tailwind itself to generate a configuration file,
updating the main application layout
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:
require at the end of the file:
updating the postcss.config.js
We’re almost done. Tailwind makes use of
Postcss, so we need to make some modifications to the
your application root. Open it up and update it to look like the following:
generate a static home page
Let’s generate a static home page to verify our updated CSS setup.
rails g controller pages home
root Route in
config/routes.rb to use the new static page:
Rails.application.routes.draw do get '/home' => 'pages#home' root 'pages#home' end
Finally, let’s put some basic Tailwind in the new
<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