Bump Tailwind CSS

Author: shimaenaga1123

.gitignore

@@ -41,3 +41,4 @@ testem.log
 .DS_Store
 Thumbs.db
 .claude/
+tailwind-output.css

angular.json

@@ -34,6 +34,7 @@
               }
             ],
             "styles": [
+              "src/tailwind-output.css",
               "src/styles.scss"
             ]
           },
@@ -98,6 +99,7 @@
               }
             ],
             "styles": [
+              "src/tailwind-output.css",
               "src/styles.scss"
             ]
           }

bun.lock

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
+    "start": "tailwindcss --watch --input src/tailwind.css --output src/tailwind-output.css & ng serve",
+    "build": "tailwindcss --input src/tailwind.css --output src/tailwind-output.css --minify && ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
@@ -28,15 +28,13 @@
     "@angular/cli": "20.0.2",
     "@angular/compiler-cli": "20.0.3",
     "@types/jasmine": "5.1.8",
-    "autoprefixer": "^10.4.21",
     "jasmine-core": "5.8.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "postcss": "^8.5.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.8.3"
   }
 }

package.json

@@ -1,9 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 
-// Import Tailwind CSS
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+// Tailwind CSS will be compiled separately and imported via angular.json
 
 // Import Google Fonts
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

postcss.config.js

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+@theme {
+  --color-md-sys-color-primary: var(--md-sys-color-primary);
+  --color-md-sys-color-on-primary: var(--md-sys-color-on-primary);
+  --color-md-sys-color-primary-container: var(--md-sys-color-primary-container);
+  --color-md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container);
+  
+  --color-md-sys-color-secondary: var(--md-sys-color-secondary);
+  --color-md-sys-color-on-secondary: var(--md-sys-color-on-secondary);
+  --color-md-sys-color-secondary-container: var(--md-sys-color-secondary-container);
+  --color-md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container);
+  
+  --color-md-sys-color-tertiary: var(--md-sys-color-tertiary);
+  --color-md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary);
+  --color-md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container);
+  --color-md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+  
+  --color-md-sys-color-error: var(--md-sys-color-error);
+  --color-md-sys-color-on-error: var(--md-sys-color-on-error);
+  --color-md-sys-color-error-container: var(--md-sys-color-error-container);
+  --color-md-sys-color-on-error-container: var(--md-sys-color-on-error-container);
+  
+  --color-md-sys-color-surface: var(--md-sys-color-surface);
+  --color-md-sys-color-on-surface: var(--md-sys-color-on-surface);
+  --color-md-sys-color-surface-variant: var(--md-sys-color-surface-variant);
+  --color-md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant);
+  --color-md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest);
+  --color-md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high);
+  --color-md-sys-color-surface-container: var(--md-sys-color-surface-container);
+  --color-md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low);
+  --color-md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
+  --color-md-sys-color-surface-dim: var(--md-sys-color-surface-dim);
+  --color-md-sys-color-surface-bright: var(--md-sys-color-surface-bright);
+  
+  --color-md-sys-color-outline: var(--md-sys-color-outline);
+  --color-md-sys-color-outline-variant: var(--md-sys-color-outline-variant);
+  
+  --color-md-sys-color-shadow: var(--md-sys-color-shadow);
+  --color-md-sys-color-scrim: var(--md-sys-color-scrim);
+  --color-md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface);
+  --color-md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+  --color-md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary);
+
+  --radius-none: 0px;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+  --radius-3xl: 28px;
+  --radius-full: 9999px;
+
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-32: 128px;
+
+  --shadow-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+}