tailwindcss-rails 3.1.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04dddb26b35c53025770f5914dacd0dea7c3dd7d527eef224d01a72ab7b449e4
-  data.tar.gz: e53ffa06e0f833a00f1e20c0233741c0cde0b235803eaf94c02fbc4941b9b912
+  metadata.gz: bd08ba39cdbf3e583632419190f2918a4eb004ebff05433a43456342ccfece80
+  data.tar.gz: 6d393169b40195bebbde219bc1f39d7351a6623f346bd36792b65b24210ad5df
 SHA512:
-  metadata.gz: 53542141b4d15c74a3cb8a50f3a55cc85ee443ec850554c9888cf6df84ed68d212c3cded00410b04d6796da7b2dcbc71291426ece5911ef4f823d4a36f9337c9
-  data.tar.gz: fe22c1a7b49c6541262420afd6fca0d1947bbe6c97dff732ae4e69960e464194b5a561bf6ab8052a05a8d408caca60750fb3854e841091ba20517d3546db082b
+  metadata.gz: 949b84bfd22f8ff03581c1826026c581601a8659dbfd4d156f62806f9a16ca2ac3a7f3ce816c394d82bd6cf6d9e04029e400a71b73fe1f52cde82e5c122d9f27
+  data.tar.gz: 65e70ea1e978c11286993ee62503cb945aa894a1ab0f2f5a156647e68fcbd1c4b0c0732ee31d7e71007cc7147f0f1362398f80fdf7b67eca6794d9925a6e46a9

data/README.md

@@ -124,7 +124,7 @@ This gem ships with a Puma plugin. To use it, add this line to your `puma.rb` co
 plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"
 ```
 
-and then running `rails server` will run the Tailwind watch process in the background
+and then running `rails server` (or just `puma`) will run the Tailwind watch process in the background.
 
 
 #### Run `rails tailwindcss:watch`
@@ -151,7 +151,7 @@ Running `bin/dev` invokes Foreman to start both the Tailwind watch process and t
 
 ### Using with PostCSS
 
-If you want to use PostCSS as a preprocessor, create a custom `config/postcss.config.js` and it will be loaded automatically.
+If you want to use PostCSS as a preprocessor, create a custom `config/postcss.config.js` and that file will be loaded by tailwind automatically.
 
 For example, to enable nesting:
 
@@ -167,6 +167,25 @@ module.exports = {
 }
 ```
 
+⚠ Note that PostCSS is a javascript tool with its own prerequisites! By default `tailwindcss-rails` does not require any javascript tooling, so in order to use PostCSS, a `package.json` with dependencies for your plugins and a package manager like `yarn` or `npm` is required, for example:
+
+```json
+// package.json
+{
+  "name": "my app",
+  "private": true,
+  "dependencies": {
+    "postcss-advanced-variables": "^4.0.0",
+    "postcss-import": "^16.0.1",
+    "postcss-mixins": "^9.0.4",
+    "tailwindcss": "^3.4.1"
+  }
+}
+```
+
+Then you can use yarn or npm to install the dependencies.
+
+
 ### Custom inputs or outputs
 
 If you need to use a custom input or output file, you can run `bundle exec tailwindcss` to access the platform-specific executable, and give it your own build options.

data/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb

@@ -15,7 +15,7 @@
     </div>
 
     <div class="inline">
-      <%%= form.submit "Save", class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+      <%%= form.submit "Save", class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
     </div>
   <%% end %>
 </div>

data/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb

@@ -11,7 +11,7 @@
     </div>
 
     <div class="inline">
-      <%%= form.submit "Email reset instructions", class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+      <%%= form.submit "Email reset instructions", class: "rounded-lg px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
     </div>
   <%% end %>
 </div>

data/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb

@@ -20,11 +20,11 @@
 
     <div class="col-span-6 sm:flex sm:items-center sm:gap-4">
       <div class="inline">
-        <%%= form.submit "Sign in", class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+        <%%= form.submit "Sign in", class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
       </div>
 
       <div class="mt-4 text-sm text-gray-500 sm:mt-0">
-        <%%= link_to "Forgot password?", new_password_path, class: "text-gray-700 underline" %>
+        <%%= link_to "Forgot password?", new_password_path, class: "text-gray-700 underline hover:no-underline" %>
       </div>
     </div>
   <%% end %>

data/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt

@@ -1,9 +1,9 @@
 <%%= form_with(model: <%= model_resource_name %>, class: "contents") do |form| %>
   <%% if <%= singular_table_name %>.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
+    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
       <h2><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
 
-      <ul>
+      <ul class="list-disc ml-6">
         <%% <%= singular_table_name %>.errors.each do |error| %>
           <li><%%= error.full_message %></li>
         <%% end %>
@@ -15,29 +15,29 @@
   <div class="my-5">
 <% if attribute.password_digest? -%>
     <%%= form.label :password %>
-    <%%= form.password_field :password, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
-</div>
+    <%%= form.password_field :password, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
+  </div>
 
-<div class="my-5">
+  <div class="my-5">
     <%%= form.label :password_confirmation %>
-    <%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+    <%%= form.password_field :password_confirmation, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
 <% elsif attribute.attachments? -%>
     <%%= form.label :<%= attribute.column_name %> %>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
 <% else -%>
     <%%= form.label :<%= attribute.column_name %> %>
 <% if attribute.field_type == :textarea || attribute.field_type == :text_area -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% elsif attribute.field_type == :checkbox || attribute.field_type == :check_box -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 mt-2 h-5 w-5" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% else -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% end -%>
 <% end -%>
   </div>
 
 <% end -%>
   <div class="inline">
-    <%%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <%%= form.submit class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
   </div>
 <%% end %>

data/lib/generators/tailwindcss/scaffold/templates/edit.html.erb.tt

@@ -1,8 +1,10 @@
-<div class="mx-auto md:w-2/3 w-full">
+<%% content_for :title, "Editing <%= human_name.downcase %>" %>
+
+<div class="md:w-2/3 w-full">
   <h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
 
   <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
 
-  <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
 </div>

data/lib/generators/tailwindcss/scaffold/templates/index.html.erb.tt

@@ -1,21 +1,25 @@
+<%% content_for :title, "<%= human_name.pluralize %>" %>
+
 <div class="w-full">
   <%% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
+    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%%= notice %></p>
   <%% end %>
 
-  <%% content_for :title, "<%= human_name.pluralize %>" %>
-
   <div class="flex justify-between items-center">
     <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
-    <%%= link_to "New <%= human_name.downcase %>", new_<%= singular_route_name %>_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+    <%%= link_to "New <%= human_name.downcase %>", new_<%= singular_route_name %>_path, class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white block font-medium" %>
   </div>
 
   <div id="<%= plural_table_name %>" class="min-w-full">
-    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
-      <%%= render <%= singular_table_name %> %>
-      <p>
-        <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-      </p>
+    <%% if @<%= plural_table_name %>.any? %>
+      <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+        <%%= render <%= singular_table_name %> %>
+        <p>
+          <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+        </p>
+      <%% end %>
+    <%% else %>
+      <p class="text-center my-10">No <%= human_name.downcase.pluralize %> found.</p>
     <%% end %>
   </div>
 </div>

data/lib/generators/tailwindcss/scaffold/templates/new.html.erb.tt

@@ -1,7 +1,9 @@
-<div class="mx-auto md:w-2/3 w-full">
+<%% content_for :title, "New <%= human_name.downcase %>" %>
+
+<div class="md:w-2/3 w-full">
   <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
 
   <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
 
-  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
 </div>

data/lib/generators/tailwindcss/scaffold/templates/partial.html.erb.tt

@@ -12,6 +12,5 @@
     <%%= <%= singular_name %>.<%= attribute.column_name %> %>
 <% end -%>
   </p>
-
 <% end -%>
 </div>

data/lib/generators/tailwindcss/scaffold/templates/show.html.erb.tt

@@ -1,15 +1,17 @@
-<div class="mx-auto md:w-2/3 w-full flex">
-  <div class="mx-auto">
-    <%% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
-    <%% end %>
-
-    <%%= render @<%= singular_table_name %> %>
-
-    <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
-    </div>
+<%% content_for :title, "Showing <%= human_name.downcase %>" %>
+
+<div class="md:w-2/3 w-full">
+  <%% if notice.present? %>
+    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%%= notice %></p>
+  <%% end %>
+
+  <h1 class="font-bold text-4xl">Showing <%= human_name.downcase %></h1>
+
+  <%%= render @<%= singular_table_name %> %>
+
+  <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "mt-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+  <div class="inline-block ml-2">
+    <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium" %>
   </div>
 </div>

data/lib/puma/plugin/tailwindcss.rb

@@ -1,4 +1,5 @@
 require "puma/plugin"
+require "tailwindcss/commands"
 
 Puma::Plugin.create do
   attr_reader :puma_pid, :tailwind_pid, :log_writer
@@ -11,8 +12,11 @@ Puma::Plugin.create do
       # Using IO.popen(command, 'r+') will avoid watch_command read from $stdin.
       # If we use system(*command) instead, IRB and Debug can't read from $stdin
       # correctly bacause some keystrokes will be taken by watch_command.
-      IO.popen(Tailwindcss::Commands.watch_command, 'r+') do |io|
-        IO.copy_stream(io, $stdout)
+      begin
+        IO.popen(Tailwindcss::Commands.watch_command, 'r+') do |io|
+          IO.copy_stream(io, $stdout)
+        end
+      rescue Interrupt
       end
     end
 

data/lib/tailwindcss/commands.rb

@@ -4,16 +4,18 @@ module Tailwindcss
   module Commands
     class << self
       def compile_command(debug: false, **kwargs)
+        rails_root = defined?(Rails) ? Rails.root : Pathname.new(Dir.pwd)
+
         command = [
           Tailwindcss::Ruby.executable(**kwargs),
-          "-i", Rails.root.join("app/assets/stylesheets/application.tailwind.css").to_s,
-          "-o", Rails.root.join("app/assets/builds/tailwind.css").to_s,
-          "-c", Rails.root.join("config/tailwind.config.js").to_s,
+          "-i", rails_root.join("app/assets/stylesheets/application.tailwind.css").to_s,
+          "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
+          "-c", rails_root.join("config/tailwind.config.js").to_s,
         ]
 
         command << "--minify" unless (debug || rails_css_compressor?)
 
-        postcss_path = Rails.root.join("config/postcss.config.js")
+        postcss_path = rails_root.join("config/postcss.config.js")
         command += ["--postcss", postcss_path.to_s] if File.exist?(postcss_path)
 
         command

data/lib/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "3.1.0"
+  VERSION = "3.3.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.3.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 bindir: bin
 cert_chain: []
-date: 2024-12-29 00:00:00.000000000 Z
+date: 2025-01-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties