feat: add tailwind config

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "dfinity-foundation.vscode-motoko",
     "dbaeumer.vscode-eslint",
-    "astro-build.astro-vscode"
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  }
+}

angular.json

@@ -5,8 +5,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "inlineTemplate": true,
-      "inlineStyle": true,
-      "style": "scss",
+      "style": "none",
       "changeDetection": "OnPush",
       "standalone": true
     }
@@ -32,13 +31,12 @@
             "index": "src/frontend/src/index.html",
             "browser": "src/frontend/src/main.ts",
             "tsConfig": "src/frontend/tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
             "assets": [
               "src/frontend/src/favicon.ico",
               "src/frontend/src/.ic-assets.json",
               "src/frontend/src/assets"
             ],
-            "styles": ["src/frontend/src/app.scss"],
+            "styles": ["src/frontend/src/app.css"],
             "polyfills": ["zone.js"],
             "scripts": []
           },
@@ -94,12 +92,11 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "src/frontend/tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
             "assets": [
               "src/frontend/src/favicon.ico",
               "src/frontend/src/assets"
             ],
-            "styles": ["src/frontend/src/app.scss"],
+            "styles": ["src/frontend/src/app.css"],
             "polyfills": ["zone.js", "zone.js/testing"],
             "scripts": []
           }

lib/tailwind/common.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

lib/tailwind/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@cg/tailwind",
+  "private": true,
+  "main": "preset.js"
+}

lib/tailwind/preset.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+  theme: {},
+};

package.json

@@ -14,29 +14,33 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "@dfinity/agent": "^0.20.2",
     "@dfinity/auth-client": "^0.20.2",
     "@dfinity/candid": "^0.20.2",
     "@dfinity/principal": "^0.20.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.4.1",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
     "@angular/cli": "^17.0.8",
+    "@cg/tailwind": "workspace:*",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "dotenv": "^16.3.1",
     "eslint": "^8.0.1",
     "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "typescript": "~5.2.2",
-    "tslib": "^2.6.2",
     "prettier": "^3.1.1",
-    "dotenv": "^16.3.1"
+    "tslib": "^2.6.2",
+    "typescript": "~5.2.2"
   }
 }