kaze 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1a94f3dd3de84493b3cbc6acf9e7e1fd337b93cb67b87aad2d97c60e7b064f7
-  data.tar.gz: 80d6c19bbb883bfe8dccee90772dbb67a02d9342732b01a9f9c98a2518a494bd
+  metadata.gz: 85e175109282621599f201ac5fe5172cbece7b297ca3828f9f3fd3af2c8cc216
+  data.tar.gz: 3f9cc8da21fe230a041859d622ebcb8c611a507cdcef753d9c03f9f9cc0bba8b
 SHA512:
-  metadata.gz: b78d27e32275e9992afca59c84c67fba216febaca0dd5183e816027b5f83fcdba4ea3deccb6fb5bf9c1d5cd484e917b739efb9f50b8a261491a09f2efe05bc60
-  data.tar.gz: fed091fb475690ca39181e0b1ac26912edf0206f776e3f7f1cdade0d51b8732ab497984cb9e0d9bf74330aba6bae32e712d1e9ba85407d41460e523172571aa9
+  metadata.gz: c718d783b78d6c4254c041afc96c2b2457991447951e45a1723697a673775b552b100f0293c02aad6a7eae98a4e5ecd1de801670c6bdc1cd44f08e8f919cf60c
+  data.tar.gz: 59564c64868730eb813206af7c9a6bfc75dcd67f5b3c9668da48abfb08041f7bb5133f1cc8ba42b4b36b943f3d50dd1e4b58451772672d5e313f1433ee2f10fa

data/README.md

@@ -13,7 +13,7 @@ Kaze provides scaffolding options based on [Hotwire](https://hotwired.dev) or [I
 Before creating your first project powered by Kaze, make sure that your local machine has Ruby installed. Ruby can be installed in minutes via [mise](https://mise.jdx.dev).
 
 ```
-mise use -g ruby@3.3
+mise use -g ruby@3.4
 ```
 
 After you have installed Ruby, you may install `rails` and `kaze` gems globally:

data/lib/kaze/commands/app/base_stack.rb

@@ -10,7 +10,7 @@ class Kaze::Commands::App::BaseStack
   private
 
   def bundle_command
-    @bundle_command ||= File.exist?("#{Dir.pwd}/bin/bundle") ? "#{Dir.pwd}/bin/bundle" : "bundle"
+    @bundle_command ||= File.exist?("#{Dir.pwd}/bin/bundle") ? "#{Dir.pwd}/bin/bundle" : 'bundle'
   end
 
   def install_gems(gems = [], group = nil)
@@ -65,14 +65,16 @@ class Kaze::Commands::App::BaseStack
 
   def run_command(command)
     Open3.popen3(command) do |stdin, stdout, stderr, wait_thr|
+      stdout.set_encoding(Encoding::UTF_8)
+      stderr.set_encoding(Encoding::UTF_8)
       stdout_thread = Thread.new do
         while line = stdout.gets do
-          say line
+          say line.scrub
         end
       end
       stderr_thread = Thread.new do
         while line = stderr.gets do
-          say line, :red
+          say line.scrub, :red
         end
       end
       stdout_thread.join
@@ -82,7 +84,7 @@ class Kaze::Commands::App::BaseStack
   end
 
   def run_commands(commands)
-    commands.each { |command| run_command(command) }
+    commands.all? { |command| run_command(command).success? }
   end
 
   def say(message, color = nil)

data/lib/kaze/commands/app/hotwire_stack.rb

@@ -3,7 +3,7 @@ class Kaze::Commands::App::HotwireStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'view_component', 'turbo-rails', 'dotenv', 'bcrypt' ])
-    run_command("#{Dir.pwd}/bin/bundle add tailwindcss-rails --version=\"~> 3.0\"")
+    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'hotwire-livereload' ], 'development')
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
@@ -52,11 +52,11 @@ class Kaze::Commands::App::HotwireStack < Kaze::Commands::App::BaseStack
 
     # Tailwind...
     FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
-    FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
-    FileUtils.copy_file("#{stubs_path}/hotwire/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
+    ensure_directory_exists("#{Dir.pwd}/app/assets/tailwind")
+    FileUtils.copy_file("#{stubs_path}/hotwire/app/assets/tailwind/application.css", "#{Dir.pwd}/app/assets/tailwind/application.css")
     FileUtils.copy_file("#{stubs_path}/default/bin/dev", "#{Dir.pwd}/bin/dev")
     FileUtils.copy_file("#{stubs_path}/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
-    run_command("#{Dir.pwd}/bin/rails tailwindcss:build")
+    return unless run_command("#{Dir.pwd}/bin/rails tailwindcss:build").success?
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green

data/lib/kaze/commands/app/inertia_react_stack.rb

@@ -3,7 +3,7 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'turbo-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'inertia_rails', 'vite_rails', 'dotenv', 'bcrypt', 'js-routes' ])
-    run_command("#{Dir.pwd}/bin/bundle add tailwindcss-rails --version=\"~> 3.0\"")
+    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
     # NPM Packages...
@@ -51,8 +51,8 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
 
     # Tailwind / Vite...
     FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
-    FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
-    FileUtils.copy_file("#{stubs_path}/inertia-react-ts/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
+    ensure_directory_exists("#{Dir.pwd}/app/assets/tailwind")
+    FileUtils.copy_file("#{stubs_path}/inertia-react-ts/app/assets/tailwind/application.css", "#{Dir.pwd}/app/assets/tailwind/application.css")
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     FileUtils.copy_file("#{stubs_path}/inertia-react-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{stubs_path}/inertia-react-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
@@ -61,20 +61,23 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     replace_in_file('#vite: bin/vite dev', 'vite: bin/vite dev', "#{Dir.pwd}/Procfile.dev")
     run_command("#{Dir.pwd}/bin/rails generate js_routes:middleware")
-    run_command("#{Dir.pwd}/bin/rails tailwindcss:build")
+    return unless run_command("#{Dir.pwd}/bin/rails tailwindcss:build").success?
 
     say ''
     say 'Installing and building Node dependencies.', :magenta
 
-    if File.exist?("#{Dir.pwd}/pnpm-lock.yaml")
-      run_commands([ 'pnpm install', 'pnpm run build' ])
-    elsif File.exist?("#{Dir.pwd}/yarn.lock")
-      run_commands([ 'yarn install', 'yarn build' ])
-    elsif File.exist?("#{Dir.pwd}/bun.lock") || File.exist?("#{Dir.pwd}/bun.lockb")
-      run_commands([ 'bun install', 'bun run build' ])
-    else
-      run_commands([ 'npm install', 'npm run build' ])
-    end
+    node_dependencies_installed =
+      if File.exist?("#{Dir.pwd}/pnpm-lock.yaml")
+        run_commands([ 'pnpm install', 'pnpm run build' ])
+      elsif File.exist?("#{Dir.pwd}/yarn.lock")
+        run_commands([ 'yarn install', 'yarn build' ])
+      elsif File.exist?("#{Dir.pwd}/bun.lock") || File.exist?("#{Dir.pwd}/bun.lockb")
+        run_commands([ 'bun install', 'bun run build' ])
+      else
+        run_commands([ 'npm install', 'npm run build' ])
+      end
+
+    return unless node_dependencies_installed
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green

data/lib/kaze/commands/app/inertia_vue_stack.rb

@@ -3,7 +3,7 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'turbo-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'inertia_rails', 'vite_rails', 'dotenv', 'bcrypt', 'js-routes' ])
-    run_command("#{Dir.pwd}/bin/bundle add tailwindcss-rails --version=\"~> 3.0\"")
+    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
     # NPM Packages...
@@ -51,8 +51,8 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
 
     # Tailwind / Vite...
     FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
-    FileUtils.copy_file("#{stubs_path}/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
-    FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
+    ensure_directory_exists("#{Dir.pwd}/app/assets/tailwind")
+    FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/app/assets/tailwind/application.css", "#{Dir.pwd}/app/assets/tailwind/application.css")
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
@@ -61,20 +61,23 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     replace_in_file('#vite: bin/vite dev', 'vite: bin/vite dev', "#{Dir.pwd}/Procfile.dev")
     run_command("#{Dir.pwd}/bin/rails generate js_routes:middleware")
-    run_command("#{Dir.pwd}/bin/rails tailwindcss:build")
+    return unless run_command("#{Dir.pwd}/bin/rails tailwindcss:build").success?
 
     say ''
     say 'Installing and building Node dependencies.', :magenta
 
-    if File.exist?("#{Dir.pwd}/pnpm-lock.yaml")
-      run_commands([ 'pnpm install', 'pnpm run build' ])
-    elsif File.exist?("#{Dir.pwd}/yarn.lock")
-      run_commands([ 'yarn install', 'yarn build' ])
-    elsif File.exist?("#{Dir.pwd}/bun.lock") || File.exist?("#{Dir.pwd}/bun.lockb")
-      run_commands([ 'bun install', 'bun run build' ])
-    else
-      run_commands([ 'npm install', 'npm run build' ])
-    end
+    node_dependencies_installed =
+      if File.exist?("#{Dir.pwd}/pnpm-lock.yaml")
+        run_commands([ 'pnpm install', 'pnpm run build' ])
+      elsif File.exist?("#{Dir.pwd}/yarn.lock")
+        run_commands([ 'yarn install', 'yarn build' ])
+      elsif File.exist?("#{Dir.pwd}/bun.lock") || File.exist?("#{Dir.pwd}/bun.lockb")
+        run_commands([ 'bun install', 'bun run build' ])
+      else
+        run_commands([ 'npm install', 'npm run build' ])
+      end
+
+    return unless node_dependencies_installed
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green

data/lib/kaze/version.rb

@@ -1,3 +1,3 @@
 module Kaze
-  VERSION = '1.1.0'
+  VERSION = '1.2.0'
 end

data/stubs/hotwire/app/assets/tailwind/application.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+
+@source "../../../public/*.html";
+@source "../../helpers/**/*.rb";
+@source "../../components/**/*";
+@source "../../views/**/*";
+@source "../../javascript/**/*.js";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+/* Tailwind v4 Preflight resets buttons to `cursor: default`; keep the v3 behaviour. */
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

data/stubs/hotwire/app/components/danger_button_component.rb

@@ -7,7 +7,7 @@ class DangerButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'submit'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/dropdown_link_component.rb

@@ -6,7 +6,7 @@ class DropdownLinkComponent < ViewComponent::Base
   ERB
 
   def initialize(attributes = {})
-    attributes[:class] = "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/nav_link_component.rb

@@ -7,8 +7,8 @@ class NavLinkComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     classes = attributes[:active] \
-      ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out' \
-      : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
+      ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-hidden focus:border-indigo-700 transition duration-150 ease-in-out' \
+      : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-hidden focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
     attributes[:class] = "#{classes}#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.without(:active).map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end

data/stubs/hotwire/app/components/primary_button_component.rb

@@ -7,7 +7,7 @@ class PrimaryButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'submit'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/responsive_nav_link_component.rb

@@ -7,8 +7,8 @@ class ResponsiveNavLinkComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     classes = attributes[:active] \
-      ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out' \
-      : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
+      ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-hidden focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out' \
+      : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
     attributes[:class] = "#{classes}#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.without(:active).map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end

data/stubs/hotwire/app/components/secondary_button_component.rb

@@ -7,7 +7,7 @@ class SecondaryButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'button'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/text_input_component.rb

@@ -5,7 +5,7 @@ class TextInputComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     @disabled = attributes[:disabled] || false
-    attributes[:class] = "border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-xs#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.without(:disabled).map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/views/auth/login.html.erb

@@ -16,12 +16,12 @@
   <!-- Remember Me -->
   <div class="block mt-4">
     <label for="remember_me" class="inline-flex items-center">
-      <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
+      <input id="remember_me" type="checkbox" class="rounded-sm dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-xs focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
       <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
     </label>
   </div>
   <div class="flex items-center justify-end mt-4">
-    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= password_request_path %>">
+    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= password_request_path %>">
       Forgot your password?
     </a>
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>

data/stubs/hotwire/app/views/auth/register.html.erb

@@ -24,7 +24,7 @@
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password_confirmation] })) %>
   </div>
   <div class="flex items-center justify-end mt-4">
-    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= login_path %>">
+    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= login_path %>">
       Already registered?
     </a>
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>

data/stubs/hotwire/app/views/auth/verify_email.html.erb

@@ -16,7 +16,7 @@
   </form>
   <form method="POST" action="<%= logout_path %>">
     <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-    <button type="submit" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+    <button type="submit" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
       Log Out
     </button>
   </form>

data/stubs/hotwire/app/views/dashboard/index.html.erb

@@ -5,7 +5,7 @@
 <% end %>
 <div class="py-12">
   <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
       <div class="p-6 text-gray-900 dark:text-gray-100">
         You're logged in!
       </div>

data/stubs/hotwire/app/views/layouts/_navigation.html.erb

@@ -20,7 +20,7 @@
       <div class="hidden sm:flex sm:items-center sm:ms-6">
         <%= render DropdownComponent.new do |component| %>
           <% component.with_trigger(classes: "") do %>
-            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
+            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-hidden transition ease-in-out duration-150">
               <div><%= Current.auth.user.name %></div>
               <div class="ms-1">
                 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -43,7 +43,7 @@
       </div>
       <!-- Hamburger -->
       <div class="-me-2 flex items-center sm:hidden">
-        <button x-on:click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
+        <button x-on:click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
           <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
             <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
             <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

data/stubs/hotwire/app/views/layouts/application.html.erb

@@ -6,7 +6,7 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
@@ -17,7 +17,7 @@
       <%= render "layouts/navigation" %>
       <!-- Page Heading -->
       <% if content_for?(:header) %>
-        <header class="bg-white dark:bg-gray-800 shadow">
+        <header class="bg-white dark:bg-gray-800 shadow-sm">
           <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
             <%= yield :header %>
           </div>

data/stubs/hotwire/app/views/layouts/guest.html.erb

@@ -6,7 +6,7 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>

data/stubs/hotwire/app/views/profile/edit.html.erb

@@ -5,17 +5,17 @@
 <% end %>
 <div class="py-12">
   <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
       <div class="max-w-xl">
         <%= render "profile/partials/update_profile_information_form" %>
       </div>
     </div>
-    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
       <div class="max-w-xl">
         <%= render "profile/partials/update_password_form" %>
       </div>
     </div>
-    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
       <div class="max-w-xl">
         <%= render "profile/partials/delete_user_form" %>
       </div>

data/stubs/hotwire/app/views/profile/partials/_update_profile_information_form.html.erb

@@ -27,7 +27,7 @@
           <div>
             <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
               Your email address is unverified.
-              <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+              <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
                 Click here to re-send the verification email.
               </button>
             </p>

data/stubs/hotwire/app/views/welcome/index.html.erb

@@ -6,7 +6,7 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
@@ -20,19 +20,19 @@
           <% if Current.auth.check? %>
             <a
               href="<%= dashboard_url %>"
-              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
               v-if="$page.props.auth.user">
               Dashboard
             </a>
           <% else %>
             <a
               href="<%= login_url %>"
-              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white">
+              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white">
               Log in
             </a>
             <a
               href="<%= register_url %>"
-              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white">
+              class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white">
               Register
             </a>
           <% end %>

data/stubs/inertia-react-ts/app/assets/tailwind/application.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+
+@source "../../../public/*.html";
+@source "../../helpers/**/*.rb";
+@source "../../views/**/*";
+@source "../../javascript/**/*.tsx";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+/* Tailwind v4 Preflight resets buttons to `cursor: default`; keep the v3 behaviour. */
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

data/stubs/inertia-react-ts/app/javascript/Components/Checkbox.tsx

@@ -5,7 +5,7 @@ export default function Checkbox({ className = '', ...props }: InputHTMLAttribut
     <input
       {...props}
       type="checkbox"
-      className={`rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 ${className}`}
+      className={`rounded-sm dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-xs focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 ${className}`}
     />
   )
 }

data/stubs/inertia-react-ts/app/javascript/Components/DangerButton.tsx

@@ -9,7 +9,7 @@ export default function DangerButton({
   return (
     <button
       {...props}
-      className={`inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx

@@ -86,7 +86,7 @@ const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps)
   return (
     <Link
       {...props}
-      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
+      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
     >
       {children}
     </Link>

data/stubs/inertia-react-ts/app/javascript/Components/NavLink.tsx

@@ -9,7 +9,7 @@ export default function NavLink({
   return (
     <Link
       {...props}
-      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ${
+      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-hidden ${
         active
           ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
           : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 '

data/stubs/inertia-react-ts/app/javascript/Components/PrimaryButton.tsx

@@ -9,7 +9,7 @@ export default function PrimaryButton({
   return (
     <button
       {...props}
-      className={`inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/ResponsiveNavLink.tsx

@@ -13,7 +13,7 @@ export default function ResponsiveNavLink({
         active
           ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
           : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
-      } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`}
+      } text-base font-medium focus:outline-hidden transition duration-150 ease-in-out ${className}`}
     >
       {children}
     </Link>

data/stubs/inertia-react-ts/app/javascript/Components/SecondaryButton.tsx

@@ -11,7 +11,7 @@ export default function SecondaryButton({
     <button
       {...props}
       type={type}
-      className={`inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/TextInput.tsx

@@ -25,7 +25,7 @@ export default forwardRef(function TextInput(
     <input
       {...props}
       type={type}
-      className={`border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ${className}`}
+      className={`border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-xs ${className}`}
       ref={localRef}
     />
   )