Implement Tailwind CSS (#34)

Author: Matthbo

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "css"
         }
       },
       "root": "",
@@ -24,13 +24,13 @@
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": []
           },
@@ -84,13 +84,13 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": []
           }
@@ -112,7 +112,7 @@
       "projectType": "library",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "css"
         }
       },
       "root": "projects/angular-components",

package.json

@@ -3,56 +3,62 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng build angular-components && ng serve",
+    "start": "pnpm run build && ng serve",
     "serve": "ng serve",
-    "build": "ng build angular-components",
+    "build": "ng build angular-components && pnpm run build:css",
+    "build:css": "pnpm exec postcss projects/angular-components/src/bundle.css -o dist/angular-components/bundle.css",
     "watch": "ng build angular-components --watch",
     "test": "ng test",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.2.2",
-    "@angular/cdk": "^20.2.1",
-    "@angular/common": "^20.2.2",
-    "@angular/compiler": "^20.2.2",
-    "@angular/core": "^20.2.2",
-    "@angular/forms": "^20.2.2",
-    "@angular/platform-browser": "^20.2.2",
-    "@angular/platform-browser-dynamic": "^20.2.2",
-    "@angular/router": "^20.2.2",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.7.0",
+    "@angular/animations": "^20.3.14",
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.14",
+    "@angular/compiler": "^20.3.14",
+    "@angular/core": "^20.3.14",
+    "@angular/forms": "^20.3.14",
+    "@angular/platform-browser": "^20.3.14",
+    "@angular/platform-browser-dynamic": "^20.3.14",
+    "@angular/router": "^20.3.14",
+    "rxjs": "~7.8.2",
+    "tailwindcss": "^4.1.17",
+    "tslib": "^2.8.1",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "^20.2.0",
-    "@angular-eslint/eslint-plugin": "^20.2.0",
-    "@angular-eslint/eslint-plugin-template": "^20.2.0",
-    "@angular-eslint/schematics": "^20.2.0",
-    "@angular-eslint/template-parser": "^20.2.0",
-    "@angular/build": "^20.2.1",
-    "@angular/cli": "^20.2.1",
-    "@angular/compiler-cli": "^20.2.2",
-    "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
-    "angular-eslint": "^19.2.1",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
+    "@angular-eslint/builder": "^20.7.0",
+    "@angular-eslint/eslint-plugin": "^20.7.0",
+    "@angular-eslint/eslint-plugin-template": "^20.7.0",
+    "@angular-eslint/schematics": "^20.7.0",
+    "@angular-eslint/template-parser": "^20.7.0",
+    "@angular/build": "^20.3.12",
+    "@angular/cli": "^20.3.12",
+    "@angular/compiler-cli": "^20.3.14",
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/jasmine": "~5.1.13",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "angular-eslint": "^20.6.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-sonarjs": "^3.0.2",
+    "eslint-plugin-sonarjs": "^3.0.5",
     "eslint-plugin-unicorn": "^57.0.0",
-    "jasmine-core": "^5.3.0",
+    "jasmine-core": "^5.12.1",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^20.2.0",
-    "prettier": "^3.2.5",
-    "typescript": "~5.9.2",
-    "typescript-eslint": "^8.26.1"
+    "ng-packagr": "^20.3.2",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.6.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.47.0"
   },
-  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
+  "packageManager": "pnpm@10.23.0+sha512.21c4e5698002ade97e4efe8b8b4a89a8de3c85a37919f957e7a0f30f38fbc5bbdd05980ffe29179b2fb6e6e691242e098d945d1601772cad0fef5fb6411e2a4b"
 }