Alpha preview: Rails 7 w/ esbuild + Tailwind CSS

[@alphalion188]

Just what I needed! It's 2023 and this works perfectly.

[@TTV5]

Javascript has been a bit confusing/scattered on Rails for a while now, even when we've tried to opt for going by the conventions as much as possible. That has really been the main pain for me with an otherwise amazing framework. Looks like you're in the process of nailing this too!

[@ddevulders]

I couldn't agree more, the introduction of the asset pipeline always felt a bit clunky to begin with and the integration of packagers like yarn or webpack in more recent versions of Rails feel like they're made to fit instead of a seamless addition. I've spent quite some time back in the days figuring out all of the micro interactions which makes Rails such a good framework to work with and I like to call myself a "convention over configuration purist". So having to manually define javascript paths to serve them at runtime and restarting my server always feels so incredibly dirty. Oh and fonts, don't get me started on fonts.

[@leehericks5934]

Glorious. I've really enjoyed watching this shape up over the last month David!

[@jonocodes]

I’m glad they took this idea from Phoenix

[@Rekefa]

This looks amazing! I was a little worried about the hotwire default, but now this allows a lot of new opportunities for rails

[@fabiannot]

Nice… I was studying tailwind on a elixir Phoenix project.. so, seeing that addon on Rails is awesome 😎

[@chrisr236]

I've heard they do something interesting with Docker to develop at Basecamp. I'm eager for DHH to show us and possibly release something useful to help us :-)

[@potloodgum]

Really good stuff, can't wait!

[@martthth]

I'm looking forward for this!

[@TheThiagovsk]

Looks cool! Gj

[@arthurkelley]

rails 7 looks very promising, hope it will drive new life to RoR, DHH has a very good vision how should modern development look

[@dam13n]

Looking forward to this!

[@agonights]

Simpler is better , love this setup

[@mezzodoodle]

Love this setup!

[@Mixesha001]

That's awesome. I like the direction. Webpack was great but with time it was adding too much complexity.

[@GG-bv4ou]

Wait.. how did the "class" attribute work in jsx? Isn't it supposed to be "className" instead? So confused

[@vanopiano]

What is you remove "font-extrabold" from html.erb. Will it recompile css without font-extrabold included or it also watches JSX components css usage?

[@dupre7416]

I 💘 Rails! I've been coding in Rails for 10+ years and I've only ever used it as my back-end API. Well, except a few tutorials and a silly side project for scrum poker 🃏. Maybe I'll try a Rails front-end project with Rails 7.

[@andrewoko-odion5492]

This does not tell one, how to get in data into the react component

[@k776]

With these changes, would be nice to move app/javascript back to app/assets/javascript

[@RyanJeffB]

Looking forward to this. but I hope this will not have issue to other browser! Kudos!

[@aftakitani]

Awesome!!! Thanks!

[@ytflix776]

What if your JSX conditionally adds a class to some div? Will Tailwind include it in the pruned set of classes?

[@coldfire144]

as long as the class name is written in full and not partially interpolated or concatenations of two strings. Ex. Will be included in output: const fontweights = [ 'font-normal', 'font-bold']; . Will not be included in output: const fontWeights = ['normal', 'bold']; .

[@karthikeyanak9460]

All the best.

[@MiguelPeniche]

How can we add another css eg. "custom.css" and compile it so we can use it in other layout?

[@al-mokhtar_]

*Nice!!!!!!!!!* ruby-rails forever

[@koviniskaciukas]

Is the importmaps shim available somewhere or is it custom built for rails? I have trouble finding it for download.

[@davidheinemeierhansson9989]

github.com/guybedford/es-module-shims/

[@farenrai576]

Hi David Rails7 is awsome all the hotwaire , esbuild + Tailwind css , all picess of libray can integrated . still i search not find easy ways to integrate Typescript in Rails officialy also

[@ryanceasarborromeo2240]

Can you make a tutorial using Vue please. Thanks

[@vesh95]

Гениально! Пол часа разговаривать а потом накопипастить кода и сказать "Мое изобретение!"

[@w1d3r75]

Awesome

[@dorkedorke]

wow!

[@whyimustusemyrealname3801]

I still like ur omakase

[@anagoo1278]

no binding.pry with bin/dev... Please don't make me do more things to get default behavior working.

TextMate

[@cutevegan3621]

why not use windicss instead of tailwind? tailwindcss author stole a feature and didnt even credit windicss author. Thats disheartening

[@Mankepanke]

Stole? What does that mean? License violation?

[@rafasoaresms]

@@openHRza Tailwind UI, the UI components library is paid. Tailwind CSS, the utility CSS framework is free and open-source. That said, I'm not a fan of using it by default either - but that's personal preference.