diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index e7f29d76ac..ae0850373e 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { mergeProps } from '../utils/Utils';
-import { BadgeBase } from './BadgeBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { BadgeBase } from './BadgeBase';
 
 export const Badge = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -26,7 +26,7 @@ export const Badge = React.memo(
             {
                 ref: elementRef,
                 style: props.style,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             BadgeBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js
index a5aeac47fc..709346c548 100644
--- a/components/lib/badge/BadgeBase.js
+++ b/components/lib/badge/BadgeBase.js
@@ -1,6 +1,52 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { ObjectUtils, classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-badge p-component', {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value),
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            [`p-badge-${props.severity}`]: props.severity !== null
+        })
+};
+
+const styles = `
+.p-badge {
+    display: inline-block;
+    border-radius: 10px;
+    text-align: center;
+    padding: 0 .5rem;
+}
+
+.p-overlay-badge {
+    position: relative;
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%,-50%);
+    transform-origin: 100% 0;
+    margin: 0;
+}
+
+.p-badge-dot {
+    width: .5rem;
+    min-width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.p-badge-no-gutter {
+    padding: 0;
+    border-radius: 50%;
+}
+`;
+
 export const BadgeBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Badge',
@@ -12,53 +58,7 @@ export const BadgeBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-badge p-component',
-                    {
-                        'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-                        'p-badge-dot': ObjectUtils.isEmpty(props.value),
-                        'p-badge-lg': props.size === 'large',
-                        'p-badge-xl': props.size === 'xlarge',
-                        [`p-badge-${props.severity}`]: props.severity !== null
-                    },
-                    props.className
-                )
-        },
-        styles: `
-        .p-badge {
-            display: inline-block;
-            border-radius: 10px;
-            text-align: center;
-            padding: 0 .5rem;
-        }
-        
-        .p-overlay-badge {
-            position: relative;
-        }
-        
-        .p-overlay-badge .p-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%,-50%);
-            transform-origin: 100% 0;
-            margin: 0;
-        }
-        
-        .p-badge-dot {
-            width: .5rem;
-            min-width: .5rem;
-            height: .5rem;
-            border-radius: 50%;
-            padding: 0;
-        }
-        
-        .p-badge-no-gutter {
-            padding: 0;
-            border-radius: 50%;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 480e6f6a64..7be3b92dbe 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { ChipBase } from './ChipBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Chip = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -97,7 +97,7 @@ export const Chip = React.memo(
                 {
                     ref: elementRef,
                     style: props.style,
-                    className: cx('root')
+                    className: classNames(props.className, cx('root'))
                 },
                 ChipBase.getOtherProps(props),
                 ptm('root')
diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js
index 283834f249..950aeaef97 100644
--- a/components/lib/chip/ChipBase.js
+++ b/components/lib/chip/ChipBase.js
@@ -1,6 +1,40 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-chip p-component', {
+            'p-chip-image': props.image != null
+        }),
+    removeIcon: 'p-chip-remove-icon',
+    icon: 'p-chip-icon',
+    label: 'p-chip-text'
+};
+
+const styles = `
+.p-chip {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-chip-text {
+    line-height: 1.5;
+}
+
+.p-chip-icon.pi {
+    line-height: 1.5;
+}
+
+.p-chip .p-chip-remove-icon {
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.p-chip img {
+    border-radius: 50%;
+}
+`;
+
 export const ChipBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Chip',
@@ -18,41 +52,7 @@ export const ChipBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-chip p-component',
-                    {
-                        'p-chip-image': props.image != null
-                    },
-                    props.className
-                ),
-            removeIcon: 'p-chip-remove-icon',
-            icon: 'p-chip-icon',
-            label: 'p-chip-text'
-        },
-        styles: `
-        .p-chip {
-            display: inline-flex;
-            align-items: center;
-        }
-        
-        .p-chip-text {
-            line-height: 1.5;
-        }
-        
-        .p-chip-icon.pi {
-            line-height: 1.5;
-        }
-        
-        .p-chip .p-chip-remove-icon {
-            line-height: 1.5;
-            cursor: pointer;
-        }
-        
-        .p-chip img {
-            border-radius: 50%;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 13a6c7472f..f68ce4ec94 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { localeOption, PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { TimesIcon } from '../icons/times';
-import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { InplaceBase } from './InplaceBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const InplaceDisplay = (props) => props.children;
 export const InplaceContent = (props) => props.children;
@@ -138,7 +138,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     const rootProps = mergeProps(
         {
             ref: elementRef,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         InplaceBase.getOtherProps(props),
         ptm('root')
diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js
index abffd70032..f2d1e7c6f3 100644
--- a/components/lib/inplace/InplaceBase.js
+++ b/components/lib/inplace/InplaceBase.js
@@ -1,6 +1,43 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    display: ({ props }) =>
+        classNames('p-inplace-display', {
+            'p-disabled': props.disabled
+        }),
+    root: ({ props }) =>
+        classNames('p-inplace p-component', {
+            'p-inplace-closable': props.closable
+        }),
+    closeButton: 'p-inplace-content-close',
+    content: 'p-inplace-content'
+};
+
+const styles = `
+.p-inplace .p-inplace-display {
+    display: inline;
+    cursor: pointer;
+}
+
+.p-inplace .p-inplace-content {
+    display: inline;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+    display: flex;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-inplace-content-close {
+    margin-left: .25rem;
+}
+`;
+
 export const InplaceDisplayBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InplaceDisplay',
@@ -32,44 +69,7 @@ export const InplaceBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            display: ({ props }) =>
-                classNames('p-inplace-display', {
-                    'p-disabled': props.disabled
-                }),
-            root: ({ props }) =>
-                classNames(
-                    'p-inplace p-component',
-                    {
-                        'p-inplace-closable': props.closable
-                    },
-                    props.className
-                ),
-            closeButton: 'p-inplace-content-close',
-            content: 'p-inplace-content'
-        },
-        styles: `
-        .p-inplace .p-inplace-display {
-            display: inline;
-            cursor: pointer;
-        }
-        
-        .p-inplace .p-inplace-content {
-            display: inline;
-        }
-        
-        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
-            display: flex;
-        }
-        
-        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
-            flex: 1 1 auto;
-            width: 1%;
-        }
-        
-        .p-inplace-content-close {
-            margin-left: .25rem;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 111749862d..3522176480 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { mergeProps } from '../utils/Utils';
-import { ProgressBarBase } from './ProgressBarBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { ProgressBarBase } from './ProgressBarBase';
 
 export const ProgressBar = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -68,7 +68,7 @@ export const ProgressBar = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     role: 'progressbar'
                 },
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
index 698d27ede5..b81b839c64 100644
--- a/components/lib/progressbar/ProgressBarBase.js
+++ b/components/lib/progressbar/ProgressBarBase.js
@@ -2,11 +2,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => (props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate', props.className) : classNames('p-progressbar p-component p-progressbar-determinate', props.className)),
+    root: ({ props }) => (props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate')),
     value: 'p-progressbar-value p-progressbar-value-animate',
     label: 'p-progressbar-label',
     indeterminateContainer: 'p-progressbar-indeterminate-container'
 };
+
 const styles = `
 .p-progressbar {
     position: relative;
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
index 46877d84b0..a03cf323ca 100644
--- a/components/lib/progressspinner/ProgressSpinner.js
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { mergeProps } from '../utils/Utils';
-import { ProgressSpinnerBase } from './ProgressSpinnerBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { ProgressSpinnerBase } from './ProgressSpinnerBase';
 
 export const ProgressSpinner = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -27,7 +27,7 @@ export const ProgressSpinner = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 role: 'alert',
                 'aria-busy': true
             },
diff --git a/components/lib/progressspinner/ProgressSpinnerBase.js b/components/lib/progressspinner/ProgressSpinnerBase.js
index 6903c33912..0b7d1601fb 100644
--- a/components/lib/progressspinner/ProgressSpinnerBase.js
+++ b/components/lib/progressspinner/ProgressSpinnerBase.js
@@ -1,8 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-progress-spinner', props.className),
+    root: 'p-progress-spinner',
     spinner: 'p-progress-spinner-svg',
     circle: 'p-progress-spinner-circle'
 };
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index 6aada1f19e..7aea68a704 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useUnmountEffect } from '../hooks/Hooks';
 import { ChevronUpIcon } from '../icons/chevronup';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { ScrollTopBase } from './ScrollTopBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const ScrollTop = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -95,7 +95,7 @@ export const ScrollTop = React.memo(
             {
                 ref: scrollElementRef,
                 type: 'button',
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style,
                 onClick
             },
diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js
index e327256b03..e1941ec54f 100644
--- a/components/lib/scrolltop/ScrollTopBase.js
+++ b/components/lib/scrolltop/ScrollTopBase.js
@@ -1,6 +1,55 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-scrolltop p-link p-component', {
+            'p-scrolltop-sticky': props.target !== 'window'
+        }),
+    icon: 'p-scrolltop-icon'
+};
+
+const styles = `
+.p-scrolltop {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-scrolltop-sticky {
+    position: sticky;
+}
+
+.p-scrolltop-sticky.p-link {
+    margin-left: auto;
+}
+
+.p-scrolltop-helper {
+    display: none !important;
+}
+
+.p-scrolltop-enter {
+    opacity: 0;
+}
+
+.p-scrolltop-enter-active {
+    opacity: 1;
+    transition: opacity .15s;
+}
+
+.p-scrolltop-exit {
+    opacity: 1;
+}
+
+.p-scrolltop-exit-active {
+    opacity: 0;
+    transition: opacity .15s;
+}
+`;
+
 export const ScrollTopBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ScrollTop',
@@ -16,56 +65,7 @@ export const ScrollTopBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-scrolltop p-link p-component',
-                    {
-                        'p-scrolltop-sticky': props.target !== 'window'
-                    },
-                    props.className
-                ),
-            icon: 'p-scrolltop-icon'
-        },
-        styles: `
-        .p-scrolltop {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .p-scrolltop-sticky {
-            position: sticky;
-        }
-        
-        .p-scrolltop-sticky.p-link {
-            margin-left: auto;
-        }
-        
-        .p-scrolltop-helper {
-            display: none !important;
-        }
-        
-        .p-scrolltop-enter {
-            opacity: 0;
-        }
-        
-        .p-scrolltop-enter-active {
-            opacity: 1;
-            transition: opacity .15s;
-        }
-        
-        .p-scrolltop-exit {
-            opacity: 1;
-        }
-        
-        .p-scrolltop-exit-active {
-            opacity: 0;
-            transition: opacity .15s;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index c09054ff36..09ecf63891 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { mergeProps } from '../utils/Utils';
-import { SkeletonBase } from './SkeletonBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { SkeletonBase } from './SkeletonBase';
 
 export const Skeleton = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -24,7 +24,7 @@ export const Skeleton = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: sx('root')
             },
             SkeletonBase.getOtherProps(props),
diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js
index 2adc58f771..d3d13d43b2 100644
--- a/components/lib/skeleton/SkeletonBase.js
+++ b/components/lib/skeleton/SkeletonBase.js
@@ -1,6 +1,54 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-skeleton p-component', {
+            'p-skeleton-circle': props.shape === 'circle',
+            'p-skeleton-none': props.animation === 'none'
+        })
+};
+
+const styles = `
+.p-skeleton {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-skeleton::after {
+    content: "";
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+   animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => (props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius })
+};
+
 export const SkeletonBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Skeleton',
@@ -14,54 +62,8 @@ export const SkeletonBase = ComponentBase.extend({
         className: null
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-skeleton p-component',
-                    {
-                        'p-skeleton-circle': props.shape === 'circle',
-                        'p-skeleton-none': props.animation === 'none'
-                    },
-                    props.className
-                )
-        },
-        inlineStyles: {
-            root: ({ props }) => (props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius })
-        },
-        styles: `
-        .p-skeleton {
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .p-skeleton::after {
-            content: "";
-            animation: p-skeleton-animation 1.2s infinite;
-            height: 100%;
-            left: 0;
-            position: absolute;
-            right: 0;
-            top: 0;
-            transform: translateX(-100%);
-            z-index: 1;
-        }
-        
-        .p-skeleton-circle {
-            border-radius: 50%;
-        }
-        
-        .p-skeleton-none::after {
-           animation: none;
-        }
-        
-        @keyframes p-skeleton-animation {
-            from {
-                transform: translateX(-100%);
-            }
-            to {
-                transform: translateX(100%);
-            }
-        }
-        `
+        classes,
+        inlineStyles,
+        styles
     }
 });
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
index 57f0f520dd..8c32154b80 100644
--- a/components/lib/tag/Tag.js
+++ b/components/lib/tag/Tag.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { IconUtils, mergeProps } from '../utils/Utils';
-import { TagBase } from './TagBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { IconUtils, classNames, mergeProps } from '../utils/Utils';
+import { TagBase } from './TagBase';
 
 export const Tag = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -32,7 +32,7 @@ export const Tag = React.forwardRef((inProps, ref) => {
     const rootProps = mergeProps(
         {
             ref: elementRef,
-            className: cx('root'),
+            className: classNames(props.className, cx('root')),
             style: props.style
         },
         TagBase.getOtherProps(props),
diff --git a/components/lib/tag/TagBase.js b/components/lib/tag/TagBase.js
index d9163b2864..4e142ee391 100644
--- a/components/lib/tag/TagBase.js
+++ b/components/lib/tag/TagBase.js
@@ -1,6 +1,34 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    value: 'p-tag-value',
+    icon: 'p-tag-icon',
+    root: ({ props }) =>
+        classNames('p-tag p-component', {
+            [`p-tag-${props.severity}`]: props.severity !== null,
+            'p-tag-rounded': props.rounded
+        })
+};
+
+const styles = `
+.p-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tag-icon,
+.p-tag-value,
+.p-tag-icon.pi {
+    line-height: 1.5;
+}
+
+.p-tag.p-tag-rounded {
+    border-radius: 10rem;
+}
+`;
+
 export const TagBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Tag',
@@ -13,35 +41,7 @@ export const TagBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            value: 'p-tag-value',
-            icon: 'p-tag-icon',
-            root: ({ props }) =>
-                classNames(
-                    'p-tag p-component',
-                    {
-                        [`p-tag-${props.severity}`]: props.severity !== null,
-                        'p-tag-rounded': props.rounded
-                    },
-                    props.className
-                )
-        },
-        styles: `
-        .p-tag {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .p-tag-icon,
-        .p-tag-value,
-        .p-tag-icon.pi {
-            line-height: 1.5;
-        }
-        
-        .p-tag.p-tag-rounded {
-            border-radius: 10rem;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index 48e999b543..97741bc7e0 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TerminalService } from '../terminalservice/TerminalService';
-import { DomHandler, mergeProps } from '../utils/Utils';
-import { TerminalBase } from './TerminalBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { TerminalService } from '../terminalservice/TerminalService';
+import { DomHandler, classNames, mergeProps } from '../utils/Utils';
+import { TerminalBase } from './TerminalBase';
 
 export const Terminal = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -203,7 +203,7 @@ export const Terminal = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style,
                 onClick
             },
diff --git a/components/lib/terminal/TerminalBase.js b/components/lib/terminal/TerminalBase.js
index abd888d89b..af019b6ba3 100644
--- a/components/lib/terminal/TerminalBase.js
+++ b/components/lib/terminal/TerminalBase.js
@@ -1,8 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-terminal p-component', props.className),
+    root: 'p-terminal p-component',
     content: 'p-terminal-content',
     container: 'p-terminal-prompt-container',
     command: 'p-terminal-command',