Tailwind on Rails
HTML-код
- Опубликовано: 7 июн 2024
- "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!
Excellent tutorial!!! Thank you!!! 🤗
Amazing 🤩 Thank you for this!
Love these kind of video's.. just the core thing you need. No distraction with anything else.. Thanks (and see you at RailsWorld :) )
Thanks Peter, I'm glad you like this video style!
Be sure to find me and say hi on RailsWorld! 🤗🤩
Really good video!
Thanks! This was quite instructive.
Glad you liked it!
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?
tienes que comenzar el rails app con "bin/dev", no "rails s".
"bin/dev" = "rails s" + "bin/rails tailwindcss:watch"
@@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
add these lines in config/development.rb:
config.assets.quiet = false
config.assets.debug = true
config.assets.compile = true
як ти засетапив студію щоб мати tailwind intellisense? які екстеншини ти юзаєш?
bradlc.vscode-tailwindcss