Tailwind on Rails

"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: github.com/corsego/138-tailwi...
Based on this blogpost: blog.corsego.com/tailwindcss-...
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!

[@josfk]

Excellent tutorial!!! Thank you!!! 🤗

[@repoles]

Amazing 🤩 Thank you for this!

[@faustonunes8423]

Really good video!

[@qualitygeek]

Thanks! This was quite instructive.

[@SupeRails]

Glad you liked it!

[@PeterBerkenbosch]

Love these kind of video's.. just the core thing you need. No distraction with anything else.. Thanks (and see you at RailsWorld :) )

[@SupeRails]

Thanks Peter, I'm glad you like this video style!
Be sure to find me and say hi on RailsWorld! 🤗🤩

[@zdebyman8100]

як ти засетапив студію щоб мати tailwind intellisense? які екстеншини ти юзаєш?

[@SupeRails]

bradlc.vscode-tailwindcss

[@jeanchavez6048]

Hola, tengo un problema, siempre que agrego una nueva clase tengo que hacer rails assets:precompile para poder ver los cambios, ¿hay alguna forma de evitar tener que hacer siempre esto y poder ver los cambios automaticamente?

[@SupeRails]

tienes que comenzar el rails app con "bin/dev", no "rails s".
"bin/dev" = "rails s" + "bin/rails tailwindcss:watch"

[@jeanchavez6048]

@@SupeRails Muchas gracias, pero no me funcionó, incluso los cambios que hago en los controladores de stimulus cambian, siempre debo hacer rails assets:precompile para ver cambios de css, tailwind o stimulus. ¿Hay alguna manera de corregir esto? es muy cansado

[@SupeRails]

add these lines in config/development.rb:
config.assets.quiet = false
config.assets.debug = true
config.assets.compile = true