diff --git a/api-generator/build-css.js b/api-generator/build-css.js
new file mode 100644
index 0000000000..8c0ef46270
--- /dev/null
+++ b/api-generator/build-css.js
@@ -0,0 +1,115 @@
+const gulp = require('gulp');
+const fs = require('fs');
+const path = require('path');
+const uglifycss = require('gulp-uglifycss');
+const rename = require('gulp-rename');
+
+// directories
+const rootDir = path.resolve(__dirname, '../');
+const distDir = path.resolve(rootDir, 'dist/resources');
+const libDir = path.resolve(rootDir, 'components/lib');
+
+function findFilesWithExtension(directory, extension) {
+    if (!fs.existsSync(directory)) {
+        // eslint-disable-next-line no-console
+        console.error(`Directory "${directory}" does not exist.`);
+
+        return;
+    }
+
+    const filesAndSubdirs = fs.readdirSync(directory);
+
+    filesAndSubdirs.forEach((item) => {
+        const itemPath = path.join(directory, item);
+
+        if (fs.statSync(itemPath).isFile()) {
+            if (item.endsWith(extension)) {
+                // Process the file and extract styles
+                processFile(itemPath);
+            }
+        } else if (fs.statSync(itemPath).isDirectory()) {
+            findFilesWithExtension(itemPath, extension);
+        }
+    });
+}
+
+function removeLayerAndLastBrace(inputString) {
+    // Remove the text "@layer primereact {" from the string
+    const withoutLayer = inputString.replace(/@layer primereact {/, '');
+
+    // Find the last occurrence of '}' and remove it
+    const lastIndex = withoutLayer.lastIndexOf('}');
+
+    if (lastIndex !== -1) {
+        return withoutLayer.substring(0, lastIndex) + withoutLayer.substring(lastIndex + 1);
+    }
+
+    return withoutLayer;
+}
+
+function processFile(filePath) {
+    try {
+        const regexes = [
+            /const styles = `([\s\S]*?)`/s,
+            /const baseStyle = `([\s\S]*?)`/s,
+            /const buttonStyles = `([\s\S]*?)`/s,
+            /const checkboxStyles = `([\s\S]*?)`/s,
+            /const inputTextStyles = `([\s\S]*?)`/s,
+            /const radioButtonStyles = `([\s\S]*?)`/s,
+            /const iconStyles = `([\s\S]*?)`/s,
+            /const commonStyles = `([\s\S]*?)`/s
+        ];
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+
+        for (let index = 0; index < regexes.length; index++) {
+            const regex = regexes[index];
+            const matches = regex.exec(fileContent);
+
+            if (matches && matches[1]) {
+                let styles = matches[1];
+                const hasLayer = styles.includes('@layer primereact');
+
+                if (hasLayer) {
+                    styles = removeLayerAndLastBrace(styles);
+                    // Append the styles to the primereact.css file
+                    fs.appendFileSync(path.resolve(distDir, 'primereact.css'), styles);
+
+                    // eslint-disable-next-line no-console
+                    console.log(`Styles from ${filePath} added to primereact.css`);
+                }
+            }
+        }
+    } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(`Error processing file ${filePath}: ${err.message}`);
+    }
+}
+
+const fileExtensionToFind = 'Base.js';
+
+// Clear the existing primereact.css file
+!fs.existsSync(distDir) && fs.mkdirSync(distDir);
+
+// start the layer
+fs.writeFileSync(path.resolve(distDir, 'primereact.css'), `@layer primereact {\n`);
+
+findFilesWithExtension(libDir, fileExtensionToFind);
+
+// close the layer
+fs.appendFileSync(path.resolve(distDir, 'primereact.css'), `}\n`);
+
+// Create a Gulp task to minimize the generated CSS
+gulp.task('minify-css', function () {
+    return gulp
+        .src(path.resolve(distDir, 'primereact.css'))
+        .pipe(uglifycss())
+        .pipe(rename('primereact.min.css')) // Renaming the file
+        .pipe(gulp.dest('./dist/resources/'))
+        .on('end', function () {
+            // eslint-disable-next-line no-console
+            console.log('CSS file minimized and saved as primereact.css');
+        });
+});
+
+// Run the Gulp 'minify-css' task
+gulp.series('minify-css')();
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index a5edf8ecf5..dcaac3d465 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -244,170 +244,173 @@ svg.p-icon g,
     }
 }
 `;
-const commonStyle = `
-@layer primereact {
-    .p-component, .p-component * {
-        box-sizing: border-box;
-    }
+const commonStyles = `
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
 
-    .p-hidden {
-        display: none;
-    }
+.p-hidden {
+    display: none;
+}
 
-    .p-hidden-space {
-        visibility: hidden;
-    }
+.p-hidden-space {
+    visibility: hidden;
+}
 
-    .p-reset {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        outline: 0;
-        text-decoration: none;
-        font-size: 100%;
-        list-style: none;
-    }
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
 
-    .p-disabled, .p-disabled * {
-        cursor: default;
-        pointer-events: none;
-        user-select: none;
-    }
+.p-disabled, .p-disabled * {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+}
 
-    .p-component-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
-    .p-unselectable-text {
-        user-select: none;
-    }
+.p-unselectable-text {
+    user-select: none;
+}
 
-    .p-scrollbar-measure {
-        width: 100px;
-        height: 100px;
-        overflow: scroll;
-        position: absolute;
-        top: -9999px;
-    }
+.p-scrollbar-measure {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    position: absolute;
+    top: -9999px;
+}
 
-    @-webkit-keyframes p-fadein {
-      0%   { opacity: 0; }
-      100% { opacity: 1; }
-    }
-    @keyframes p-fadein {
-      0%   { opacity: 0; }
-      100% { opacity: 1; }
-    }
+@-webkit-keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
 
-    .p-link {
-        text-align: left;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        border: none;
-        cursor: pointer;
-        user-select: none;
-    }
+.p-link {
+    text-align: left;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+}
 
-    .p-link:disabled {
-        cursor: default;
-    }
+.p-link:disabled {
+    cursor: default;
+}
 
-    /* Non react overlay animations */
-    .p-connected-overlay {
-        opacity: 0;
-        transform: scaleY(0.8);
-        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-    }
+/* Non react overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
 
-    .p-connected-overlay-visible {
-        opacity: 1;
-        transform: scaleY(1);
-    }
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
 
-    .p-connected-overlay-hidden {
-        opacity: 0;
-        transform: scaleY(1);
-        transition: opacity .1s linear;
-    }
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
 
-    /* React based overlay animations */
-    .p-connected-overlay-enter {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
+/* React based overlay animations */
+.p-connected-overlay-enter {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
 
-    .p-connected-overlay-enter-active {
-        opacity: 1;
-        transform: scaleY(1);
-        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-    }
+.p-connected-overlay-enter-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
 
-    .p-connected-overlay-enter-done {
-        transform: none;
-    }
+.p-connected-overlay-enter-done {
+    transform: none;
+}
 
-    .p-connected-overlay-exit {
-        opacity: 1;
-    }
+.p-connected-overlay-exit {
+    opacity: 1;
+}
 
-    .p-connected-overlay-exit-active {
-        opacity: 0;
-        transition: opacity .1s linear;
-    }
+.p-connected-overlay-exit-active {
+    opacity: 0;
+    transition: opacity .1s linear;
+}
 
-    /* Toggleable Content */
-    .p-toggleable-content-enter {
-        max-height: 0;
-    }
+/* Toggleable Content */
+.p-toggleable-content-enter {
+    max-height: 0;
+}
 
-    .p-toggleable-content-enter-active {
-        overflow: hidden;
-        max-height: 1000px;
-        transition: max-height 1s ease-in-out;
-    }
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height 1s ease-in-out;
+}
 
-    .p-toggleable-content-enter-done {
-        transform: none;
-    }
+.p-toggleable-content-enter-done {
+    transform: none;
+}
 
-    .p-toggleable-content-exit {
-        max-height: 1000px;
-    }
+.p-toggleable-content-exit {
+    max-height: 1000px;
+}
 
-    .p-toggleable-content-exit-active {
-        overflow: hidden;
-        max-height: 0;
-        transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-    }
+.p-toggleable-content-exit-active {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
 
-    .p-sr-only {
-        border: 0;
-        clip: rect(1px, 1px, 1px, 1px);
-        clip-path: inset(50%);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-        word-wrap: normal;
-    }
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal;
+}
 
-    /* @todo Refactor */
-    .p-menu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
+/* @todo Refactor */
+.p-menu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+`;
 
+const commonStyle = `
+@layer primereact {
+    ${commonStyles}
     ${buttonStyles}
     ${inputTextStyles}
     ${iconStyles}
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
index cdecbdbaf5..e2c4248714 100644
--- a/components/lib/progressbar/ProgressBarBase.js
+++ b/components/lib/progressbar/ProgressBarBase.js
@@ -60,52 +60,52 @@ const styles = `
       -webkit-animation-delay: 1.15s;
               animation-delay: 1.15s;
   }
-}
 
-@-webkit-keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
-}
-@keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
-}
-@keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
+  @-webkit-keyframes p-progressbar-indeterminate-anim {
+    0% {
+      left: -35%;
+      right: 100%; }
+    60% {
+      left: 100%;
+      right: -90%; }
+    100% {
+      left: 100%;
+      right: -90%; }
+  }
+  @keyframes p-progressbar-indeterminate-anim {
+    0% {
+      left: -35%;
+      right: 100%; }
+    60% {
+      left: 100%;
+      right: -90%; }
+    100% {
+      left: 100%;
+      right: -90%; }
+  }
+  
+  @-webkit-keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+      left: -200%;
+      right: 100%; }
+    60% {
+      left: 107%;
+      right: -8%; }
+    100% {
+      left: 107%;
+      right: -8%; }
+  }
+  @keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+      left: -200%;
+      right: 100%; }
+    60% {
+      left: 107%;
+      right: -8%; }
+    100% {
+      left: 107%;
+      right: -8%; }
+  }
 }
 `;
 
diff --git a/components/lib/progressspinner/ProgressSpinnerBase.js b/components/lib/progressspinner/ProgressSpinnerBase.js
index b05adbf559..95eab71e74 100644
--- a/components/lib/progressspinner/ProgressSpinnerBase.js
+++ b/components/lib/progressspinner/ProgressSpinnerBase.js
@@ -41,43 +41,43 @@ const styles = `
         animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
         stroke-linecap: round;
     }
-}
-
-@keyframes p-progress-spinner-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes p-progress-spinner-dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
 
-@keyframes p-progress-spinner-color {
-    100%,
-    0% {
-        stroke: #d62d20;
-    }
-    40% {
-        stroke: #0057e7;
+    @keyframes p-progress-spinner-rotate {
+        100% {
+            transform: rotate(360deg);
+        }
     }
-    66% {
-        stroke: #008744;
+    
+    @keyframes p-progress-spinner-dash {
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
     }
-    80%,
-    90% {
-        stroke: #ffa700;
+    
+    @keyframes p-progress-spinner-color {
+        100%,
+        0% {
+            stroke: #d62d20;
+        }
+        40% {
+            stroke: #0057e7;
+        }
+        66% {
+            stroke: #008744;
+        }
+        80%,
+        90% {
+            stroke: #ffa700;
+        }
     }
 }
 `;
diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js
index d520f47b20..8c53557149 100644
--- a/components/lib/ripple/RippleBase.js
+++ b/components/lib/ripple/RippleBase.js
@@ -23,15 +23,14 @@ const styles = `
     .p-ripple-disabled .p-ink {
         display: none;
     }
-}
 
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
     }
 }
-
 `;
 
 const classes = {
diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js
index d92bee8809..2c21df28c8 100644
--- a/components/lib/skeleton/SkeletonBase.js
+++ b/components/lib/skeleton/SkeletonBase.js
@@ -35,14 +35,14 @@ const styles = `
     .p-skeleton-none::after {
         animation: none;
     }
-}
 
-@keyframes p-skeleton-animation {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(100%);
+    @keyframes p-skeleton-animation {
+        from {
+            transform: translateX(-100%);
+        }
+        to {
+            transform: translateX(100%);
+        }
     }
 }
 `;
diff --git a/gulpfile.js b/gulpfile.js
index 5b1a1f76e0..83ee4d763e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,21 +6,6 @@ var gulp = require('gulp'),
     rename = require('gulp-rename'),
     flatten = require('gulp-flatten');
 
-/** @deprecated */
-gulp.task('build-css', function () {
-    return gulp
-        .src([process.env.INPUT_DIR + 'common/Common.css', process.env.INPUT_DIR + '**/*.css'])
-        .pipe(concat('primereact.css'))
-        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'))
-        .pipe(uglifycss({ uglyComments: true }))
-        .pipe(rename('primereact.min.css'))
-        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'));
-});
-
-gulp.task('build-primereactcss', function () {
-    return gulp.src(['./styles/primereact.css']).pipe(concat('primereact.css')).pipe(gulp.dest('dist/resources')).pipe(rename('primereact.min.css')).pipe(gulp.dest('dist/resources'));
-});
-
 gulp.task('build-themes', function () {
     return (
         gulp
@@ -46,20 +31,6 @@ gulp.task('build-meta', function () {
     return gulp.src(['README.md', 'LICENSE.md']).pipe(gulp.dest(process.env.OUTPUT_DIR));
 });
 
-/** @deprecated */
-gulp.task('copy-css', function () {
-    return gulp
-        .src([process.env.INPUT_DIR + '**/Common.css', process.env.INPUT_DIR + '**/*.css'])
-        .pipe(uglifycss({ uglyComments: true }))
-        .pipe(
-            rename(function (path) {
-                path.basename = path.basename.toLowerCase();
-                path.extname = '.min' + path.extname;
-            })
-        )
-        .pipe(gulp.dest('./' + process.env.OUTPUT_DIR));
-});
-
 gulp.task('copy-d.ts', function () {
     return gulp
         .src(process.env.INPUT_DIR + '**/*.d.ts')
@@ -77,4 +48,4 @@ gulp.task('copy-package.json', function () {
 
 //Building project with run sequence
 gulp.task('copy-files', gulp.series('copy-d.ts', 'copy-package.json'));
-gulp.task('build-resources', gulp.series('build-primereactcss', 'images', 'build-themes', 'build-meta', 'copy-files'));
+gulp.task('build-resources', gulp.series('images', 'build-themes', 'build-meta', 'copy-files'));
diff --git a/package.json b/package.json
index 4fffc5600e..4abd8fca6e 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,13 @@
         "dev": "next dev",
         "start": "next start",
         "build": "next build",
+        "build:css": "node ./api-generator/build-css.js",
         "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package",
-        "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api",
+        "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:css && npm run build:api",
+        "build:lib:dev": "NPM_LINK=true NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
         "dev:link": "NPM_LINK=true NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
         "dev:link:windows": "set NPM_LINK=true && set NODE_ENV=production&& set INPUT_DIR=components/lib/&& set OUTPUT_DIR=dist/&& npm run build:package:dev",
-        "build:package:dev": "npm run build:check && rollup -c --watch && gulp build-resources && npm run build:api",
+        "build:package:dev": "npm run build:check && rollup -c --watch && gulp build-resources && run build:css && npm run build:api",
         "build:api": "npm run apiwebtypes && npm run apidoc",
         "build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check",
         "security:check": "npm audit --production --audit-level high",