diff --git a/.gitignore b/.gitignore index 6aa31c67..62527ab3 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ /node_modules .byebug_history *.gem +.idea/ \ No newline at end of file diff --git a/README.md b/README.md index e08fb7cb..738231d5 100644 --- a/README.md +++ b/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). \ No newline at end of file diff --git a/lib/install/tailwindcss.rb b/lib/install/tailwindcss_with_asset_pipeline.rb similarity index 100% rename from lib/install/tailwindcss.rb rename to lib/install/tailwindcss_with_asset_pipeline.rb diff --git a/lib/install/tailwindcss_with_webpacker.rb b/lib/install/tailwindcss_with_webpacker.rb new file mode 100644 index 00000000..7b0ec8a3 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/tasks/tailwindcss_tasks.rake b/lib/tasks/tailwindcss_tasks.rake index 5d01188e..3279ff09 100644 --- a/lib/tasks/tailwindcss_tasks.rake +++ b/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