styled_input

# app/views/rooms/show.html.erb

<%= turbo_stream_from @room %>
<%= turbo_stream_from [current_user, @room] %>

<div class="flex flex-col justify-between h-grow">
  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8" id="chat-container">
    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8" id="room_<%= @room.id %>_messages">
      <%= render partial: "messages/message", collection: @messages, locals: { user: current_user } %>
    </div>
  </div>

  <%= form_with model: @new_message, data: { controller: "chat_refresh", action: "turbo:submit-end->chat_refresh#clearInput" } do |f| %>
    <div class="rounded-md shadow-sm -space-y-px">
      <%= f.text_field :body, autofocus: true, required: true, placeholder: "Your text", class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" %>
      <%= f.hidden_field :room_id, value: @room.id %>
  <% end %>
</div>


# app/assets/stylesheets/application.tailwind.css
.h-grow {
  height: calc(100vh - 13rem);
}