Faster webpack recompilation

Author: codingluke

lib/install/stylesheets/application.scss

@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+
+// Add custom base styles here
+// https://tailwindcss.com/docs/adding-base-styles

lib/install/stylesheets/base.scss

@@ -0,0 +1,4 @@
+@import "tailwindcss/components";
+
+// Import components added to `./components/` here
+// https://tailwindcss.com/docs/extracting-components

lib/install/stylesheets/components.scss

@@ -0,0 +1,4 @@
+@import "tailwindcss/utilities";
+
+// Import vendor CSS here
+// https://tailwindcss.com/docs/adding-new-utilities

lib/install/stylesheets/components/.keep

@@ -3,7 +3,11 @@
 
 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",
+  "\n// Imported separately for faster Webpack recompilation. Order matters\""\
+  "\nimport \"stylesheets/base\""\
+  "\nimport \"stylesheets/components\""\
+  "\nimport \"stylesheets/utilities\"\n"
 
 say "Configuring Tailwind CSS"
 directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets")