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