Faster webpack compile time

When adding custom css into a separate file webpack does not have to compile the whole tailwindcss again but only the changes in application.scss
rails · Feb 7, 2021 · da7b43e · da7b43e
1 parent 38acbb0
commit da7b43e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/lib/install/stylesheets/application.scss b/lib/install/stylesheets/application.scss
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";

diff --git a/lib/install/stylesheets/tailwindcss/after.scss b/lib/install/stylesheets/tailwindcss/after.scss
@@ -0,0 +1,2 @@
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/lib/install/stylesheets/tailwindcss/before.scss b/lib/install/stylesheets/tailwindcss/before.scss
@@ -0,0 +1 @@
+@import "tailwindcss/base";
diff --git a/lib/install/tailwindcss_with_webpacker.rb b/lib/install/tailwindcss_with_webpacker.rb
@@ -3,7 +3,10 @@
 
 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"
+insert_into_file "#{Webpacker.config.source_entry_path}/application.js",
+  "\nimport \"stylesheets/tailwindcss/before\""\
+  "\nimport \"stylesheets/application\""\
+  "\nimport \"stylesheets/tailwindcss/after\"\n"
 
 say "Configuring Tailwind CSS"
 directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets")
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "tailwindcss/components";
		@import "tailwindcss/utilities";