Tailwind CSS support in Angular 10, with Angular Material

tailwind-angular

Index: client/angular.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/angular.json	(revision fcfaf7440d0eaed6baa841b2b4d9eca231b002f6)
+++ client/angular.json	(date 1603593891228)
@@ -39,7 +39,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "dist/client",
             "index": "projects/client/src/index.html",
@@ -52,9 +52,13 @@
               "projects/client/src/assets"
             ],
             "styles": [
-              "projects/client/src/styles.scss"
+              "projects/client/src/styles.scss",
+              "projects/client/src/tailwind.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            }
           },
           "configurations": {
             "production": {
@@ -88,9 +92,12 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "client:build"
+            "browserTarget": "client:build",
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            }
           },
           "configurations": {
             "production": {
@@ -111,7 +118,8 @@
             "polyfills": "projects/client/src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "styles": [
-              "projects/client/src/styles.scss"
+              "projects/client/src/styles.scss",
+              "projects/client/src/tailwind.scss"
             ],
             "scripts": [],
             "assets": [
Index: client/webpack.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/webpack.config.js	(date 1603593951904)
+++ client/webpack.config.js	(date 1603593951904)
@@ -0,0 +1,21 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /tailwind\.scss$/,
+        loader: "postcss-loader",
+        options: {
+          postcssOptions: {
+            ident: "postcss",
+            syntax: "postcss-scss",
+            plugins: [
+              require("postcss-import"),
+              require("tailwindcss"),
+              require("autoprefixer"),
+            ]
+          }
+        },
+      },
+    ],
+  },
+};
Index: client/projects/client/src/tailwind.scss
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/projects/client/src/tailwind.scss	(date 1603593927700)
+++ client/projects/client/src/tailwind.scss	(date 1603593927700)
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
Index: client/tailwind.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/tailwind.config.js	(date 1603592726965)
+++ client/tailwind.config.js	(date 1603592726965)
@@ -0,0 +1,15 @@
+module.exports = {
+  future: {
+    // removeDeprecatedGapUtilities: true,
+    // purgeLayersByDefault: true,
+  },
+  purge: [
+    './src/**/*.html',
+    './src/**/*.ts',
+  ],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}
Index: client/package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/package.json	(revision fcfaf7440d0eaed6baa841b2b4d9eca231b002f6)
+++ client/package.json	(date 1603593311034)
@@ -30,6 +30,7 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^10.0.1",
     "@angular-builders/jest": "^10.0.1",
     "@angular-devkit/build-angular": "~0.1001.7",
     "@angular/cli": "~10.1.0",
@@ -38,6 +39,11 @@
     "@types/jest": "^26.0.14",
     "@types/node": "^12.11.1",
     "jest": "^26.5.3",
+    "postcss": "^8.1.4",
+    "postcss-import": "^13.0.0",
+    "postcss-loader": "^4.0.4",
+    "postcss-scss": "^3.0.2",
+    "tailwindcss": "^1.9.5",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "tslint-config-standard": "^9.0.0",