#138 Responsive Layout with Sidebar and Navbar
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
Featured in playlists
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!