Tailwind Classes not being picked up while developing

[fabiannabi]

Tailwind classes are not being picked up automatically by the browser while developing, specially the breakpoints for different screen sizes

To make it work you have to stop your application, manually run rake assets:precompile and the rails s again, only then changes will take effect.

Example:

Before the manual reset

<div class="hidden sm:flex justify-between items-center  bg-purple-800 md:bg-green-500 lg:blue-500 xl:bg-orange-500 ">
  <h1 class="text-2xl font-medium">New Chat</h1>
</div>

this will only show the Purple color on every screen size, even though it's explicit on the rules

After the manual reset

<div class="hidden sm:flex justify-between items-center  bg-purple-800 md:bg-green-500 lg:blue-500 xl:bg-orange-500 ">
  <h1 class="text-2xl font-medium">New Chat</h1>
</div>

Will show the different colors in the breakpoints

[fabiannabi]

@obie I opened this issue thinking it's a bug, that I could not see changes into the styles being applied instantly after changing the code

After I chat with @aldompe95 he suggested running bin/dev and works perfectly. Another way to accomplish this is by setting up a watcher rails tailwindcss:watch in another shell and running the server separately.

I think rather than a bug, this could be and improve to the READ ME to be more clear and explicit on the way to fire up the app into development. WDYT?

[fabiannabi]

Not an Issue, just the new way to run Rails 7 app, will update the README just to have an explicit note in there for anyone new to the technology