Upgrade Tailwind CSS from v3 to v4

Gemfile

@@ -16,7 +16,7 @@ gem 'turbo-rails'
 gem 'sprockets-rails'
 gem 'importmap-rails'
 gem 'initials'
-gem 'tailwindcss-rails'
+gem 'tailwindcss-rails', '~> 4.6'
 gem 'view_component'
 
 # Schedulers

Gemfile.lock

@@ -429,16 +429,14 @@ GEM
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)
     stringio (3.1.0)
-    tailwindcss-rails (2.3.0)
-      railties (>= 6.0.0)
-    tailwindcss-rails (2.3.0-aarch64-linux)
-      railties (>= 6.0.0)
-    tailwindcss-rails (2.3.0-arm64-darwin)
-      railties (>= 6.0.0)
-    tailwindcss-rails (2.3.0-x86_64-darwin)
-      railties (>= 6.0.0)
-    tailwindcss-rails (2.3.0-x86_64-linux)
-      railties (>= 6.0.0)
+    tailwindcss-rails (4.6.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.3.3)
+    tailwindcss-ruby (4.3.3-aarch64-linux-gnu)
+    tailwindcss-ruby (4.3.3-arm64-darwin)
+    tailwindcss-ruby (4.3.3-x86_64-darwin)
+    tailwindcss-ruby (4.3.3-x86_64-linux-gnu)
     thor (1.3.1)
     timeout (0.4.1)
     tsort (0.2.0)
@@ -531,7 +529,7 @@ DEPENDENCIES
   simplecov
   sprockets-rails
   stimulus-rails
-  tailwindcss-rails
+  tailwindcss-rails (~> 4.6)
   turbo-rails
   view_component
   web-console

app/assets/config/manifest.js

@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_directory ../fonts .woff2
 //= link_directory ../stylesheets .css
 //= link_tree ../builds
 //= link tailwind.css

app/assets/stylesheets/application.css

@@ -15,9 +15,9 @@
  */
 
 :target {
-    // TODO
+    /* TODO */
 }
 
 input[type="submit"] {
     cursor: pointer;
-}
+}

app/assets/tailwind/application.css

@@ -0,0 +1,86 @@
+@import 'tailwindcss' source(none);
+@import './fonts.css';
+
+/* Keep the same source scope as the former JavaScript configuration. */
+@source '../../../public/*.html';
+@source '../../../app/helpers/**/*.rb';
+@source '../../../app/javascript/**/*.js';
+@source '../../../app/views/**/*.{erb,haml,html,slim}';
+@source '../../../app/components/**/*.{rb,erb,haml,html,slim}';
+
+/* Colour utilities composed at runtime from Colorized.colors (tags, boxes,
+   filter colour pickers). Add any new dynamically composed colour utilities here. */
+@source inline("bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100}");
+@source inline("text-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-600");
+@source inline("border-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-400");
+@source inline("ring-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-500/10");
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --font-sans:
+    'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
+
+input:-webkit-autofill,
+input:-webkit-autofill:enabled,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:enabled,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:enabled,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 30px #ffffff inset;
+}
+.todo:after {
+  @apply hidden hover:block absolute bg-gray-700 text-white rounded-sm p-1 text-xs;
+  content: 'Zatial neimplementovane';
+  /* Additional styles for positioning and visibility */
+}

app/assets/tailwind/fonts.css

@@ -0,0 +1,35 @@
+/* Inter's original Latin and Latin Extended subsets from tailwindcss-rails 2.3.0.
+   Self-hosted to preserve the font and Slovak glyphs without an external CDN.
+   See vendor/fonts/Inter-LICENSE.txt. */
+@font-face {
+  font-family: 'Inter var';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('Inter-roman.latin.var.woff2') format('woff2');
+  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
+}
+@font-face {
+  font-family: 'Inter var';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('Inter-roman.latin-ext.var.woff2') format('woff2');
+  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
+}
+@font-face {
+  font-family: 'Inter var';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('Inter-italic.latin.var.woff2') format('woff2');
+  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
+}
+@font-face {
+  font-family: 'Inter var';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('Inter-italic.latin-ext.var.woff2') format('woff2');
+  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
+}

app/components/admin/audit_logs/audit_log_table_component.html.erb

@@ -13,9 +13,9 @@
         </div>
         <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
           <% if @actor %>
-            <%= link_to 'Export CSV', admin_audit_logs_path(actor: @actor, format: 'csv'), class: "block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+            <%= link_to 'Export CSV', admin_audit_logs_path(actor: @actor, format: 'csv'), class: "block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
           <% elsif @message_thread %>
-            <%= link_to 'Export CSV', admin_audit_logs_path(message_thread: @message_thread, format: 'csv'), class: "block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+            <%= link_to 'Export CSV', admin_audit_logs_path(message_thread: @message_thread, format: 'csv'), class: "block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
           <% end %>
         </div>
       </div>

app/components/admin/feature_flags/feature_flags_list_row_component.html.erb

@@ -13,9 +13,9 @@
   </div>
   <%= form_with model: Current.tenant, url: admin_tenant_feature_flag_path(Current.tenant, @feature_flag), title: "Toggle feature state", method: :patch do |form| %>
     <%= form.hidden_field :enabled, value: !@enabled %>
-    <%= form.button name: @feature_flag, class: "#{@enabled ? "bg-indigo-600" : "bg-gray-200"} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2", role: :switch, aria: { checked: @enabled } do %>
+    <%= form.button name: @feature_flag, class: "#{@enabled ? "bg-indigo-600" : "bg-gray-200"} relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2", role: :switch, aria: { checked: @enabled } do %>
       <span class="sr-only">Use setting</span>
-      <span aria-hidden="true" class="<%= @enabled ? "translate-x-5" : "translate-x-0" %> pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+      <span aria-hidden="true" class="<%= @enabled ? "translate-x-5" : "translate-x-0" %> pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"></span>
     <% end %>
   <% end %>
 </div>

app/components/admin/groups/group_form_component.html.erb

@@ -1,17 +1,17 @@
 <div class="w-full p-4 flex-col justify-start items-start gap-4 inline-flex">
   <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
-    <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6">
-      <div class="flex flex-col justify-start items-start flex-grow relative">
-        <p class="self-stretch flex-grow w-[521px] text-xl font-semibold text-left text-gray-900"><%= @group.name %></p>
-        <p class="flex-grow-0 flex-shrink-0 text-xs text-left text-gray-500">Používatelia v skupine</p>
+    <div class="flex justify-start items-center self-stretch grow-0 shrink-0 overflow-hidden gap-4 p-6">
+      <div class="flex flex-col justify-start items-start grow relative">
+        <p class="self-stretch grow w-[521px] text-xl font-semibold text-left text-gray-900"><%= @group.name %></p>
+        <p class="grow-0 shrink-0 text-xs text-left text-gray-500">Používatelia v skupine</p>
       </div>
     </div>
-    <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0">
+    <div class="flex flex-col justify-start items-start self-stretch grow-0 shrink-0">
       <% if !@readonly %>
         <%= form_with url: search_non_members_admin_tenant_group_path(Current.tenant, @group),
                           data: { controller: 'debounce', debounce_target: 'form'},
-                          class: "flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200" do |form| %>
-          <div class="flex w-full items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
+                          class: "flex justify-start items-center self-stretch grow-0 shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200" do |form| %>
+          <div class="flex w-full items-center rounded-md shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
             <div class="p-2">
               <%= render Icons::MagnifyingGlassComponent.gray(size: "5") %>
             </div>

app/components/admin/groups/member_add_popup_component.html.erb

@@ -1,21 +1,21 @@
-<div class="flex flex-col absolute z-50 mt-2 w-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+<div class="flex flex-col absolute z-50 mt-2 w-200 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
   <div class="flex flex-col justify-start items-start overflow-hidden rounded-lg bg-white border border-gray-300" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
     <% if @users && @users.present? %>
-      <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-6 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
-        <div class="flex flex-col justify-start items-start flex-grow relative">
-          <p class="self-stretch flex-grow text-m font-semibold text-left text-gray-900">Pridaj používateľa do skupiny</p>
+      <div class="flex justify-start items-center self-stretch grow-0 shrink-0 overflow-hidden gap-6 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+        <div class="flex flex-col justify-start items-start grow relative">
+          <p class="self-stretch grow text-m font-semibold text-left text-gray-900">Pridaj používateľa do skupiny</p>
         </div>
         <%= render Common::CloseButtonComponent.new(link_to: edit_members_admin_tenant_group_path(Current.tenant, @group), target_frame: "modal") %>
       </div>
-      <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0">
+      <div class="flex flex-col justify-start items-start self-stretch grow-0 shrink-0">
         <div class="flex flex-col justify-start items-start self-stretch p-6 divide-y">
           <% @users.each do |user| %>
             <%= render Admin::Groups::UserAddComponent.new(user: user, group: @group) %>
           <% end %>
         </div>
       </div>
     <% else %>
-      <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+      <div class="flex justify-start items-center self-stretch grow-0 shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
         <%= 'Používateľ nenájdený' %>
       </div>
     <% end %>

app/components/admin/groups/new_group_form_component.html.erb

@@ -1,29 +1,29 @@
 <%= tag.turbo_frame id: "modal" do %>
   <div class="fixed inset-0 z-40 p-2" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 transition-opacity bg-gray-400 bg-opacity-75" aria-hidden="true"></div>
+    <div class="fixed inset-0 transition-opacity bg-gray-400/75" aria-hidden="true"></div>
     <div class="relative flex items-center justify-center h-full">
       <div class="flex flex-col justify-start items-start overflow-hidden rounded-lg bg-white border border-gray-300" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
-        <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
-          <div class="flex flex-col justify-start items-start flex-grow relative">
-            <p class="self-stretch flex-grow-0 flex-shrink-0 text-xl font-semibold text-left text-gray-900">Nová skupina</p>
-            <p class="flex-grow-0 flex-shrink-0 text-xs text-left text-gray-500">Názov skupiny</p>
+        <div class="flex justify-start items-center self-stretch grow-0 shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+          <div class="flex flex-col justify-start items-start grow relative">
+            <p class="self-stretch grow-0 shrink-0 text-xl font-semibold text-left text-gray-900">Nová skupina</p>
+            <p class="grow-0 shrink-0 text-xs text-left text-gray-500">Názov skupiny</p>
           </div>
           <%= render Common::CloseButtonComponent.new(link_to: admin_tenant_groups_path(Current.tenant)) %>
         </div>
         <%= form_with model: [:admin, Current.tenant, @group], url: admin_tenant_groups_path(Current.tenant, @group) do |form| %>
-          <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0 w-400">
-            <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
-              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.text_field :name, placeholder: "Názov skupiny", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+          <div class="flex flex-col justify-start items-start self-stretch grow-0 shrink-0 w-400">
+            <div class="flex justify-start items-center self-stretch grow-0 shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+              <div class="flex flex-col justify-start items-start self-stretch grow overflow-hidden gap-2 rounded-md">
+                <%= form.text_field :name, placeholder: "Názov skupiny", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
           </div>
-          <div class="flex justify-start items-start self-stretch flex-grow-0 flex-shrink-0 gap-2 p-6">
-            <%= link_to admin_tenant_groups_path(Current.tenant), class: "flex justify-center items-center flex-grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300", data: { turbo_frame: "_top" } do %>
-              <p class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-gray-900">Zahodiť</p>
+          <div class="flex justify-start items-start self-stretch grow-0 shrink-0 gap-2 p-6">
+            <%= link_to admin_tenant_groups_path(Current.tenant), class: "flex justify-center items-center grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300", data: { turbo_frame: "_top" } do %>
+              <p class="grow-0 shrink-0 text-base font-medium text-left text-gray-900">Zahodiť</p>
             <% end %>
-            <%= form.button class: "flex justify-center items-center flex-grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-blue-600" do %>
-              <p class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-white">Vytvoriť</p>
+            <%= form.button class: "flex justify-center items-center grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-blue-600" do %>
+              <p class="grow-0 shrink-0 text-base font-medium text-left text-white">Vytvoriť</p>
             <% end %>
           </div>
         <% end %>