bin/rails tailwindcss:upgrade

.gitignore

@@ -36,3 +36,5 @@
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+/node_modules

.node-version

@@ -0,0 +1 @@
+22.14.0

Gemfile

@@ -64,4 +64,4 @@ group :test do
   gem "selenium-webdriver"
 end
 
-gem "tailwindcss-rails", "~> 3.3.1"
+gem "tailwindcss-rails"

Gemfile.lock

@@ -286,12 +286,12 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.2)
-    tailwindcss-rails (3.3.1)
+    tailwindcss-rails (4.0.0)
       railties (>= 7.0.0)
-      tailwindcss-ruby (~> 3.0)
-    tailwindcss-ruby (3.4.17-aarch64-linux)
-    tailwindcss-ruby (3.4.17-arm64-darwin)
-    tailwindcss-ruby (3.4.17-x86_64-linux)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.0.6-aarch64-linux-gnu)
+    tailwindcss-ruby (4.0.6-arm64-darwin)
+    tailwindcss-ruby (4.0.6-x86_64-linux-gnu)
     thor (1.3.2)
     timeout (0.4.3)
     turbo-rails (2.0.11)
@@ -342,7 +342,7 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 1.4)
   stimulus-rails
-  tailwindcss-rails (~> 3.3.1)
+  tailwindcss-rails
   turbo-rails
   tzinfo-data
   web-console

app/assets/stylesheets/application.tailwind.css

@@ -1,19 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.msg-notice {
-  @apply bg-green-300 text-green-900;
-}
-.msg-alert {
-  @apply bg-red-300 text-red-900;
-}
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/

app/assets/tailwind/application.css

@@ -0,0 +1,39 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/aspect-ratio';
+@plugin '@tailwindcss/typography';
+
+/*
+  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);
+  }
+}
+
+.msg-notice {
+  @apply bg-green-300 text-green-900;
+}
+.msg-alert {
+  @apply bg-red-300 text-red-900;
+}
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/

app/views/credit_card_bills/_form.html.erb

@@ -12,12 +12,12 @@
 
   <div class="my-5">
     <%= form.label :description %>
-    <%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :description, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
     <%= form.label :amount %>
-    <%= form.text_field :amount, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :amount, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">

app/views/expenses/_form.html.erb

@@ -13,12 +13,12 @@
 
   <div class="my-5">
     <%= form.label :description %>
-    <%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :description, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
     <%= form.label :payment %>
-    <%= form.text_field :payment, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :payment, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
@@ -27,7 +27,7 @@
       form.select :period,
         options_for_select(expense_periods, expense.period),
         {},
-        class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full"
+        class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full"
     %>
   </div>
 

app/views/incomes/_form.html.erb

@@ -13,7 +13,7 @@
 
   <div class="my-5">
     <%= form.label :description %>
-    <%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :description, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
@@ -23,7 +23,7 @@
 
   <div class="my-5">
     <%= form.label :amount %>
-    <%= form.text_field :amount, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :amount, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
@@ -32,7 +32,7 @@
       form.select :member_id,
         options_for_select(members, income.member_id),
         {},
-        class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full"
+        class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full"
     %>
   </div>
 

app/views/layouts/application.html.erb

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>

app/views/members/_form.html.erb

@@ -13,7 +13,7 @@
 
   <div class="my-5">
     <%= form.label :name %>
-    <%= form.text_field :name, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :name, class: "block shadow-sm rounded-md border border-gray-200 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">

app/views/sessions/_form.html.erb

@@ -13,12 +13,12 @@
 
   <div class="my-5">
     <%= form.label :email %>
-    <%= form.text_field :email, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :email, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
     <%= form.label :password %>
-    <%= form.password_field :password, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.password_field :password, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">

app/views/users/_form.html.erb

@@ -13,17 +13,17 @@
 
   <div class="my-5">
     <%= form.label :email %>
-    <%= form.text_field :email, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.text_field :email, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
     <%= form.label :password %>
-    <%= form.password_field :password, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.password_field :password, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full" %>
 </div>
 
 <div class="my-5">
     <%= form.label :password_confirmation %>
-    <%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.password_field :password_confirmation, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">