broken-tailwind-2.x checkin

Author: Andrew Welch

buildchain/webpack-settings/app.settings.js

@@ -11,7 +11,9 @@ module.exports = {
     entry: {
         'app': [
             '../src/js/app.ts',
-            '../src/css/app.pcss',
+            '../src/css/app-base.pcss',
+            '../src/css/app-components.pcss',
+            '../src/css/app-utilities.pcss',
         ],
     },
     extensions: ['.ts', '.js', '.vue', '.json'],

src/css/app-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
+ *
+ */

src/css/app.pcss renamed to src/css/app-components.pcss

@@ -1,16 +1,3 @@
-/**
- * app.css
- *
- * The entry point for the css.
- *
- */
-
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- */
- @import "tailwindcss/base";
-
 /**
  * This injects any component classes registered by plugins.
  *
@@ -32,16 +19,3 @@
  *
  */
 @import './pages/homepage.pcss';
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- *
- */
-@import 'tailwindcss/utilities';
-
-/**
- * Include vendor css.
- *
- */
- @import 'vendor.pcss';

src/css/app-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';

src/css/components/global.pcss

@@ -5,6 +5,11 @@
  *
  */
 
+.my-cool-class {
+  @apply pt-4 mb-2 text-lg
+}
+
 body {
+  @apply my-cool-class
   background-color: orange;
 }

src/js/app.ts

@@ -1,6 +1,3 @@
-// Import our CSS
-import '../css/app.pcss';
-
 import App from "../vue/App.vue";
 
 // App main