Tailwind on Rails #138 Responsive Layout with Sidebar and Navbar

08/08/2023 (8 months ago)

Tailwind CSS: It looks awful, and it works. - Adam Wathan, TailwindCSS creator

As of Rails 7, you can automatically install TailwindCSS when generating a new rails app by running rails new -c=tailwind -d=postgresql.

I am super excited that just like me, Adam will be also speaking on Rails World!

In this mini-series I will cover the main aspects of using TailwindCSS when building a Rails app.

When you create a new Rails app, FIRST OF ALL you want to figure out navigation (navbar, sidebar, footer) and UI responsiveness (make it work on all screen sizes).

Let’s build a responsive layout with a sidebar that is replaced by a dropdown on a small screen.

Episode source code: https://github.com/corsego/138-tailwind-layout/commit/45240dcc6e819919eb53a1a82350c1b3230dad91
Based on this blogpost: https://blog.corsego.com/tailwindcss-layout

0:00 Intro
1:15 Demo of Responsive Layout
1:50 Create Rails app with TailwindCSS by default
3:40 Build sticky Navbar and Sidebar
11:40 Responsive layout, hide Sidebar on small screen
14:10 Add dropdown icon on small screen
16:00 It works!

Sign in to join the conversation