#138 Responsive Layout with Sidebar and Navbar

08/08/2023

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!

1
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.