Major build perf improvement

https://nystudio107.com/blog/speeding-up-tailwind-css-builds

tailwindlabs/tailwindcss#2820

Basically, the splits the CSS up into a bunch of separate files so that
Webpack only has to rebuild the *whole* tailwind thing rarely. HMR
reloading when the site is served is much faster!

assets/styles/base.pcss

@@ -0,0 +1,11 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ */
+@import 'tailwindcss/base';
+
+/**
+ * Here we add custom base styles, applied after the tailwind-base
+ * classes
+ *
+ */

assets/styles/components.pcss

@@ -0,0 +1,22 @@
+/**
+ * This injects any component classes registered by plugins.
+ *
+ */
+@import 'tailwindcss/components';
+
+/**
+ * Here we add custom component classes; stuff we want loaded
+ * *before* the utilities so that the utilities can still
+ * override them.
+ *
+ */
+
+/**
+ * This is CSS used for high-level layouts.
+ */
+@import "layouts/app.pcss";
+
+/**
+ * Our own components.
+ */
+@import "components/image.pcss";

assets/styles/components/image.pcss

@@ -0,0 +1,3 @@
+img {
+    border: 2px solid greenyellow;
+}

assets/styles/css.js

@@ -0,0 +1,9 @@
+/**
+ * This rigamarole is to so that we can import these as modules webpack
+ * will recognize, leading to faster rebuilds that don't get bogged down by
+ * Tailwind.
+ */
+
+import './base.pcss'
+import './components.pcss'
+import './utilities.pcss'

assets/styles/layouts/app.pcss

@@ -0,0 +1,3 @@
+body {
+    background-color: aquamarine;
+}

assets/styles/utilities.pcss

@@ -0,0 +1,12 @@
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ */
+@import 'tailwindcss/utilities';
+
+/**
+ * Include vendor css.
+ *
+ */
+@import 'vendor.pcss';

assets/styles/vendor.pcss

@@ -0,0 +1,3 @@
+/**
+ * Any files from external packages that are very unlikely to change.
+ */

build/webpack.config.base.js

@@ -11,6 +11,6 @@ module.exports = {
         publicPath: "/",
     },
     mode: process.env.NODE_ENV || 'development',
-    devtool: 'source-map',
+    devtool: 'eval-cheap-module-source-map',
     stats: 'errors-only',
 }

build/webpack.config.main.js

@@ -9,7 +9,7 @@ module.exports = {
     entry: {
         main: [
             path.join(__dirname, '..', 'assets', 'scripts', 'main.js'),
-            path.join(__dirname, '..', 'assets', 'styles', 'main.css'),
+            path.join(__dirname, '..', 'assets', 'styles', 'css.js'),
         ],
     },
     plugins: [
@@ -22,6 +22,9 @@ module.exports = {
         compress: true,
         port: 9000,
         watchContentBase: true,
+        hot: true,
+        publicPath: '/',
+        // stats: 'errors-only'
     },
     module: {
         rules: [
@@ -59,7 +62,7 @@ module.exports = {
                 },
             },
             {
-                test: /\.css$/i,
+                test: /\.?pcss$/i,
                 use: [
                     MiniCssExtractPlugin.loader,
                     {