Skip to content

Remove webpacker support #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 18, 2021
Merged

Remove webpacker support #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d716f6
Remove webpacker support
dixpac Aug 17, 2021
03f1183
Fix mimemagic reference in the lockfile.
dixpac Aug 18, 2021
e1c76f1
Only one mode now
Aug 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 71 additions & 73 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,121 +7,119 @@ 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)
tzinfo (~> 2.0)
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)
Expand All @@ -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)
Expand All @@ -147,4 +145,4 @@ DEPENDENCIES
tailwindcss-rails!

BUNDLED WITH
2.1.4
2.2.3
10 changes: 4 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,24 @@

[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

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.
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

Expand Down
3 changes: 0 additions & 3 deletions lib/install/stylesheets/application.scss
View file
Open in desktop

This file was deleted.

0 ...nstall/tailwindcss_with_asset_pipeline.rb → lib/install/tailwindcss.rb
View file
Open in desktop
File renamed without changes.
22 changes: 0 additions & 22 deletions lib/install/tailwindcss_with_webpacker.rb
View file
Open in desktop

This file was deleted.

23 changes: 2 additions & 21 deletions lib/tasks/tailwindcss_tasks.rake
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -31,14 +15,11 @@ 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

def tailwind_css
Pathname.new(__FILE__).join("../../../app/assets/stylesheets/tailwind.css").read
end