tailwindcss-rails 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99416d349fce684c991f63dc815098ceaa1db8c8b39b8e96433dddc4c24a8272
-  data.tar.gz: 21e605c05506a77ac87d499d5c20d4e2beee1ff7782de1cc0ffec97927904452
+  metadata.gz: 701b64bd008b24b1c6ab9326bab2ee6969c146a7333c94cf42ddd5dbf97b921d
+  data.tar.gz: 10bda805262704aa1b5c636912b230a0b92fa3d36d3e7c3f576948394ca2a970
 SHA512:
-  metadata.gz: 5f246a6972ccc630e858692dd4b93b57f57dff0d0d797c9955b058b8f107cbd0a73bde1498145187f7ffe366f14da93be51142a148b30ed4a3d4cd953c9654f3
-  data.tar.gz: 06c58f56cd53d85309ccc1ef2d080c217d3a56a20af9b6bcaad761bc8dc352ec95765a223670c724f7f9d38ec1358e0e05dc43f12113f06fac269cdf7a9adac1
+  metadata.gz: 2607f40c055081e498850564e7651bb5cf5a59045aab9f5b1755ba67f84e54f9c801a47bcf9f989951d9ca622de69e47d98f1c05e4f9b26b47b70e829727e294
+  data.tar.gz: 8638603b509534a513367b755088cf19dbaf07493e39c52c9b45ea258b5d28142b82d16e012a649e5979371db7a064126fbe14fb775c3318459f09e230762fea

data/README.md

@@ -2,11 +2,11 @@
 
 [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.
 
-Tailwind CSS for Rails makes it easy to use this CSS framework with the asset pipeline. In development mode, the full 3mb+ Tailwind stylsheet is loaded, but in production, only the css classes used by files in `app/views` and `app/helpers` are included.
+Tailwind CSS for Rails works with both the asset pipeline and Webpacker.
 
-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.
+When use with the asset pipeline, 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 stylsheet 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.
 
-The version of Tailwind included in this gem has been configured for dark mode, forms, aspect-ratio, typography, and the Inter font.
+When used with Webpacker, Tailwind CSS is installed as a postCSS processor. Refer to the [TailwindCSS documentation](https://tailwindcss.com/docs/installation#customizing-your-configuration) to customize your tailwind.config.js file.
 
 
 ## Installation
@@ -14,15 +14,18 @@ The version of Tailwind included in this gem has been configured for dark mode,
 1. Run `./bin/bundle add tailwindcss-rails`
 2. Run `./bin/rails tailwindcss:install` (on a fresh Rails application)
 
-The last option 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/application.html.erb` file.
+When run on an app using the just the asset pipeline, 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/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/scaffold.scss` that Rails adds after running a scaffold command. This stylesheet will interfere with Tailwind's reset of base styles.
 
+When run on an app using Webpacker, the last step adds the npm dependencies for Tailwind CSS, configures postCSS, and generates a app/javascript/stylesheets/application.scss file as the default for using Tailwind.
+
+
 ## 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.
+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.
 
 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:
 
@@ -35,7 +38,7 @@ end
 
 ## Configuration
 
-If you need to customize what files are searched for class names, you need to replace the compressor line with something like:
+If you need to customize what files are searched for class names when using the asset pipeline, you need to replace the compressor line with something like:
 
 ```ruby
   config.assets.css_compressor = Tailwindcss::Compressor.new(files_with_class_names: Rails.root.glob("app/somehere/**/*.*"))
@@ -52,4 +55,4 @@ By default, the CSS purger will only operate on the tailwind css file included w
 
 Tailwind for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).
 Tailwind CSS is released under the [MIT License](https://opensource.org/licenses/MIT).
-The Inter font is relased under the [SIL Open Font License, Version 1.1](https://github.com/rsms/inter/blob/master/LICENSE.txt).
+The Inter font is relased under the [SIL Open Font License, Version 1.1](https://github.com/rsms/inter/blob/master/LICENSE.txt).

data/lib/install/stylesheets/application.scss

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

data/lib/install/tailwindcss_with_webpacker.rb

@@ -0,0 +1,24 @@
+LATEST_WEBPACKER         = "\"@rails\/webpacker\": \"rails\/webpacker#b6c2180\","
+WEBPACK_STYLESHEETS_PATH = "#{Webpacker.config.source_path}/stylesheets"
+APPLICATION_LAYOUT_PATH  = Rails.root.join("app/views/layouts/application.html.erb")
+
+# Current webpacker version relies on an older version of PostCSS
+# which the latest TailwindCSS version is not compatible with
+gsub_file("package.json", /\"@rails\/webpacker\".*/) { |matched_line| matched_line = LATEST_WEBPACKER }
+
+say "Adding latest Tailwind CSS and postCSS"
+run "yarn add tailwindcss@latest postcss@latest autoprefixer@latest"
+insert_into_file "#{Webpacker.config.source_entry_path}/application.js", "\nrequire(\"stylesheets/application.scss\")\n"
+
+say "Adding minimal configuration for Tailwind CSS to work properly"
+directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets")
+
+insert_into_file "postcss.config.js", "require('tailwindcss'),\n\t", before: "require('postcss-import')"
+
+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_pack_tag "application", "data-turbo-track": "reload" %>), before: /\s*<\/head>/
+else
+  say "Default application.html.erb is missing!", :red
+  say %(        Add <%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
+end

data/lib/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "0.2.1"
+  VERSION = "0.3.0"
 end

data/lib/tasks/tailwindcss_tasks.rake

@@ -1,18 +1,44 @@
 namespace :tailwindcss do
   desc "Install Tailwind CSS into the app"
   task :install do
-    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/tailwindcss.rb", __dir__)}"
+    if defined?(Webpacker::Engine)
+      Rake::Task["tailwindcss:install:webpacker"].invoke
+    else
+      Rake::Task["tailwindcss:install:asset_pipeline"].invoke
+    end
+  end
+
+  namespace :install do
+    desc "Install Tailwind CSS with the asset pipeline"
+    task :asset_pipeline do
+      run_install_template "tailwindcss_with_asset_pipeline"
+    end
+
+    desc "Install Tailwind CSS with webpacker"
+    task :webpacker do
+      run_install_template "tailwindcss_with_webpacker"
+    end
   end
 
   desc "Show the list of class names being kept in Tailwind CSS"
   task :keeping_class_names do
-    puts Tailwindcss::Purger.extract_class_names_from(Rails.root.glob("app/views/**/*.*") + Rails.root.glob("app/helpers/**/*.rb"))
+    puts Tailwindcss::Purger.extract_class_names_from(default_files_with_class_names)
   end
 
   desc "Show Tailwind CSS styles that are left after purging unused class names"
   task :preview_purge do
-    puts Tailwindcss::Purger.purge \
-      Pathname.new(__FILE__).join("../../../app/assets/stylesheets/tailwind.css").read,
-      keeping_class_names_from_files: Rails.root.glob("app/views/**/*.*") + Rails.root.glob("app/helpers/**/*.rb")
+    puts Tailwindcss::Purger.purge tailwind_css, keeping_class_names_from_files: default_files_with_class_names
   end
 end
+
+def run_install_template(path)
+  system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/#{path}.rb", __dir__)}"
+end
+
+def default_files_with_class_names
+  Rails.root.glob("app/views/**/*.*") + Rails.root.glob("app/helpers/**/*.rb")
+end
+
+def tailwind_css
+  Pathname.new(__FILE__).join("../../../app/assets/stylesheets/tailwind.css").read
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-18 00:00:00.000000000 Z
+date: 2021-01-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -51,7 +51,9 @@ files:
 - app/assets/fonts/Inter-roman.vietnamese.var.woff2
 - app/assets/stylesheets/inter-font.css.erb
 - app/assets/stylesheets/tailwind.css
-- lib/install/tailwindcss.rb
+- lib/install/stylesheets/application.scss
+- lib/install/tailwindcss_with_asset_pipeline.rb
+- lib/install/tailwindcss_with_webpacker.rb
 - lib/tailwindcss-rails.rb
 - lib/tailwindcss/compressor.rb
 - lib/tailwindcss/engine.rb