Install script for Webpack

.gitignore

@@ -11,3 +11,4 @@
 /node_modules
 .byebug_history
 *.gem
+.idea/

README.md

@@ -4,7 +4,7 @@
 
 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.
 
-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 just gives access to the standard Tailwind CSS framework. If you need to customize Tailwind, you will need to have [Webpacker](https://github.com/rails/webpacker) installed. Tailwind will be installed automatically if Webpacker is installed. After this you need to refer to the [TailwindCSS documentation](https://tailwindcss.com/docs/installation#customizing-your-configuration) to customize your tailwind.config.js file.
 
 The version of Tailwind included in this gem has been configured for dark mode, forms, aspect-ratio, typography, and the Inter font.
 
@@ -52,4 +52,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).

lib/install/tailwindcss_with_webpacker.rb

@@ -0,0 +1,24 @@
+LATEST_WEBPACKER = "\"@rails\/webpacker\": \"rails\/webpacker#b6c2180\",".freeze
+TAILWIND_IMPORTS = "@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n".freeze
+
+say "Installing Tailwind CSS"
+
+# 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 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 TailwindCSS to work properly"
+stylesheets_directory = "#{Webpacker.config.source_path}/stylesheets"
+empty_directory stylesheets_directory
+add_file "#{stylesheets_directory}/application.scss"
+insert_into_file "#{stylesheets_directory}/application.scss", TAILWIND_IMPORTS
+
+insert_into_file "postcss.config.js",
+                 "require('tailwindcss'),\n\t", before: "require('postcss-import')"
+
+say "Tailwind CSS successfully installed️", :green

lib/tasks/tailwindcss_tasks.rake

@@ -1,7 +1,15 @@
+def run_install_template(path)
+  system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/#{path}.rb", __dir__)}"
+end
+
 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
 
   desc "Show the list of class names being kept in Tailwind CSS"
@@ -15,4 +23,16 @@ namespace :tailwindcss do
       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")
   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
 end