From 8d716f6657ba550428a4ab1d2e0a8a7e08a88c2a Mon Sep 17 00:00:00 2001 From: Dino Maric Date: Tue, 17 Aug 2021 14:22:39 +0200 Subject: [PATCH 1/3] Remove webpacker support The heart of this engine is a sprockets-specific approach to using TW with the asset pipeline. By removing the webpacker support we can focus our efforts in building a better TW asset pipeline approach. Currently, if you need advanced TW configuration you will need to go through the webpack(or other js bundlers). --- README.md | 10 ++++---- lib/install/stylesheets/application.scss | 3 --- ..._with_asset_pipeline.rb => tailwindcss.rb} | 0 lib/install/tailwindcss_with_webpacker.rb | 22 ------------------ lib/tasks/tailwindcss_tasks.rake | 23 ++----------------- 5 files changed, 6 insertions(+), 52 deletions(-) delete mode 100644 lib/install/stylesheets/application.scss rename lib/install/{tailwindcss_with_asset_pipeline.rb => tailwindcss.rb} (100%) delete mode 100644 lib/install/tailwindcss_with_webpacker.rb diff --git a/README.md b/README.md index f1c3341b..b643003e 100644 --- a/README.md +++ b/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 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 used 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 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 3mb+ Tailwind stylesheet is loaded. -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. +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. ## Installation @@ -14,14 +14,12 @@ When used with Webpacker, Tailwind CSS is installed as a postCSS processor. Refe 1. Run `./bin/bundle add tailwindcss-rails` 2. Run `./bin/rails tailwindcss:install` (on a fresh Rails application) -When run on an app using 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. +When run on an app using 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/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. -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 diff --git a/lib/install/stylesheets/application.scss b/lib/install/stylesheets/application.scss deleted file mode 100644 index 76fcadcc..00000000 --- a/lib/install/stylesheets/application.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; diff --git a/lib/install/tailwindcss_with_asset_pipeline.rb b/lib/install/tailwindcss.rb similarity index 100% rename from lib/install/tailwindcss_with_asset_pipeline.rb rename to lib/install/tailwindcss.rb diff --git a/lib/install/tailwindcss_with_webpacker.rb b/lib/install/tailwindcss_with_webpacker.rb deleted file mode 100644 index b80c637f..00000000 --- a/lib/install/tailwindcss_with_webpacker.rb +++ /dev/null @@ -1,22 +0,0 @@ -WEBPACK_STYLESHEETS_PATH = "#{Webpacker.config.source_path}/stylesheets" -APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb") - -say "Installing Tailwind CSS" -run "yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9" -insert_into_file "#{Webpacker.config.source_entry_path}/application.js", "\nimport \"stylesheets/application\"\n" - -say "Configuring Tailwind CSS" -directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets") -Dir.chdir(WEBPACK_STYLESHEETS_PATH) { run "npx tailwindcss init" } - -insert_into_file "postcss.config.js", "require('tailwindcss')(\"./app/javascript/stylesheets/tailwind.config.js\"),\n ", - 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 tag in your custom layout.) -end diff --git a/lib/tasks/tailwindcss_tasks.rake b/lib/tasks/tailwindcss_tasks.rake index f26ac123..f568e76f 100644 --- a/lib/tasks/tailwindcss_tasks.rake +++ b/lib/tasks/tailwindcss_tasks.rake @@ -1,23 +1,7 @@ namespace :tailwindcss do desc "Install Tailwind CSS into the app" task :install do - 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 + system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/tailwindcss.rb", __dir__)}" end desc "Show the list of class names being kept in Tailwind CSS" @@ -31,10 +15,6 @@ namespace :tailwindcss do 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 @@ -42,3 +22,4 @@ end def tailwind_css Pathname.new(__FILE__).join("../../../app/assets/stylesheets/tailwind.css").read end + From 03f1183e0c719a0c5e348b0bec9d3e292a5b5c2f Mon Sep 17 00:00:00 2001 From: Dino Maric Date: Wed, 18 Aug 2021 10:38:40 +0200 Subject: [PATCH 2/3] Fix mimemagic reference in the lockfile. --- Gemfile.lock | 144 +++++++++++++++++++++++++-------------------------- 1 file changed, 71 insertions(+), 73 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 423f2ac6..c5c78897 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,60 +7,60 @@ PATH GEM remote: https://rubygems.org/ specs: - actioncable (6.1.1) - actionpack (= 6.1.1) - activesupport (= 6.1.1) + actioncable (6.1.4) + actionpack (= 6.1.4) + activesupport (= 6.1.4) nio4r (~> 2.0) websocket-driver (>= 0.6.1) - actionmailbox (6.1.1) - actionpack (= 6.1.1) - activejob (= 6.1.1) - activerecord (= 6.1.1) - activestorage (= 6.1.1) - activesupport (= 6.1.1) + actionmailbox (6.1.4) + actionpack (= 6.1.4) + activejob (= 6.1.4) + activerecord (= 6.1.4) + activestorage (= 6.1.4) + activesupport (= 6.1.4) mail (>= 2.7.1) - actionmailer (6.1.1) - actionpack (= 6.1.1) - actionview (= 6.1.1) - activejob (= 6.1.1) - activesupport (= 6.1.1) + actionmailer (6.1.4) + actionpack (= 6.1.4) + actionview (= 6.1.4) + activejob (= 6.1.4) + activesupport (= 6.1.4) mail (~> 2.5, >= 2.5.4) rails-dom-testing (~> 2.0) - actionpack (6.1.1) - actionview (= 6.1.1) - activesupport (= 6.1.1) + actionpack (6.1.4) + actionview (= 6.1.4) + activesupport (= 6.1.4) rack (~> 2.0, >= 2.0.9) rack-test (>= 0.6.3) rails-dom-testing (~> 2.0) rails-html-sanitizer (~> 1.0, >= 1.2.0) - actiontext (6.1.1) - actionpack (= 6.1.1) - activerecord (= 6.1.1) - activestorage (= 6.1.1) - activesupport (= 6.1.1) + actiontext (6.1.4) + actionpack (= 6.1.4) + activerecord (= 6.1.4) + activestorage (= 6.1.4) + activesupport (= 6.1.4) nokogiri (>= 1.8.5) - actionview (6.1.1) - activesupport (= 6.1.1) + actionview (6.1.4) + activesupport (= 6.1.4) builder (~> 3.1) erubi (~> 1.4) rails-dom-testing (~> 2.0) rails-html-sanitizer (~> 1.1, >= 1.2.0) - activejob (6.1.1) - activesupport (= 6.1.1) + activejob (6.1.4) + activesupport (= 6.1.4) globalid (>= 0.3.6) - activemodel (6.1.1) - activesupport (= 6.1.1) - activerecord (6.1.1) - activemodel (= 6.1.1) - activesupport (= 6.1.1) - activestorage (6.1.1) - actionpack (= 6.1.1) - activejob (= 6.1.1) - activerecord (= 6.1.1) - activesupport (= 6.1.1) - marcel (~> 0.3.1) - mimemagic (~> 0.3.2) - activesupport (6.1.1) + activemodel (6.1.4) + activesupport (= 6.1.4) + activerecord (6.1.4) + activemodel (= 6.1.4) + activesupport (= 6.1.4) + activestorage (6.1.4) + actionpack (= 6.1.4) + activejob (= 6.1.4) + activerecord (= 6.1.4) + activesupport (= 6.1.4) + marcel (~> 1.0.0) + mini_mime (>= 1.1.0) + activesupport (6.1.4) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (>= 1.6, < 2) minitest (>= 5.1) @@ -68,60 +68,58 @@ GEM zeitwerk (~> 2.3) builder (3.2.4) byebug (11.1.3) - concurrent-ruby (1.1.8) + concurrent-ruby (1.1.9) crass (1.0.6) erubi (1.10.0) - globalid (0.4.2) - activesupport (>= 4.2.0) - i18n (1.8.8) + globalid (0.5.2) + activesupport (>= 5.0) + i18n (1.8.10) concurrent-ruby (~> 1.0) - loofah (2.9.0) + loofah (2.11.0) crass (~> 1.0.2) nokogiri (>= 1.5.9) mail (2.7.1) mini_mime (>= 0.1.1) - marcel (0.3.3) - mimemagic (~> 0.3.2) + marcel (1.0.1) method_source (1.0.0) - mimemagic (0.3.5) - mini_mime (1.0.2) - mini_portile2 (2.5.0) - minitest (5.14.3) - nio4r (2.5.5) - nokogiri (1.11.1) - mini_portile2 (~> 2.5.0) + mini_mime (1.1.0) + mini_portile2 (2.6.1) + minitest (5.14.4) + nio4r (2.5.8) + nokogiri (1.12.2) + mini_portile2 (~> 2.6.1) racc (~> 1.4) racc (1.5.2) rack (2.2.3) rack-test (1.1.0) rack (>= 1.0, < 3) - rails (6.1.1) - actioncable (= 6.1.1) - actionmailbox (= 6.1.1) - actionmailer (= 6.1.1) - actionpack (= 6.1.1) - actiontext (= 6.1.1) - actionview (= 6.1.1) - activejob (= 6.1.1) - activemodel (= 6.1.1) - activerecord (= 6.1.1) - activestorage (= 6.1.1) - activesupport (= 6.1.1) + rails (6.1.4) + actioncable (= 6.1.4) + actionmailbox (= 6.1.4) + actionmailer (= 6.1.4) + actionpack (= 6.1.4) + actiontext (= 6.1.4) + actionview (= 6.1.4) + activejob (= 6.1.4) + activemodel (= 6.1.4) + activerecord (= 6.1.4) + activestorage (= 6.1.4) + activesupport (= 6.1.4) bundler (>= 1.15.0) - railties (= 6.1.1) + railties (= 6.1.4) sprockets-rails (>= 2.0.0) rails-dom-testing (2.0.3) activesupport (>= 4.2.0) nokogiri (>= 1.6) rails-html-sanitizer (1.3.0) loofah (~> 2.3) - railties (6.1.1) - actionpack (= 6.1.1) - activesupport (= 6.1.1) + railties (6.1.4) + actionpack (= 6.1.4) + activesupport (= 6.1.4) method_source - rake (>= 0.8.7) + rake (>= 0.13) thor (~> 1.0) - rake (13.0.3) + rake (13.0.6) sprockets (4.0.2) concurrent-ruby (~> 1.0) rack (> 1, < 3) @@ -133,7 +131,7 @@ GEM thor (1.1.0) tzinfo (2.0.4) concurrent-ruby (~> 1.0) - websocket-driver (0.7.3) + websocket-driver (0.7.5) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.5) zeitwerk (2.4.2) @@ -147,4 +145,4 @@ DEPENDENCIES tailwindcss-rails! BUNDLED WITH - 2.1.4 + 2.2.3 From e1c76f14968b7cdba5911f12843c381aaab50e96 Mon Sep 17 00:00:00 2001 From: David Heinemeier Hansson Date: Wed, 18 Aug 2021 10:47:07 +0200 Subject: [PATCH 3/3] Only one mode now --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b643003e..122ff1f7 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ In both cases, Tailwind CSS is configured for dark mode, forms, aspect-ratio, ty 1. Run `./bin/bundle add tailwindcss-rails` 2. Run `./bin/rails tailwindcss:install` (on a fresh Rails application) -When run on an app using 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/layouts/application.html.erb` file. +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.