Solution refactor

Author: Andrew Welch

src/css/app-base.pcss

@@ -0,0 +1,5 @@
+/**
+ * Here we add custom base styles, applied after the tailwind-base
+ * classes
+ *
+ */

src/css/app-components.pcss

@@ -0,0 +1,9 @@
+/**
+ * Here we add custom component classes; stuff we want loaded
+ * *before* the utilities so that the utilities can still
+ * override them.
+ *
+ */
+@import './components/global.pcss';
+@import './components/typography.pcss';
+@import './components/webfonts.pcss';

src/css/app-utilities.pcss

@@ -0,0 +1,11 @@
+/**
+ * Include styles for individual pages
+ *
+ */
+@import './pages/homepage.pcss';
+
+/**
+ * Include vendor css.
+ *
+ */
+ @import 'vendor.pcss';

src/css/app.pcss

@@ -0,0 +1,5 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ */
+@tailwind base;

src/css/tailwind-base.pcss

@@ -0,0 +1,5 @@
+/**
+ * This injects any component classes registered by plugins.
+ *
+ */
+@tailwind components;

src/css/tailwind-components.pcss

@@ -0,0 +1,6 @@
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ */
+@tailwind utilities;

src/css/tailwind-utilities.pcss

@@ -1,5 +1,10 @@
 // Import our CSS
-import '../css/app.pcss';
+import '../css/tailwind-base.pcss';
+import '../css/app-base.pcss';
+import '../css/tailwind-components.pcss';
+import '../css/app-components.pcss';
+import '../css/tailwind-utilities.pcss';
+import '../css/app-utilities.pcss';
 
 import App from "../vue/App.vue";