fix: resolve CSS cascade issue with UI components and Tailwind utilities

- Move UI component styles to @layer components in tailwind.scss
- Remove ui.scss and integrate imports directly into component layer
- Add SCSS files to Tailwind content config to prevent CSS class purging
- Update Angular project configuration to remove ui.scss references
- Ensure Tailwind utilities can override component styles properly

Refs: #5195

apps/isa-app/project.json

@@ -39,7 +39,6 @@
         "styles": [
           "@angular/cdk/overlay-prebuilt.css",
           "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/ui.scss",
           "apps/isa-app/src/styles.scss"
         ],
         "scripts": []
@@ -129,7 +128,6 @@
         ],
         "styles": [
           "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/ui.scss",
           "apps/isa-app/src/tailwind.scss",
           "apps/isa-app/src/styles.scss"
         ]
@@ -150,7 +148,6 @@
         "compodoc": false,
         "styles": [
           "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/ui.scss",
           "apps/isa-app/src/tailwind.scss",
           "apps/isa-app/src/styles.scss"
         ]

apps/isa-app/src/tailwind.scss

@@ -1,13 +1,23 @@
-@use './scss/components';
+@use "./scss/components";
-@use './scss/root';
+@use "./scss/root";
-@use './scss/customer';
+@use "./scss/customer";
-@use './scss/branch';
+@use "./scss/branch";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer components {
+  @import "../../../libs/ui/buttons/src/buttons.scss";
+  @import "../../../libs/ui/datepicker/src/datepicker.scss";
+  @import "../../../libs/ui/dialog/src/dialog.scss";
+  @import "../../../libs/ui/input-controls/src/input-controls.scss";
+  @import "../../../libs/ui/menu/src/menu.scss";
+  @import "../../../libs/ui/progress-bar/src/lib/progress-bar.scss";
+  @import "../../../libs/ui/search-bar/src/search-bar.scss";
+  @import "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss";
+  @import "../../../libs/ui/tooltip/src/tooltip.scss";
+
   .input-control {
     @apply rounded border border-solid border-[#AEB7C1] px-4 py-[1.125rem] outline-none;
   }

apps/isa-app/src/ui.scss

@@ -1,9 +0,0 @@
-@use "../../../libs/ui/buttons/src/buttons.scss";
-@use "../../../libs/ui/datepicker/src/datepicker.scss";
-@use "../../../libs/ui/dialog/src/dialog.scss";
-@use "../../../libs/ui/input-controls/src/input-controls.scss";
-@use "../../../libs/ui/menu/src/menu.scss";
-@use "../../../libs/ui/progress-bar/src/lib/progress-bar.scss";
-@use "../../../libs/ui/search-bar/src/search-bar.scss";
-@use "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss";
-@use "../../../libs/ui/tooltip/src/tooltip.scss";

tailwind.config.js

@@ -2,7 +2,7 @@ const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'],
+  content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}', './libs/**/*.scss'],
   darkMode: 'media', // or 'media' or 'class',
   theme: {
     screens: {