tailwindcss-rails 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afb430c28a949956e14b9486ba7678e9ab2f60ba362e30f9d8817f11ba4a26cb
-  data.tar.gz: 1a7daff63fc833225a72e65766f7eeb43e759e6b75fa65bc07f27ac8bbd1b3d7
+  metadata.gz: efa9c7fbb61dc459247b3af68e46e47b8c002d925635d27e9ed48d0b6f8d6597
+  data.tar.gz: f4126ae45ea113f4a915308accabd4d7467fc6de364ec68fe412a8ae540d3942
 SHA512:
-  metadata.gz: 110a47771378d3fd417f58577eee99bdff47ec0589d47718fb24aaa97c86cce9b6a5609f2aae971fb750dcbb3c2b33f8e04676fcd91ecf4b2e3fec0a874a7665
-  data.tar.gz: 1b06d07ec16ddeba018820d31520468b7a2e0db9dde857db42112b2325bab300c96809d74aa17df2972fac1f1f8467988186cbc24f9b5427576cde8fa6a00824
+  metadata.gz: f1a0c5c9d258f268f109d780a0c0b12f87779557ec859b1f50e94b602de607e0edbc99d93ce18498a3855c19dea5e0b9ea11c88dff15bc813650b0ba7f330ec1
+  data.tar.gz: 4c6a0bb1fdead9026be4934083af4e49ef053dcc4d1f1aead35d1db024cb4a01268784732287ac333689a936df53dc013082f6cce2b5d85ab958aefcc9e53e5c

data/README.md

@@ -2,30 +2,26 @@
 
 [Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
 
-This gem just gives access to the standard Tailwind CSS framework. If you need to customize Tailwind, you will need to install it the traditional way using [Webpacker](https://github.com/rails/webpacker) instead. This gem is purely intended for those who wish to use Tailwind CSS with the asset pipeline.
+This gem gives access to the standard Tailwind CSS framework configured for dark mode, forms, aspect-ratio, typography, and the Inter font via the asset pipeline using Sprockets. If you need to customize Tailwind, you will need to install it the traditional way using [Webpacker](https://github.com/rails/webpacker) instead or use webpacker port of this gem [tailwindcss-rails-webpacker](https://github.com/WizardComputer/tailwindcss-rails-webpacker).
 
-Production-mode purging of unused css class names is provided by a Sprockets compressor built into this gem. This compressor ensures that only the css classes used by files in `app/views` and `app/helpers` are included. In development mode, the full 3mb+ Tailwind stylesheet is loaded.
-
-In both cases, Tailwind CSS is configured for dark mode, forms, aspect-ratio, typography, and the Inter font. If you need more configuration than that, you'll need to use it with Webpacker.
+Production-mode purging of unused css class names is provided by a Sprockets compressor built into this gem. This compressor ensures that only the css classes used by files in `app/views` and `app/helpers` are included. In development mode, the full 7mb+ Tailwind stylesheet is loaded.
 
 
 ## Installation
 
 1. Run `./bin/bundle add tailwindcss-rails`
-2. Run `./bin/rails tailwindcss:install` (on a fresh Rails application)
+2. Run `./bin/rails tailwindcss:install`
 
 The last step adds the purger compressor to `config/environments/production.rb`. This ensures that when `assets:precompile` is called during deployment that the unused class names are not included in the tailwind output css used by the app. It also adds a `stylesheet_link_tag "tailwind"` and `stylesheet_link_tag "inter-font"` to your `app/views/layouts/application.html.erb` file.
 
 You can do these things yourself, if you've changed the default setup.
 
-Note: You should ensure to delete `app/assets/stylesheets/scaffolds.scss` that Rails adds after running a scaffold command, if you had run this generator before installing Tailwind CSS for Rails. This stylesheet will interfere with Tailwind's reset of base styles. This gem will turn off stylesheet generation for all future scaffold runs.
-
 
 ## Purging in production
 
-The Tailwind CSS framework starts out as a massive file, which gives you all the combinations of utility classes for development, but you wouldn't want to ship all those unused classes in production. So this gem includes a Sprockets compressor that purges the tailwind file from all those unused classes when Tailwind CSS for Rails is used with the asset pipeline.
+The Tailwind CSS framework starts out as a massive file, which gives you all the combinations of utility classes for development, but you wouldn't want to ship all those unused classes in production. So the Sprockets compressor included in this gem is used to purge the tailwind file from all those unused classes for production.
 
-This compressor is currently not compatible with the default Sprockets cache system due to the fact its output depends on files outside of Sprockets (all the files observed for utility class name usage), so this cache is disabled in production. If you need to disable it in other deployed environments, add the following to that environment configuration file:
+Note: This compressor is currently not compatible with the default Sprockets cache system due to the fact its output depends on files outside of Sprockets (all the files observed for utility class name usage), so this cache is disabled in production. If you need to disable it in other deployed environments, add the following to that environment configuration file:
 
 ```ruby
 Rails.application.config.assets.configure do |env|
@@ -57,7 +53,7 @@ The Tailwind CSS main file that's being used before purging consists of these ve
 * @tailwindcss/forms 0.3.3
 * @tailwindcss/typography 0.4.1
 * autoprefixer 10.3.1
-* tailwindcss 2.2.7
+* tailwindcss 2.2.15
 
 
 ## License

data/app/assets/stylesheets/tailwind.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.16 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -475,6 +475,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }

data/lib/generators/tailwindcss/scaffold/scaffold_generator.rb

@@ -0,0 +1,34 @@
+require 'rails/generators/erb/scaffold/scaffold_generator'
+require "rails/generators/resource_helpers"
+
+module Tailwindcss
+  module Generators
+    class ScaffoldGenerator < Erb::Generators::ScaffoldGenerator
+      include Rails::Generators::ResourceHelpers
+
+      source_root File.expand_path("../templates", __FILE__)
+
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+      def create_root_folder
+        empty_directory File.join("app/views", controller_file_path)
+      end
+
+      def copy_view_files
+        available_views.each do |view|
+          formats.each do |format|
+            filename = filename_with_extensions(view, format)
+            template filename, File.join("app/views", controller_file_path, filename)
+          end
+        end
+
+        template "partial.html.erb", File.join("app/views", controller_file_path, "_#{singular_table_name}.html.erb")
+      end
+
+      private
+        def available_views
+          %w(index edit show new _form)
+        end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+<%%= 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">
+      <h2><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
+
+      <ul>
+        <%% <%= singular_table_name %>.errors.each do |error| %>
+          <li><%%= error.full_message %></li>
+        <%% end %>
+      </ul>
+    </div>
+  <%% end %>
+
+<% attributes.each do |attribute| -%>
+  <div class="my-5">
+<% if attribute.password_digest? -%>
+    <%%= form.label :password %>
+    <%%= form.password_field :password %>
+</div>
+
+<div class="my-5">
+    <%%= form.label :password_confirmation %>
+    <%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% 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-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% else -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+<% if attribute.field_type == :text_area -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% elsif attribute.field_type == :check_box -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block mt-2 h-5 w-5" %>
+<% else -%>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+<% 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" %>
+  </div>
+<%% end %>

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

@@ -0,0 +1,8 @@
+<div class="mx-auto 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 %>", @<%= singular_table_name %>, 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 %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>

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

@@ -0,0 +1,14 @@
+<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>
+  <%% end %>
+
+  <div class="flex justify-between items-center">
+    <h1 class="text-lg 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" %>
+  </div>
+
+  <div id="<%= plural_table_name %>" class="min-w-full">
+    <%%= render @<%= plural_table_name %> %>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+<div class="mx-auto md:w-2/3 w-full">
+  <h1 class="text-lg 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 %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>

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

@@ -0,0 +1,22 @@
+<div id="<%%= dom_id <%= singular_table_name %> %>">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p class="my-5">
+    <strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    <%%= link_to <%= singular_table_name %>.<%= attribute.column_name %>.filename, <%= singular_table_name %>.<%= attribute.column_name %> if <%= singular_table_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+    <%% <%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
+    <%% end %>
+<% else -%>
+    <%%= <%= singular_table_name %>.<%= attribute.column_name %> %>
+<% end -%>
+  </p>
+
+<% end -%>
+  <%% if action_name != "show" %>
+    <%%= link_to "Show this <%= human_name.downcase %>", <%= singular_table_name %>, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%%= link_to 'Edit this <%= human_name.downcase %>', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
+    <hr class="mt-6">
+  <%% end %>
+</div>

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

@@ -0,0 +1,15 @@
+<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 <%= singular_table_name %>', edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <div class="inline-block ml-2">
+      <%%= button_to 'Delete this <%= singular_table_name %>', <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, data: { confirm: "Are you sure you want to delete this <%= singular_table_name %>?" }, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+    </div>
+    <%%= link_to 'Back to <%= plural_table_name %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  </div>
+</div>

data/lib/install/tailwindcss.rb

@@ -1,11 +1,21 @@
 APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
 
 if APPLICATION_LAYOUT_PATH.exist?
-  say "Add Tailwindcss include tags in application layout"
-  insert_into_file Rails.root.join("app/views/layouts/application.html.erb").to_s, %(\n    <%= stylesheet_link_tag "inter-font" %>\n    <%= stylesheet_link_tag "tailwind" %>), before: /^\s*<%= stylesheet_link_tag/
+  say "Add Tailwindcss include tags and container element in application layout"
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
+    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+  ERB
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(    <main class="container mx-auto mt-28 px-5 flex">\n  ), before: /^\s*<%= yield/
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n    </main>),  after: /^\s*<%= yield %>/
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= stylesheet_link_tag "inter-font" %> and <%= stylesheet_link_tag "tailwind" %> within the <head> tag in your custom layout.)
+  say %(        Add <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %> and <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
+end
+
+# No longer included by default in Rails 7, but for earlier versions of Rails
+if (scaffolds_css_path = Rails.root.join("app/assets/stylesheets/scaffolds.scss")).exist?
+  remove_file scaffolds_css_path
 end
 
 say "Turn on purging of unused css classes in production"

data/lib/tailwindcss/engine.rb

@@ -19,5 +19,9 @@ module Tailwindcss
         env.cache = ActiveSupport::Cache.lookup_store(:null_store)
       end if Rails.env.production?
     end
+
+     config.app_generators do |g|
+       g.template_engine :tailwindcss
+     end
   end
 end

data/lib/tailwindcss/purger.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Tailwindcss::Purger
-  CLASS_NAME_PATTERN = /[:A-Za-z0-9_-]+[\.]*[\\\/:A-Za-z0-9_-]*/
+  CLASS_NAME_PATTERN = /((?:[:A-Za-z0-9_-]+[\\\/:A-Za-z0-9_-]*[0-3][\\.]*5)|(?:[A-Za-z0-9_-]+[\\\/:A-Za-z0-9_-]*))/
 
   CLASS_BREAK = /(?![-_a-z0-9\\])/i # `\b` for class selectors
 
@@ -29,7 +29,7 @@ class Tailwindcss::Purger
     end
 
     def extract_class_names(string)
-      string.scan(CLASS_NAME_PATTERN).uniq.sort!
+      string.scan(CLASS_NAME_PATTERN).flatten.uniq.sort!
     end
 
     def extract_class_names_from(files)

data/lib/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-18 00:00:00.000000000 Z
+date: 2021-09-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,7 +24,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.0.0
-description:
+description: 
 email: david@loudthinking.com
 executables: []
 extensions: []
@@ -51,6 +51,13 @@ files:
 - app/assets/fonts/Inter-roman.vietnamese.var.woff2
 - app/assets/stylesheets/inter-font.css.erb
 - app/assets/stylesheets/tailwind.css
+- lib/generators/tailwindcss/scaffold/scaffold_generator.rb
+- lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt
+- lib/generators/tailwindcss/scaffold/templates/edit.html.erb.tt
+- lib/generators/tailwindcss/scaffold/templates/index.html.erb.tt
+- lib/generators/tailwindcss/scaffold/templates/new.html.erb.tt
+- lib/generators/tailwindcss/scaffold/templates/partial.html.erb.tt
+- lib/generators/tailwindcss/scaffold/templates/show.html.erb.tt
 - lib/install/tailwindcss.rb
 - lib/tailwindcss-rails.rb
 - lib/tailwindcss/compressor.rb
@@ -63,7 +70,7 @@ licenses:
 - MIT
 metadata:
   homepage_uri: https://github.com/rails/tailwindcss-rails
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -79,7 +86,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.4
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Integrate Tailwind CSS with the asset pipeline in Rails.
 test_files: []