tailwindcss-rails 3.1.0 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04dddb26b35c53025770f5914dacd0dea7c3dd7d527eef224d01a72ab7b449e4
-  data.tar.gz: e53ffa06e0f833a00f1e20c0233741c0cde0b235803eaf94c02fbc4941b9b912
+  metadata.gz: 8ed443928edcf525c0f23ef68477bca7305c5d1f700b0b19e50caa1912aefbcb
+  data.tar.gz: 1538e3660060124de8677a827a36d1609c3d83e26cd6992f1fc86b9d9c056a1a
 SHA512:
-  metadata.gz: 53542141b4d15c74a3cb8a50f3a55cc85ee443ec850554c9888cf6df84ed68d212c3cded00410b04d6796da7b2dcbc71291426ece5911ef4f823d4a36f9337c9
-  data.tar.gz: fe22c1a7b49c6541262420afd6fca0d1947bbe6c97dff732ae4e69960e464194b5a561bf6ab8052a05a8d408caca60750fb3854e841091ba20517d3546db082b
+  metadata.gz: c5450e732306e39d5946b281183607baf68e322bd607310e0084aec8719e916ce378c53c6fe82f0d9959c7bb476511d61daf84a758355b44230e5e75137c9a72
+  data.tar.gz: 19ef39ff0bbe242e1e2156639bf7e22c67a1d2e86dfab3b0aba74d2365693e72652e74e1ceadab955225fb1edf5b5f5abf8077c63f2013b3f64c9b42f200a877

data/README.md

@@ -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/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "3.1.0"
+  VERSION = "3.2.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.2.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 bindir: bin
 cert_chain: []
-date: 2024-12-29 00:00:00.000000000 Z
+date: 2025-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties