chore install tailwind, remove manually added utilities (#260)

angular.json

@@ -18,8 +18,9 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "ngx-build-plus:browser",
           "options": {
+            "extraWebpackConfig": "webpack.config.js",
             "outputPath": "dist/edc-demo-client",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -69,7 +70,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "ngx-build-plus:dev-server",
           "configurations": {
             "production": {
               "browserTarget": "edc-demo-client:build:production"
@@ -79,6 +80,7 @@
             }
           },
           "options": {
+            "extraWebpackConfig": "webpack.config.js",
             "browserTarget": "project-name:build"
           },
           "defaultConfiguration": "development"

package.json

@@ -50,8 +50,17 @@
     "karma-coverage": "^2.2.0",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "ngx-build-plus": "^14.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.0",
+    "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-attributes": "^0.0.5",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.8.4"
+  },
+  "resolutions": {
+    "@angular-devkit/build-angular": "14.2.11",
+    "@angular-devkit/core": "14.3.0"
   }
 }

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/styles.scss

@@ -1,4 +1,5 @@
 @forward 'theme';
+@forward 'tailwind';
 
 html,
 body {
@@ -97,215 +98,10 @@ body {
   }
 }
 
-/*
-  Tailwind Style Utility Classes
- */
-
-.w-full {
-  width: 100%;
-}
-
-.w-\[80px\] {
-  width: 80px;
-}
-
-.h-\[80px\] {
-  height: 80px;
-}
-
-.w-\[800px\] {
-  width: 800px;
-}
-
-.w-1\/3 {
-  width: calc(100% / 3);
-  max-width: calc(100% / 3);
-}
-
-.w-1\/2 {
-  width: calc(100% / 2);
-  max-width: calc(100% / 2);
-}
-
-.min-h-\[300px\] {
-  min-height: 300px;
-}
-
-.min-h-\[35rem\] {
-  min-height: 35rem;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.flex {
-  display: flex;
-}
-
-.\!flex {
-  display: flex !important;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
 .flex-even-sized {
   flex: 1 1 0;
 }
 
-.space-x-\[5px\] > * + * {
-  margin-left: 5px;
-}
-
-.space-x-\[4px\] > * + * {
-  margin-left: 4px;
-}
-
-.space-x-\[10px\] > * + * {
-  margin-left: 10px;
-}
-
-.\!space-x-\[10px\] > * + * {
-  margin-left: 10px !important;
-}
-
-.space-y-\[10px\] > * + * {
-  margin-top: 10px;
-}
-
-.space-y-\[16px\] > * + * {
-  margin-top: 16px;
-}
-
-.space-y-\[20px\] > * + * {
-  margin-top: 20px;
-}
-
-.space-x-\[20px\] > * + * {
-  margin-left: 20px;
-}
-
-.p-\[20px\] {
-  padding: 20px;
-}
-
-.m-\[20px\] {
-  margin: 20px;
-}
-
-.mt-\[10px\] {
-  margin-top: 10px;
-}
-
-.mt-\[15px\] {
-  margin-top: 15px;
-}
-
-.mt-\[40px\] {
-  margin-top: 10px;
-}
-
-.mb-\[10px\] {
-  margin-bottom: 10px;
-}
-
-.mt-\[50px\] {
-  margin-top: 50px;
-}
-
-.gap-\[10px\] {
-  gap: 10px;
-}
-
-.gap-\[16px\] {
-  gap: 16px;
-}
-
-// See https://tailwindcss.com/docs/flex-direction
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-// See https://tailwindcss.com/docs/flex-grow
-.grow {
-  flex-grow: 1;
-}
-
-// See https://tailwindcss.com/docs/flex-shrink
-.shrink-0 {
-  flex-shrink: 0;
-}
-
-.shrink {
-  flex-shrink: 1;
-}
-
-// See https://tailwindcss.com/docs/align-items
-.items-start {
-  align-items: flex-start;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-baseline {
-  align-items: baseline;
-}
-
-.items-stretch {
-  align-items: stretch;
-}
-
-// See https://tailwindcss.com/docs/justify-content
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
-// See https://tailwindcss.com/docs/background-color
-.bg-white {
-  background: white;
-}
-
-// See https://tailwindcss.com/docs/text-color
-.text-black {
-  color: black;
-}
-
 .text-slate {
   color: rgba(0, 0, 0, 0.54);
 }
@@ -318,43 +114,10 @@ body {
   background: rgba(0, 0, 0, 0.12);
 }
 
-// See https://tailwindcss.com/docs/font-size
 .text-sm {
   font-size: 0.8em;
 }
 
-// See https://tailwindcss.com/docs/text-align
-.text-center {
-  text-align: center;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-// See https://tailwindcss.com/docs/whitespace
-.whitespace-pre-line {
-  white-space: pre-line;
-}
-
-// See https://tailwindcss.com/docs/word-break
-.break-all {
-  word-break: break-all;
-}
-
-// See https://tailwindcss.com/docs/text-transform
-.uppercase {
-  text-transform: uppercase;
-}
-
 .mat-icon-\[80px\] {
   font-size: 80px !important;
   width: 80px !important;

src/tailwind.scss

@@ -0,0 +1,26 @@
+/**
+ * This injects Tailwind's base styles and any base styles registered by
+ * plugins.
+ */
+// @tailwind base;
+
+/**
+ * This injects Tailwind's component classes and any component classes
+ * registered by plugins.
+ */
+// @tailwind components;
+
+/**
+ * This injects Tailwind's utility classes and any utility classes registered
+ * by plugins.
+ */
+@tailwind utilities;
+
+/**
+ * Use this directive to control where Tailwind injects the hover, focus,
+ * responsive, dark mode, and other variants of each class.
+ *
+ * If omitted, Tailwind will append these classes to the very end of
+ * your stylesheet by default.
+ */
+// @tailwind variants;

tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  prefix: '',
+  purge: {
+    content: ['./src/**/*.{html,ts}'],
+  },
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  module: {
+    rules: [
+      // Add PostCSS Loader fir Tailwind Utilities
+      {
+        test: /\.scss$/,
+        loader: 'postcss-loader',
+        options: {
+          postcssOptions: {
+            ident: 'postcss',
+            syntax: 'postcss-scss',
+            plugins: [
+              require('postcss-import'),
+              require('tailwindcss'),
+              require('autoprefixer'),
+            ],
+          },
+        },
+      },
+    ],
+  },
+};