Devise Part 3: Updating Our Devise Views With Tailwind CSS
Published: Mar 7, 2022
Last updated: Mar 7, 2022
In the previous post (part two), we changed our Devise setup to use Redis for sessions. This will be required going forward (but feel free to swap back to the cookie store).
Today, we will take a quick pivot to beautify our sign in page using TailwindCSS and TailwindUI.
We are going to specifically implement the demo sign in component that comes for free.
Some familiarity with TailwindCSS would be useful as we won't really cover how it works.
Getting started
We will be working from the source code found here.
# Clone and change into the project
$ git clone https://github.com/okeeffed/demo-rails-7-with-devise-series
$ cd demo-rails-7-with-devise-series
# Continue from part 2 - warning that Redis required
$ git checkout 2-using-redis-sessions
# Add required gems and setup the files
$ bundler add tailwindcss-rails
$ bin/rails tailwindcss:install
# We want to update our Devise views, so we will need to scaffold them
$ bin/rails generate devise:views
Note that since we want to update our Devise views, we will need to scaffold them. This is done in the last command of the above.
The bin/rails tailwindcss:install went ahead and added a bin/dev file and updated our Procfile.dev to run a command to watch TailwindCSS.
To see the fruits of our labor, start the server with bin/dev (instead of bin/rails s).
Updating our Devise views
I went ahead and did a lot of the work for our Devise view here in converting over the desired component to ERB.
Update app/views/devise/sessions/new.html.erb to the following:
If you now refresh the page, we will have a lovely component in place of what we had before!
Before
...and after:
After
Go through the normal flow of sign-in to confirm that it all works as expected from the previous parts.
Summary
In this part, we detoured to add in Tailwind CSS and make our sign in page look a little livelier.
Although we do not cover it, you could take this further by beautifying the other sign up page that we have (you'll notice it still looks crummy) but I won't be doing that here as we can confirm that Tailwind is up and working.