diff --git a/package.json b/package.json
index de7f614..20e6079 100644
--- a/package.json
+++ b/package.json
@@ -45,23 +45,23 @@
     "core-js": "3.6.5",
     "js-event-bus": "^1.0.3",
     "regenerator-runtime": "^0.13.7",
-    "tailwindcss": "^1.9.4",
+    "tailwindcss": "^1.9.6",
     "vue": "^2.6.12"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
-    "@batch/craft-webpack": "^1.3.0",
+    "@batch/craft-webpack": "^1.4.3",
     "@jest/globals": "^26.5.0",
-    "@testing-library/dom": "^7.26.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/user-event": "^12.1.8",
-    "@testing-library/vue": "^5.1.0",
+    "@testing-library/dom": "^7.26.6",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/user-event": "^12.2.2",
+    "@testing-library/vue": "^5.3.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.3",
     "eslint-import-resolver-webpack": "^0.13.0",
-    "jest": "^26.5.3",
+    "jest": "^26.6.3",
     "prettier": "^2.1.2",
     "vue-jest": "^3.0.7"
   },
@@ -71,4 +71,4 @@
     "url": "https://github.com/batchnz/craft-starter/issues"
   },
   "homepage": "https://github.com/batchnz/craft-starter#readme"
-}
\ No newline at end of file
+}
diff --git a/src/css/app-base.css b/src/css/app-base.css
new file mode 100755
index 0000000..23541ef
--- /dev/null
+++ b/src/css/app-base.css
@@ -0,0 +1,13 @@
+/**
+ * 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
+ *
+ */
+@import "./base/fonts.css";
+@import "./base/variables.css";
diff --git a/src/css/app-components.css b/src/css/app-components.css
new file mode 100755
index 0000000..5978ade
--- /dev/null
+++ b/src/css/app-components.css
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+
+@import "./components/my-component.css";
diff --git a/src/css/app-utilities.css b/src/css/app-utilities.css
new file mode 100755
index 0000000..6bebe72
--- /dev/null
+++ b/src/css/app-utilities.css
@@ -0,0 +1,12 @@
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ */
+@import "tailwindcss/utilities";
+
+/**
+ * Here we add custom utility classes
+ *
+ */
+@import "./utilities/my-utility.css";
diff --git a/src/css/app.css b/src/css/app.css
deleted file mode 100755
index 5147faa..0000000
--- a/src/css/app.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@import './fonts.css';
-
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-
-/* Component includes go here */
-
-@import 'tailwindcss/utilities';
-
-/* Utility includes go here */
diff --git a/src/css/fonts.css b/src/css/base/fonts.css
similarity index 100%
rename from src/css/fonts.css
rename to src/css/base/fonts.css
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
new file mode 100644
index 0000000..f6ee02b
--- /dev/null
+++ b/src/css/base/variables.css
@@ -0,0 +1,3 @@
+/**
+ * Variables
+ */
diff --git a/src/css/components/my-component.css b/src/css/components/my-component.css
new file mode 100644
index 0000000..7a7cd25
--- /dev/null
+++ b/src/css/components/my-component.css
@@ -0,0 +1,3 @@
+/**
+ * Example component
+ */
diff --git a/src/css/utilities/my-utility.css b/src/css/utilities/my-utility.css
new file mode 100644
index 0000000..690155d
--- /dev/null
+++ b/src/css/utilities/my-utility.css
@@ -0,0 +1,3 @@
+/**
+ * Example utility
+ */
diff --git a/src/js/app.js b/src/js/app.js
index f7b42f2..ddd48d8 100755
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,6 +1,6 @@
-/* eslint-disable no-unused-vars */
-import styles from "../css/app.css";
-/* eslint-enable no-unused-vars */
+import "#css/app-base.css";
+import "#css/app-components.css";
+import "#css/app-utilities.css";
 
 const main = async () => {
   // Async load dependencies
@@ -29,7 +29,7 @@ main().then((components) => {
     el: "#app",
     components: {
       HelloWorld: () =>
-        import(/* webpackChunkName: "HelloWorld" */ "../vue/HelloWorld.vue"),
+        import(/* webpackChunkName: "HelloWorld" */ "#vue/HelloWorld.vue"),
     },
     mounted() {
       window.app.emit("vue-mounted");