atomaka/budget
1
0
Fork 0
Code Issues 1 Pull requests 3 Activity Actions

WIP: Update Tailwindcss to 4 #58

Draft
atomaka wants to merge 4 commits from update-tailwind into main
pull from: update-tailwind
merge into: atomaka:main
Conversation 0 Commits 4 Files changed 13 +64 -41
13 changed files with 64 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

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

1
.node-version Normal file
View file

@ -0,0 +1 @@
22.14.0

2
Gemfile
View file

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

12
Gemfile.lock
View file

@ -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

19
app/assets/stylesheets/application.tailwind.css
View file

@ -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;
}
}
*/

39
app/assets/tailwind/application.css Normal file
View file

@ -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;
}
}
*/

4
app/views/credit_card_bills/_form.html.erb
View file

@ -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">

6
app/views/expenses/_form.html.erb
View file

@ -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>

6
app/views/incomes/_form.html.erb
View file

@ -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>

2
app/views/layouts/application.html.erb
View file

@ -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 %>

2
app/views/members/_form.html.erb
View file

@ -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">

4
app/views/sessions/_form.html.erb
View file

@ -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">

6
app/views/users/_form.html.erb
View file

@ -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">