Hotwire includes the Stimulus project for JS "sprinkles".
See: https://stimulus.hotwired.dev

and https://stimulus.hotwired.dev/handbook/origin
for some background.

Our immediate task is to visually identify the active tab
(either today, tomorrow or the day after tomorrow). We'll
add an `.active` class to the appropriate tab,
e.g. `.tab.tomorrow.active`.

Let's see if we can do this in a low code way which is easy
to maintain using Stimulus...

We define a JS TagController which is instantated 3
times, once for each tag.

There's some magic (or convention) being used here:

TARGET

`static targets = [ "day" ]` identifies the DOM element
to which we wish to bind: `"data-tab-target" = "day"`

We then refer to this element with `this.dayTarget`

CLASS HELPER

`static classes = [ "active" ]`

similar to the `dayTarget` we can now reference our active
class as `this.activeClass`

As we've now got 4 data attributes I've used the Rails
[`tag()` method][] so that we can group our data attributes
under the `data` key which I think helps readability:

```
<%= tag.div class: "tab py-4 ...",
data: {
  date: forecast.date.to_s,
  controller: "tab",
  "tab-active-class": "active",
  "tab-target": "day"
} do
%>
```

[`tag()` method][]:
https://apidock.com/rails/ActionView/Helpers/TagHelper/tag

https://tailwindcss.com/docs/functions-and-directives#apply

I have also changed made the text colour for the inactive tabs slightly darker so that it is more readable.