From 48f92d3966ae92e91764fa31d1eb49b048d24ae6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 20 May 2024 15:14:38 +0300
Subject: [PATCH] Migrated demos

---
 doc/accordion/ControlledDoc.vue               |  32 +-
 doc/accordion/TemplateDoc.vue                 |  48 +--
 doc/animateonscroll/BasicDoc.vue              | 116 +++----
 doc/autocomplete/BasicDoc.vue                 |   6 +-
 doc/autocomplete/DisabledDoc.vue              |   6 +-
 doc/autocomplete/DropdownDoc.vue              |   6 +-
 doc/autocomplete/FilledDoc.vue                |   6 +-
 doc/autocomplete/FloatLabelDoc.vue            |   6 +-
 doc/autocomplete/ForceSelectionDoc.vue        |   6 +-
 doc/autocomplete/GroupDoc.vue                 |  14 +-
 doc/autocomplete/InvalidDoc.vue               |   6 +-
 doc/autocomplete/ObjectsDoc.vue               |   6 +-
 doc/autocomplete/TemplateDoc.vue              |   6 +-
 doc/autocomplete/VirtualScrollDoc.vue         |   6 +-
 doc/avatar/AvatarGroupDoc.vue                 |   6 +-
 doc/avatar/IconDoc.vue                        |   6 +-
 doc/avatar/ImageDoc.vue                       |  14 +-
 doc/avatar/LabelDoc.vue                       |   6 +-
 doc/badge/BasicDoc.vue                        |   6 +-
 doc/badge/ButtonDoc.vue                       |   6 +-
 doc/badge/PositionDoc.vue                     |   6 +-
 doc/badge/SeverityDoc.vue                     |   6 +-
 doc/badge/SizeDoc.vue                         |   6 +-
 doc/blockui/BasicDoc.vue                      |   8 +-
 doc/breadcrumb/BasicDoc.vue                   |   6 +-
 doc/breadcrumb/RouterDoc.vue                  |  14 +-
 doc/breadcrumb/TemplateDoc.vue                |   6 +-
 doc/button/AccessibilityDoc.vue               |   2 +-
 doc/button/BadgesDoc.vue                      |   6 +-
 doc/button/BasicDoc.vue                       |   6 +-
 doc/button/ButtonGroupDoc.vue                 |   6 +-
 doc/button/DisabledDoc.vue                    |   6 +-
 doc/button/IconOnlyDoc.vue                    |  30 +-
 doc/button/IconsDoc.vue                       |  12 +-
 doc/button/LinkDoc.vue                        |   6 +-
 doc/button/LoadingDoc.vue                     |   6 +-
 doc/button/OutlinedDoc.vue                    |   6 +-
 doc/button/RaisedDoc.vue                      |   6 +-
 doc/button/RaisedTextDoc.vue                  |   6 +-
 doc/button/RoundedDoc.vue                     |   6 +-
 doc/button/SeverityDoc.vue                    |   6 +-
 doc/button/SizesDoc.vue                       |   6 +-
 doc/button/TemplateDoc.vue                    |   6 +-
 doc/button/TextDoc.vue                        |   6 +-
 doc/card/AdvancedDoc.vue                      |  10 +-
 doc/card/BasicDoc.vue                         |   2 +-
 doc/carousel/BasicDoc.vue                     |  40 +--
 doc/carousel/CircularDoc.vue                  |  40 +--
 doc/carousel/ResponsiveDoc.vue                |  40 +--
 doc/carousel/VerticalDoc.vue                  |  48 +--
 doc/cascadeselect/BasicDoc.vue                |   6 +-
 doc/cascadeselect/DisabledDoc.vue             |   6 +-
 doc/cascadeselect/FilledDoc.vue               |   6 +-
 doc/cascadeselect/FloatLabelDoc.vue           |   6 +-
 doc/cascadeselect/InvalidDoc.vue              |   6 +-
 doc/cascadeselect/LoadingStateDoc.vue         |   6 +-
 doc/cascadeselect/TemplateDoc.vue             |  14 +-
 doc/chart/ComboDoc.vue                        |   8 +-
 doc/chart/DoughnutDoc.vue                     |  14 +-
 doc/chart/HorizontalBarDoc.vue                |   8 +-
 doc/chart/LineDoc.vue                         |   8 +-
 doc/chart/LineStylesDoc.vue                   |   8 +-
 doc/chart/MultiAxisDoc.vue                    |   8 +-
 doc/chart/PieChartDoc.vue                     |  14 +-
 doc/chart/PolarAreaDoc.vue                    |  14 +-
 doc/chart/RadarDoc.vue                        |  14 +-
 doc/chart/StackedBarDoc.vue                   |   8 +-
 doc/chart/VerticalBarDoc.vue                  |   8 +-
 doc/checkbox/BasicDoc.vue                     |   6 +-
 doc/checkbox/DisabledDoc.vue                  |   6 +-
 doc/checkbox/DynamicDoc.vue                   |  20 +-
 doc/checkbox/FilledDoc.vue                    |   6 +-
 doc/checkbox/GroupDoc.vue                     |  40 +--
 doc/checkbox/IndeterminateDoc.vue             |   6 +-
 doc/checkbox/InvalidDoc.vue                   |   6 +-
 doc/chip/TemplateDoc.vue                      |  16 +-
 doc/colorpicker/AccessibilityDoc.vue          |   2 +-
 doc/colorpicker/BasicDoc.vue                  |   6 +-
 doc/colorpicker/DisabledDoc.vue               |   6 +-
 doc/colorpicker/FormatDoc.vue                 |  48 +--
 doc/colorpicker/InlineDoc.vue                 |   6 +-
 doc/configuration/PTDoc.vue                   |   2 +-
 doc/confirmdialog/BasicDoc.vue                |   6 +-
 doc/confirmdialog/HeadlessDoc.vue             |  50 +--
 doc/confirmdialog/PositionDoc.vue             |  24 +-
 doc/confirmdialog/TemplateDoc.vue             |  14 +-
 doc/confirmpopup/BasicDoc.vue                 |   6 +-
 doc/confirmpopup/HeadlessDoc.vue              |  22 +-
 doc/confirmpopup/TemplateDoc.vue              |  14 +-
 doc/contextmenu/BasicDoc.vue                  |  12 +-
 doc/contextmenu/CommandDoc.vue                |  30 +-
 doc/contextmenu/RouterDoc.vue                 |  14 +-
 doc/contextmenu/TemplateDoc.vue               |  78 ++---
 doc/datatable/ConditionalStyleDoc.vue         |  12 +-
 doc/datatable/LazyLoadDoc.vue                 |  16 +-
 doc/datatable/RowExpansionDoc.vue             |  24 +-
 doc/datatable/SizeDoc.vue                     |   6 +-
 doc/datatable/StatefulDoc.vue                 |  24 +-
 doc/datatable/TemplateDoc.vue                 |  24 +-
 doc/datatable/filter/AdvancedFilterDoc.vue    |  56 ++--
 doc/datatable/filter/BasicFilterDoc.vue       |  32 +-
 .../rowgroup/ExpandableRowGroupDoc.vue        |  24 +-
 doc/datatable/rowgroup/RowSpanRowGroupDoc.vue |  16 +-
 .../rowgroup/SubHeaderRowGroupDoc.vue         |  24 +-
 .../rowselection/MultipleRowsSelectionDoc.vue |   6 +-
 .../rowselection/SingleRowSelectionDoc.vue    |   6 +-
 doc/datatable/samples/CustomersDoc.vue        |  48 +--
 doc/datatable/samples/ProductsDoc.vue         |  90 +++---
 doc/datatable/scroll/FlexibleScrollDoc.vue    |   2 +-
 doc/datatable/scroll/FrozenColumnsDoc.vue     |   8 +-
 .../virtualscroll/LazyVirtualScrollDoc.vue    |  40 +--
 doc/dataview/BasicDoc.vue                     | 112 +++----
 doc/dataview/LayoutDoc.vue                    | 244 +++++++--------
 doc/dataview/LoadingDoc.vue                   | 236 +++++++--------
 doc/dataview/PaginationDoc.vue                | 112 +++----
 doc/dataview/SortingDoc.vue                   | 112 +++----
 doc/datepicker/BasicDoc.vue                   |   6 +-
 doc/datepicker/ButtonBarDoc.vue               |   6 +-
 doc/datepicker/DateTemplateDoc.vue            |   6 +-
 doc/datepicker/DisabledDoc.vue                |   6 +-
 doc/datepicker/FilledDoc.vue                  |   6 +-
 doc/datepicker/FloatLabelDoc.vue              |   6 +-
 doc/datepicker/FormatDoc.vue                  |   8 +-
 doc/datepicker/IconDoc.vue                    |   6 +-
 doc/datepicker/InlineDoc.vue                  |   6 +-
 doc/datepicker/InvalidDoc.vue                 |   6 +-
 doc/datepicker/MinMaxDoc.vue                  |   6 +-
 doc/datepicker/MonthPickerDoc.vue             |   6 +-
 doc/datepicker/MultipleDoc.vue                |   6 +-
 doc/datepicker/MultipleMonthsDoc.vue          |   6 +-
 doc/datepicker/RangeDoc.vue                   |   6 +-
 doc/datepicker/TimeDoc.vue                    |   6 +-
 doc/datepicker/YearPickerDoc.vue              |   6 +-
 doc/dialog/BasicDoc.vue                       |  54 ++--
 doc/dialog/HeadlessDoc.vue                    |  78 ++---
 doc/dialog/LongContentDoc.vue                 |  46 +--
 doc/dialog/MaximizableDoc.vue                 |   6 +-
 doc/dialog/PositionDoc.vue                    |  72 ++---
 doc/dialog/ResponsiveDoc.vue                  |   6 +-
 doc/dialog/TemplateDoc.vue                    |  62 ++--
 doc/dialog/WithoutModalDoc.vue                |  54 ++--
 doc/divider/LoginDoc.vue                      |  96 +++---
 doc/dock/BasicDoc.vue                         |  12 +-
 doc/drawer/BasicDoc.vue                       |   8 +-
 doc/drawer/FullScreenDoc.vue                  |   8 +-
 doc/drawer/HeadlessDoc.vue                    | 286 +++++++++---------
 doc/drawer/PositionDoc.vue                    |   8 +-
 doc/drawer/SizeDoc.vue                        |  16 +-
 doc/drawer/TemplateDoc.vue                    |  14 +-
 doc/dynamicdialog/ExampleDoc.vue              |  18 +-
 doc/dynamicdialog/demo/InfoDemo.vue           |   2 +-
 doc/dynamicdialog/demo/ProductListDemo.vue    |   4 +-
 doc/fieldset/TemplateDoc.vue                  |   8 +-
 doc/fileupload/AutoDoc.vue                    |   6 +-
 doc/fileupload/BasicDoc.vue                   |   6 +-
 doc/fileupload/CustomUploadDoc.vue            |   6 +-
 doc/fileupload/TemplateDoc.vue                |  88 +++---
 doc/floatlabel/BasicDoc.vue                   |   6 +-
 doc/focustrap/BasicDoc.vue                    |   6 +-
 doc/galleria/AdvancedDoc.vue                  |  80 ++---
 doc/galleria/ControlledDoc.vue                |   6 +-
 doc/galleria/ResponsiveDoc.vue                |   8 +-
 doc/galleria/ThumbnailDoc.vue                 |  20 +-
 doc/galleria/fullscreen/CustomContentDoc.vue  |  18 +-
 doc/galleria/fullscreen/WithThumbnailsDoc.vue |   6 +-
 .../fullscreen/WithoutThumbnailsDoc.vue       |   6 +-
 doc/galleria/indicator/PositionDoc.vue        |  18 +-
 doc/guides/accessibility/ColorsDoc.vue        |  14 +-
 doc/guides/accessibility/FormControlsDoc.vue  |   6 +-
 doc/guides/accessibility/SemanticHTMLDoc.vue  |   2 +-
 doc/guides/accessibility/WAIAriaDoc.vue       |  10 +-
 doc/iconfield/BasicDoc.vue                    |   6 +-
 doc/iconfield/TemplateDoc.vue                 |   6 +-
 doc/icons/BasicDoc.vue                        |   2 +-
 doc/icons/ColorDoc.vue                        |   2 +-
 doc/icons/ConstantsDoc.vue                    |   4 +-
 doc/icons/ListDoc.vue                         |   8 +-
 doc/icons/SizeDoc.vue                         |   2 +-
 doc/icons/SpinDoc.vue                         |   2 +-
 doc/image/BasicDoc.vue                        |   6 +-
 doc/image/PreviewDoc.vue                      |   6 +-
 doc/image/TemplateDoc.vue                     |   6 +-
 doc/inlinemessage/BasicDoc.vue                |   6 +-
 doc/inlinemessage/FormDoc.vue                 |  16 +-
 doc/inlinemessage/SeverityDoc.vue             |   6 +-
 doc/inputgroup/BasicDoc.vue                   |   6 +-
 doc/inputgroup/ButtonDoc.vue                  |   6 +-
 doc/inputgroup/CheckboxDoc.vue                |   6 +-
 doc/inputgroup/MultipleDoc.vue                |  14 +-
 doc/inputmask/BasicDoc.vue                    |   6 +-
 doc/inputmask/DisabledDoc.vue                 |   6 +-
 doc/inputmask/FilledDoc.vue                   |   6 +-
 doc/inputmask/FloatLabelDoc.vue               |   6 +-
 doc/inputmask/InvalidDoc.vue                  |   6 +-
 doc/inputmask/MaskDoc.vue                     |   6 +-
 doc/inputmask/OptionalDoc.vue                 |   6 +-
 doc/inputmask/SlotCharDoc.vue                 |   6 +-
 doc/inputnumber/ButtonsDoc.vue                |   6 +-
 doc/inputnumber/CurrencyDoc.vue               |   6 +-
 doc/inputnumber/DisabledDoc.vue               |   6 +-
 doc/inputnumber/FilledDoc.vue                 |   6 +-
 doc/inputnumber/FloatLabelDoc.vue             |   6 +-
 doc/inputnumber/InvalidDoc.vue                |   6 +-
 doc/inputnumber/LocaleDoc.vue                 |   6 +-
 doc/inputnumber/NumeralsDoc.vue               |   6 +-
 doc/inputnumber/PrefixSuffixDoc.vue           |   6 +-
 doc/inputnumber/VerticalDoc.vue               |   6 +-
 doc/inputotp/BasicDoc.vue                     |   6 +-
 doc/inputotp/IntegerOnlyDoc.vue               |   6 +-
 doc/inputotp/MaskDoc.vue                      |   6 +-
 doc/inputotp/SampleDoc.vue                    |  38 +--
 doc/inputotp/TemplateDoc.vue                  |   6 +-
 doc/inputtext/BasicDoc.vue                    |   6 +-
 doc/inputtext/DisabledDoc.vue                 |   6 +-
 doc/inputtext/FilledDoc.vue                   |   6 +-
 doc/inputtext/FloatLabelDoc.vue               |   6 +-
 doc/inputtext/HelpTextDoc.vue                 |  14 +-
 doc/inputtext/InvalidDoc.vue                  |   6 +-
 doc/inputtext/SizesDoc.vue                    |   6 +-
 doc/knob/AccessibilityDoc.vue                 |   4 +-
 doc/knob/BasicDoc.vue                         |   6 +-
 doc/knob/ColorDoc.vue                         |   6 +-
 doc/knob/DisabledDoc.vue                      |   6 +-
 doc/knob/MinMaxDoc.vue                        |   6 +-
 doc/knob/ReactiveDoc.vue                      |   6 +-
 doc/knob/ReadOnlyDoc.vue                      |   6 +-
 doc/knob/SizeDoc.vue                          |   6 +-
 doc/knob/StepDoc.vue                          |   6 +-
 doc/knob/StrokeDoc.vue                        |   6 +-
 doc/knob/TemplateDoc.vue                      |   6 +-
 doc/listbox/BasicDoc.vue                      |  14 +-
 doc/listbox/CheckmarkDoc.vue                  |  14 +-
 doc/listbox/DisabledDoc.vue                   |  14 +-
 doc/listbox/FilterDoc.vue                     |  14 +-
 doc/listbox/GroupDoc.vue                      |  22 +-
 doc/listbox/InvalidDoc.vue                    |  14 +-
 doc/listbox/MultipleDoc.vue                   |  14 +-
 doc/listbox/TemplateDoc.vue                   |  22 +-
 doc/listbox/VirtualScrollDoc.vue              |  14 +-
 doc/megamenu/BasicDoc.vue                     |   2 +-
 doc/megamenu/TemplateDoc.vue                  |  72 ++---
 doc/menu/BasicDoc.vue                         |   6 +-
 doc/menu/CommandDoc.vue                       |   6 +-
 doc/menu/GroupDoc.vue                         |   6 +-
 doc/menu/PopupDoc.vue                         |   6 +-
 doc/menu/RouterDoc.vue                        |   6 +-
 doc/menu/TemplateDoc.vue                      |  62 ++--
 doc/menubar/TemplateDoc.vue                   |  40 +--
 doc/metergroup/TemplateDoc.vue                |  48 +--
 doc/metergroup/VerticalDoc.vue                |   6 +-
 .../v4/breakingchanges/ComponentsDoc.vue      |   2 +-
 .../v4/breakingchanges/StyledModeDoc.vue      |   2 +-
 doc/multiselect/BasicDoc.vue                  |  14 +-
 doc/multiselect/ChipsDoc.vue                  |  14 +-
 doc/multiselect/DisabledDoc.vue               |  14 +-
 doc/multiselect/FilledDoc.vue                 |  14 +-
 doc/multiselect/FilterDoc.vue                 |  14 +-
 doc/multiselect/FloatLabelDoc.vue             |  14 +-
 doc/multiselect/GroupDoc.vue                  |  22 +-
 doc/multiselect/InvalidDoc.vue                |  14 +-
 doc/multiselect/LoadingStateDoc.vue           |  14 +-
 doc/multiselect/TemplateDoc.vue               |  30 +-
 doc/multiselect/VirtualScrollDoc.vue          |  14 +-
 doc/nuxt/UsageDoc.vue                         |   2 +-
 doc/orderlist/BasicDoc.vue                    |  14 +-
 doc/orderlist/TemplateDoc.vue                 |  38 +--
 doc/organizationchart/ColoredDoc.vue          |  66 ++--
 doc/organizationchart/SelectionDoc.vue        |  24 +-
 doc/organizationchart/TemplateDoc.vue         |  16 +-
 doc/paginator/CurrentPageReportDoc.vue        |   2 +-
 doc/paginator/TemplateDoc.vue                 |  18 +-
 doc/panel/TemplateDoc.vue                     |  32 +-
 doc/panelmenu/BasicDoc.vue                    |  12 +-
 doc/panelmenu/CommandDoc.vue                  |  12 +-
 doc/panelmenu/ControlledDoc.vue               |  12 +-
 doc/panelmenu/MultipleDoc.vue                 |  12 +-
 doc/panelmenu/RouterDoc.vue                   |  36 +--
 doc/panelmenu/TemplateDoc.vue                 |  28 +-
 doc/passthrough/BasicDoc.vue                  |  24 +-
 doc/passthrough/DeclarativeDoc.vue            |   2 +-
 doc/passthrough/GlobalDoc.vue                 |   4 +-
 doc/password/BasicDoc.vue                     |   6 +-
 doc/password/DisabledDoc.vue                  |   6 +-
 doc/password/FilledDoc.vue                    |   6 +-
 doc/password/FloatLabelDoc.vue                |   6 +-
 doc/password/InvalidDoc.vue                   |   6 +-
 doc/password/LocaleDoc.vue                    |   6 +-
 doc/password/MeterDoc.vue                     |   6 +-
 doc/password/TemplateDoc.vue                  |   6 +-
 doc/password/ToggleMaskDoc.vue                |   6 +-
 doc/picklist/TemplateDoc.vue                  |  32 +-
 doc/popover/BasicDoc.vue                      |  78 ++---
 doc/popover/DataTableDoc.vue                  |  62 ++--
 doc/progressspinner/BasicDoc.vue              |   6 +-
 doc/progressspinner/CustomDoc.vue             |   6 +-
 doc/radiobutton/AccessibilityDoc.vue          |   4 +-
 doc/radiobutton/DisabledDoc.vue               |   6 +-
 doc/radiobutton/DynamicDoc.vue                |  20 +-
 doc/radiobutton/FilledDoc.vue                 |   6 +-
 doc/radiobutton/GroupDoc.vue                  |  46 +--
 doc/radiobutton/InvalidDoc.vue                |   6 +-
 doc/rating/AccessibilityDoc.vue               |   4 +-
 doc/rating/BasicDoc.vue                       |   6 +-
 doc/rating/DisabledDoc.vue                    |   6 +-
 doc/rating/NumberOfStarsDoc.vue               |   6 +-
 doc/rating/ReadOnlyDoc.vue                    |   6 +-
 doc/rating/TemplateDoc.vue                    |   6 +-
 doc/ripple/CustomDoc.vue                      |   8 +-
 doc/ripple/DefaultDoc.vue                     |   6 +-
 doc/scrolltop/BasicDoc.vue                    |  12 +-
 doc/scrolltop/ElementDoc.vue                  |  22 +-
 doc/select/BasicDoc.vue                       |  14 +-
 doc/select/CheckmarkDoc.vue                   |  14 +-
 doc/select/ClearIconDoc.vue                   |  14 +-
 doc/select/DisabledDoc.vue                    |  14 +-
 doc/select/EditableDoc.vue                    |  14 +-
 doc/select/FilledDoc.vue                      |  14 +-
 doc/select/FilterDoc.vue                      |  30 +-
 doc/select/FloatLabelDoc.vue                  |  14 +-
 doc/select/GroupDoc.vue                       |  22 +-
 doc/select/InvalidDoc.vue                     |  14 +-
 doc/select/LazyVirtualScrollDoc.vue           |  14 +-
 doc/select/LoadingStateDoc.vue                |  14 +-
 doc/select/TemplateDoc.vue                    |  30 +-
 doc/select/VirtualScrollDoc.vue               |  14 +-
 doc/selectbutton/AccessibilityDoc.vue         |   4 +-
 doc/selectbutton/BasicDoc.vue                 |   6 +-
 doc/selectbutton/DisabledDoc.vue              |   6 +-
 doc/selectbutton/InvalidDoc.vue               |   6 +-
 doc/selectbutton/MultipleDoc.vue              |   6 +-
 doc/selectbutton/TemplateDoc.vue              |   6 +-
 doc/setup/GuidesDoc.vue                       |   8 +-
 doc/skeleton/CardDoc.vue                      |  24 +-
 doc/skeleton/ListDoc.vue                      |  64 ++--
 doc/skeleton/ShapesDoc.vue                    |  52 ++--
 doc/slider/AccessibilityDoc.vue               |   4 +-
 doc/slider/BasicDoc.vue                       |  14 +-
 doc/slider/FilterDoc.vue                      |  36 +--
 doc/slider/InputDoc.vue                       |  18 +-
 doc/slider/RangeDoc.vue                       |  14 +-
 doc/slider/StepDoc.vue                        |  14 +-
 doc/slider/VerticalDoc.vue                    |  14 +-
 doc/speeddial/CircleDoc.vue                   |   6 +-
 doc/speeddial/MaskDoc.vue                     |   6 +-
 doc/speeddial/TemplateDoc.vue                 |  14 +-
 doc/splitbutton/AccessibilityDoc.vue          |   2 +-
 doc/splitbutton/BasicDoc.vue                  |   6 +-
 doc/splitbutton/DisabledDoc.vue               |   6 +-
 doc/splitbutton/IconsDoc.vue                  |   6 +-
 doc/splitbutton/OutlinedDoc.vue               |   6 +-
 doc/splitbutton/RaisedDoc.vue                 |   6 +-
 doc/splitbutton/RaisedTextDoc.vue             |   6 +-
 doc/splitbutton/RoundedDoc.vue                |   6 +-
 doc/splitbutton/SeverityDoc.vue               |   6 +-
 doc/splitbutton/SizesDoc.vue                  |   6 +-
 doc/splitbutton/TemplateDoc.vue               |  14 +-
 doc/splitbutton/TextDoc.vue                   |   6 +-
 doc/splitter/HorizontalDoc.vue                |  24 +-
 doc/splitter/NestedDoc.vue                    |  32 +-
 doc/splitter/SizeDoc.vue                      |  16 +-
 doc/splitter/VerticalDoc.vue                  |  16 +-
 doc/stepper/BasicDoc.vue                      |  78 ++---
 doc/stepper/LinearDoc.vue                     |  78 ++---
 doc/stepper/TemplateDoc.vue                   | 134 ++++----
 doc/stepper/VerticalDoc.vue                   |  72 ++---
 doc/steps/ControlledDoc.vue                   |  32 +-
 doc/steps/TemplateDoc.vue                     |   8 +-
 doc/styleclass/AnimationDoc.vue               |  22 +-
 doc/styleclass/ToggleClassDoc.vue             |   6 +-
 doc/tabmenu/ControlledDoc.vue                 |  32 +-
 doc/tabmenu/TemplateDoc.vue                   |   8 +-
 doc/tabs/ControlledDoc.vue                    |  32 +-
 doc/tabs/TemplateDoc.vue                      |  48 +--
 doc/tag/BasicDoc.vue                          |   6 +-
 doc/tag/IconDoc.vue                           |   6 +-
 doc/tag/PillDoc.vue                           |   6 +-
 doc/tag/SeverityDoc.vue                       |   6 +-
 doc/tag/TemplateDoc.vue                       |  14 +-
 doc/textarea/AutoResizeDoc.vue                |   6 +-
 doc/textarea/BasicDoc.vue                     |   6 +-
 doc/textarea/DisabledDoc.vue                  |   6 +-
 doc/textarea/FilledDoc.vue                    |   6 +-
 doc/textarea/FloatLabelDoc.vue                |   6 +-
 doc/textarea/InvalidDoc.vue                   |   6 +-
 doc/theming/styled/ArchitectureDoc.vue        |   2 +-
 doc/theming/styled/CSSModulesDoc.vue          |   2 +-
 doc/theming/styled/ColorsDoc.vue              |   8 +-
 doc/theming/styled/ScopedTokensDoc.vue        |   2 +-
 .../styled/csslayer/SpecificityDoc.vue        |   2 +-
 doc/theming/styled/utils/DTDoc.vue            |   2 +-
 doc/theming/unstyled/ExampleDoc.vue           |  10 +-
 doc/theming/unstyled/SetupDoc.vue             |   2 +-
 doc/theming/unstyled/ThemeDoc.vue             |   8 +-
 doc/tieredmenu/BasicDoc.vue                   |   6 +-
 doc/tieredmenu/CommandDoc.vue                 |   6 +-
 doc/tieredmenu/PopupDoc.vue                   |   6 +-
 doc/tieredmenu/RouterDoc.vue                  |   6 +-
 doc/tieredmenu/TemplateDoc.vue                |  22 +-
 doc/timeline/AlignmentDoc.vue                 |  30 +-
 doc/timeline/HorizontalDoc.vue                |   6 +-
 doc/timeline/OppositeDoc.vue                  |   8 +-
 doc/timeline/TemplateDoc.vue                  |  24 +-
 doc/toast/BasicDoc.vue                        |   6 +-
 doc/toast/HeadlessDoc.vue                     |  46 +--
 doc/toast/MultipleDoc.vue                     |   6 +-
 doc/toast/PositionDoc.vue                     |   6 +-
 doc/toast/SeverityDoc.vue                     |   6 +-
 doc/toast/StickyDoc.vue                       |   6 +-
 doc/toast/TemplateDoc.vue                     |  38 +--
 doc/togglebutton/BasicDoc.vue                 |  12 +-
 doc/togglebutton/CustomizedDoc.vue            |  14 +-
 doc/togglebutton/DisabledDoc.vue              |  14 +-
 doc/togglebutton/InvalidDoc.vue               |  14 +-
 doc/toggleswitch/BasicDoc.vue                 |   6 +-
 doc/toggleswitch/DisabledDoc.vue              |   6 +-
 doc/toggleswitch/InvalidDoc.vue               |   6 +-
 doc/toggleswitch/PreselectionDoc.vue          |   6 +-
 doc/toolbar/CustomDoc.vue                     |  16 +-
 doc/tooltip/AutoHideDoc.vue                   |   6 +-
 doc/tooltip/CustomDoc.vue                     |  14 +-
 doc/tooltip/DelayDoc.vue                      |   6 +-
 doc/tooltip/EventDoc.vue                      |   6 +-
 doc/tooltip/PositionDoc.vue                   |   6 +-
 doc/tree/BasicDoc.vue                         |  14 +-
 doc/tree/ControlledDoc.vue                    |  22 +-
 doc/tree/EventsDoc.vue                        |  16 +-
 doc/tree/FilterDoc.vue                        |  22 +-
 doc/tree/LazyDoc.vue                          |  34 +--
 doc/tree/TemplateDoc.vue                      |  20 +-
 doc/tree/selection/CheckboxDoc.vue            |  14 +-
 doc/tree/selection/MultipleDoc.vue            |  20 +-
 doc/tree/selection/SingleDoc.vue              |  14 +-
 doc/treeselect/BasicDoc.vue                   |  14 +-
 doc/treeselect/CheckboxDoc.vue                |  14 +-
 doc/treeselect/DisabledDoc.vue                |  14 +-
 doc/treeselect/FilledDoc.vue                  |  14 +-
 doc/treeselect/FloatLabelDoc.vue              |  14 +-
 doc/treeselect/InvalidDoc.vue                 |  14 +-
 doc/treeselect/MultipleDoc.vue                |  14 +-
 doc/treetable/ColumnToggleDoc.vue             |   8 +-
 doc/treetable/ControlledDoc.vue               |   8 +-
 doc/treetable/FilterDoc.vue                   |  14 +-
 doc/treetable/SizeDoc.vue                     |   2 +-
 doc/treetable/TemplateDoc.vue                 |   8 +-
 doc/treetable/scroll/FlexibleScrollDoc.vue    |   6 +-
 .../selection/MultipleRowsSelectionDoc.vue    |   6 +-
 .../selection/SingleRowSelectionDoc.vue       |   6 +-
 doc/virtualscroller/BasicDoc.vue              |  22 +-
 doc/virtualscroller/DelayDoc.vue              |  54 ++--
 doc/virtualscroller/GridDoc.vue               |  22 +-
 doc/virtualscroller/HorizontalDoc.vue         |  22 +-
 doc/virtualscroller/LazyDoc.vue               |  22 +-
 doc/virtualscroller/LoadingDoc.vue            |  46 +--
 doc/vite/UsageDoc.vue                         |   6 +-
 454 files changed, 3920 insertions(+), 3920 deletions(-)

diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index 5a3256402..6fbffb926 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -3,10 +3,10 @@
         <p>Accordion can be controlled programmatically using a binding to <i>value</i> along with <i>v-model</i> to update the active value.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex mb-3 gap-2 justify-content-end">
-            <Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
         </div>
 
         <Accordion :value="active">
@@ -49,10 +49,10 @@ export default {
             active: '0',
             code: {
                 basic: `
-<div class="flex mb-3 gap-2 justify-content-end">
-    <Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
-    <Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
-    <Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
+<div class="flex mb-4 gap-2 justify-end">
+    <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+    <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+    <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
 </div>
 
 <Accordion :value="active">
@@ -88,10 +88,10 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex mb-3 gap-2 justify-content-end">
-            <Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
         </div>
 
         <Accordion :value="active">
@@ -139,10 +139,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex mb-3 gap-2 justify-content-end">
-            <Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
-            <Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
-            <Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
         </div>
 
         <Accordion :value="active">
diff --git a/doc/accordion/TemplateDoc.vue b/doc/accordion/TemplateDoc.vue
index 7713848ca..65b011bb6 100644
--- a/doc/accordion/TemplateDoc.vue
+++ b/doc/accordion/TemplateDoc.vue
@@ -6,9 +6,9 @@
         <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
             <AccordionPanel value="0">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                         <Badge value="3" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -21,9 +21,9 @@
             </AccordionPanel>
             <AccordionPanel value="1">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                         <Badge value="4" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -36,9 +36,9 @@
             </AccordionPanel>
             <AccordionPanel value="2">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -63,9 +63,9 @@ export default {
 <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
     <AccordionPanel value="0">
         <AccordionHeader>
-            <span class="flex align-items-center gap-2 w-full">
+            <span class="flex items-center gap-2 w-full">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 <Badge value="3" class="ml-auto mr-2" />
             </span>
         </AccordionHeader>
@@ -78,9 +78,9 @@ export default {
     </AccordionPanel>
     <AccordionPanel value="1">
         <AccordionHeader>
-            <span class="flex align-items-center gap-2 w-full">
+            <span class="flex items-center gap-2 w-full">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                 <Badge value="4" class="ml-auto mr-2" />
             </span>
         </AccordionHeader>
@@ -93,9 +93,9 @@ export default {
     </AccordionPanel>
     <AccordionPanel value="2">
         <AccordionHeader>
-            <span class="flex align-items-center gap-2 w-full">
+            <span class="flex items-center gap-2 w-full">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                 <Badge value="2" class="ml-auto mr-2" />
             </span>
         </AccordionHeader>
@@ -114,9 +114,9 @@ export default {
         <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
             <AccordionPanel value="0">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                         <Badge value="3" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -129,9 +129,9 @@ export default {
             </AccordionPanel>
             <AccordionPanel value="1">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                         <Badge value="4" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -144,9 +144,9 @@ export default {
             </AccordionPanel>
             <AccordionPanel value="2">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -170,9 +170,9 @@ export default {
         <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
             <AccordionPanel value="0">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                         <Badge value="3" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -185,9 +185,9 @@ export default {
             </AccordionPanel>
             <AccordionPanel value="1">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                         <Badge value="4" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
@@ -200,9 +200,9 @@ export default {
             </AccordionPanel>
             <AccordionPanel value="2">
                 <AccordionHeader>
-                    <span class="flex align-items-center gap-2 w-full">
+                    <span class="flex items-center gap-2 w-full">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" class="ml-auto mr-2" />
                     </span>
                 </AccordionHeader>
diff --git a/doc/animateonscroll/BasicDoc.vue b/doc/animateonscroll/BasicDoc.vue
index 4961b4903..2d06cb154 100644
--- a/doc/animateonscroll/BasicDoc.vue
+++ b/doc/animateonscroll/BasicDoc.vue
@@ -2,45 +2,45 @@
     <DocSectionText v-bind="$attrs">
         <p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center overflow-hidden">
-        <div class="flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center overflow-hidden">
+        <div class="flex flex-col items-center gap-2">
             <span class="text-xl font-medium">Scroll Down</span>
-            <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
+            <span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
                 <i class="pi pi-arrow-down" />
             </span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">fade-in</span>
         </div>
-        <div class="h-30rem"></div>
+        <div class="h-[30rem]"></div>
         <div
             v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }"
-            class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
+            class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out"
         >
             <span class="text-3xl font-bold">fade-left</span>
         </div>
-        <div class="h-30rem"></div>
+        <div class="h-[30rem]"></div>
         <div
             v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }"
-            class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
+            class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out"
         >
             <span class="text-3xl font-bold">fade-right</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">zoom</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-y</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">scalein</span>
         </div>
     </div>
@@ -53,69 +53,69 @@ export default {
         return {
             code: {
                 basic: `
-<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
     <span class="text-3xl font-bold">fade-in</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
     <span class="text-3xl font-bold">fade-left</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
     <span class="text-3xl font-bold">fade-right</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
     <span class="text-3xl font-bold">zoom</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
     <span class="text-3xl font-bold">flip-left</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
     <span class="text-3xl font-bold">flip-y</span>
 </div>
 
-<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
     <span class="text-3xl font-bold">scalein</span>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center">
-        <div class="flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center">
+        <div class="flex flex-col items-center gap-2">
             <span class="text-xl font-medium">Scroll Down</span>
-            <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
+            <span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
                 <i class="pi pi-arrow-down" />
             </span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">fade-in</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">fade-left</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">fade-right</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">zoom</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-y</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">scalein</span>
         </div>
     </div>
@@ -151,39 +151,39 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center">
-        <div class="flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center">
+        <div class="flex flex-col items-center gap-2">
             <span class="text-xl font-medium">Scroll Down</span>
-            <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
+            <span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
                 <i class="pi pi-arrow-down" />
             </span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">fade-in</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">fade-left</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">fade-right</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
             <span class="text-3xl font-bold">zoom</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-left</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">flip-y</span>
         </div>
-        <div class="h-30rem"></div>
-        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
+        <div class="h-[30rem]"></div>
+        <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
             <span class="text-3xl font-bold">scalein</span>
         </div>
     </div>
diff --git a/doc/autocomplete/BasicDoc.vue b/doc/autocomplete/BasicDoc.vue
index 80e9285d2..5d0e88345 100644
--- a/doc/autocomplete/BasicDoc.vue
+++ b/doc/autocomplete/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>AutoComplete is used as a controlled component with <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
     <DocSectionCode :code="code" />
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
 </template>
diff --git a/doc/autocomplete/DisabledDoc.vue b/doc/autocomplete/DisabledDoc.vue
index 675113909..7569f53bc 100644
--- a/doc/autocomplete/DisabledDoc.vue
+++ b/doc/autocomplete/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
 </template>
diff --git a/doc/autocomplete/DropdownDoc.vue b/doc/autocomplete/DropdownDoc.vue
index 0c7e73372..2f7296cb6 100644
--- a/doc/autocomplete/DropdownDoc.vue
+++ b/doc/autocomplete/DropdownDoc.vue
@@ -5,7 +5,7 @@
             <i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
     <DocSectionCode :code="code" />
@@ -23,7 +23,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
 </template>
@@ -48,7 +48,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
 </template>
diff --git a/doc/autocomplete/FilledDoc.vue b/doc/autocomplete/FilledDoc.vue
index 90a8d7934..5523184ff 100644
--- a/doc/autocomplete/FilledDoc.vue
+++ b/doc/autocomplete/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
     </div>
 </template>
diff --git a/doc/autocomplete/FloatLabelDoc.vue b/doc/autocomplete/FloatLabelDoc.vue
index a1a12d2f2..9129dc6a0 100644
--- a/doc/autocomplete/FloatLabelDoc.vue
+++ b/doc/autocomplete/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
@@ -52,7 +52,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
diff --git a/doc/autocomplete/ForceSelectionDoc.vue b/doc/autocomplete/ForceSelectionDoc.vue
index 60470a499..06f534d7c 100644
--- a/doc/autocomplete/ForceSelectionDoc.vue
+++ b/doc/autocomplete/ForceSelectionDoc.vue
@@ -5,7 +5,7 @@
             <i>forceSelection</i> to enforce that input is always from the suggestion list.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
     <DocSectionCode :code="code" :service="['CountryService']" />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
@@ -63,7 +63,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
diff --git a/doc/autocomplete/GroupDoc.vue b/doc/autocomplete/GroupDoc.vue
index 8692ce65c..c3aebfe6c 100644
--- a/doc/autocomplete/GroupDoc.vue
+++ b/doc/autocomplete/GroupDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center country-item">
+                <div class="flex items-center country-item">
                     <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.item.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <div>{{ slotProps.item.label }}</div>
                 </div>
@@ -60,7 +60,7 @@ export default {
                 basic: `
 <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
     <template #optiongroup="slotProps">
-        <div class="flex align-items-center country-item">
+        <div class="flex items-center country-item">
             <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
             <div>{{ slotProps.item.label }}</div>
         </div>
@@ -69,10 +69,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center country-item">
+                <div class="flex items-center country-item">
                     <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.item.label }}</div>
                 </div>
@@ -145,10 +145,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center country-item">
+                <div class="flex items-center country-item">
                     <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.item.label }}</div>
                 </div>
diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index 914083bba..8947c66ec 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
 </template>
diff --git a/doc/autocomplete/ObjectsDoc.vue b/doc/autocomplete/ObjectsDoc.vue
index 41d3fd207..eee29856b 100644
--- a/doc/autocomplete/ObjectsDoc.vue
+++ b/doc/autocomplete/ObjectsDoc.vue
@@ -5,7 +5,7 @@
             Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
     <DocSectionCode :code="code" :service="['CountryService']" />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
@@ -63,7 +63,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
diff --git a/doc/autocomplete/TemplateDoc.vue b/doc/autocomplete/TemplateDoc.vue
index 61977f157..608a0d02f 100644
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@@ -5,7 +5,7 @@
             <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
                 <div class="flex align-options-center">
@@ -39,7 +39,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
                 <div class="flex align-options-center">
@@ -83,7 +83,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
                 <div class="flex align-options-center">
diff --git a/doc/autocomplete/VirtualScrollDoc.vue b/doc/autocomplete/VirtualScrollDoc.vue
index a58de6a10..1f92f6d5c 100644
--- a/doc/autocomplete/VirtualScrollDoc.vue
+++ b/doc/autocomplete/VirtualScrollDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> documentation for more information about the configuration API.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
     <DocSectionCode :code="code" />
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
 </template>
@@ -61,7 +61,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
 </template>
diff --git a/doc/avatar/AvatarGroupDoc.vue b/doc/avatar/AvatarGroupDoc.vue
index 68b8089c8..4313c6166 100644
--- a/doc/avatar/AvatarGroupDoc.vue
+++ b/doc/avatar/AvatarGroupDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
@@ -50,7 +50,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index 76324a78f..f10ae2309 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -3,7 +3,7 @@
         <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
@@ -46,7 +46,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
@@ -76,7 +76,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
diff --git a/doc/avatar/ImageDoc.vue b/doc/avatar/ImageDoc.vue
index 622aba1f4..b8469f4a5 100644
--- a/doc/avatar/ImageDoc.vue
+++ b/doc/avatar/ImageDoc.vue
@@ -3,7 +3,7 @@
         <p>Use the <i>image</i> property to display an image as an Avatar.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Image</h5>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@@ -18,7 +18,7 @@
 
             <div class="flex-auto">
                 <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
             </div>
         </div>
     </div>
@@ -37,12 +37,12 @@ export default {
 
 <Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
 
-<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
 `,
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Image</h5>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@@ -57,7 +57,7 @@ export default {
 
             <div class="flex-auto">
                 <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
             </div>
         </div>
     </div>
@@ -70,7 +70,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Image</h5>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@@ -85,7 +85,7 @@ export default {
 
             <div class="flex-auto">
                 <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
             </div>
         </div>
     </div>
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index 0187a6a2f..fd57ec594 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -3,7 +3,7 @@
         <p>A letter Avatar is defined with the <i>label</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-8">
             <div class="flex-auto">
                 <h5>Label</h5>
                 <Avatar label="P" class="mr-2" size="xlarge" />
@@ -45,7 +45,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="flex flex-wrap gap-5">
+    <div class="flex flex-wrap gap-8">
         <div class="flex-auto">
             <h5>Label</h5>
             <Avatar label="P" class="mr-2" size="xlarge" />
@@ -73,7 +73,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex flex-wrap gap-5">
+    <div class="flex flex-wrap gap-8">
         <div class="flex-auto">
             <h5>Label</h5>
             <Avatar label="P" class="mr-2" size="xlarge" />
diff --git a/doc/badge/BasicDoc.vue b/doc/badge/BasicDoc.vue
index f1cdb45ec..ea02a9773 100644
--- a/doc/badge/BasicDoc.vue
+++ b/doc/badge/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text to display is defined with the <i>value</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Badge value="2"></Badge>
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Badge value="2"></Badge>
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Badge value="2"></Badge>
     </div>
 </template>
diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index 602336820..12a1854ed 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Buttons have built-in support for badges to display a badge inline.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
@@ -31,7 +31,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
diff --git a/doc/badge/PositionDoc.vue b/doc/badge/PositionDoc.vue
index 0e9c7a92f..17bb67f83 100644
--- a/doc/badge/PositionDoc.vue
+++ b/doc/badge/PositionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A Badge can be added to any element using the directive.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-4">
+    <div class="card flex flex-wrap justify-center gap-6">
         <span v-badge="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </span>
@@ -34,7 +34,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-4">
+    <div class="card flex flex-wrap justify-center gap-6">
         <span v-badge="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </span>
@@ -53,7 +53,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-4">
+    <div class="card flex flex-wrap justify-center gap-6">
         <span v-badge="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </span>
diff --git a/doc/badge/SeverityDoc.vue b/doc/badge/SeverityDoc.vue
index 98d4a9273..294143a6c 100644
--- a/doc/badge/SeverityDoc.vue
+++ b/doc/badge/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Severity defines the variant of a badge.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="6" severity="secondary"></Badge>
         <Badge value="8" severity="success"></Badge>
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="6" severity="secondary"></Badge>
         <Badge value="8" severity="success"></Badge>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="6" severity="secondary"></Badge>
         <Badge value="8" severity="success"></Badge>
diff --git a/doc/badge/SizeDoc.vue b/doc/badge/SizeDoc.vue
index cc1687841..a06fdf6ef 100644
--- a/doc/badge/SizeDoc.vue
+++ b/doc/badge/SizeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+    <div class="card flex flex-wrap justify-center items-end gap-2">
         <Badge value="8" size="xlarge" severity="success"></Badge>
         <Badge value="6" size="large" severity="warn"></Badge>
         <Badge value="4" severity="info"></Badge>
@@ -24,7 +24,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+    <div class="card flex flex-wrap justify-center items-end gap-2">
         <Badge value="8" size="xlarge" severity="success"></Badge>
         <Badge value="6" size="large" severity="warn"></Badge>
         <Badge value="4" severity="info"></Badge>
@@ -38,7 +38,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
+    <div class="card flex flex-wrap justify-center items-end gap-2">
         <Badge value="8" size="xlarge" severity="success"></Badge>
         <Badge value="6" size="large" severity="warn"></Badge>
         <Badge value="4" severity="info"></Badge>
diff --git a/doc/blockui/BasicDoc.vue b/doc/blockui/BasicDoc.vue
index 0dac2b33b..88478ed87 100644
--- a/doc/blockui/BasicDoc.vue
+++ b/doc/blockui/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
     </DocSectionText>
     <div class="card">
-        <div class="mb-3">
+        <div class="mb-4">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
             <Button label="Unblock" @click="blocked = false"></Button>
         </div>
@@ -26,7 +26,7 @@ export default {
             blocked: false,
             code: {
                 basic: `
-<div class="mb-3">
+<div class="mb-4">
     <Button label="Block" @click="blocked = true" class="mr-2"></Button>
     <Button label="Unblock" @click="blocked = false"></Button>
 </div>
@@ -42,7 +42,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="mb-3">
+        <div class="mb-4">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
             <Button label="Unblock" @click="blocked = false"></Button>
         </div>
@@ -70,7 +70,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="mb-3">
+        <div class="mb-4">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
             <Button label="Unblock" @click="blocked = false"></Button>
         </div>
diff --git a/doc/breadcrumb/BasicDoc.vue b/doc/breadcrumb/BasicDoc.vue
index 31e0417f4..73473e7e1 100644
--- a/doc/breadcrumb/BasicDoc.vue
+++ b/doc/breadcrumb/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
 </template>
@@ -48,7 +48,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
 </template>
diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index dcb6ac50d..f4ce2c4d1 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -12,7 +12,7 @@
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-color">{{ item.label }}</span>
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
@@ -40,14 +40,14 @@ export default {
             </a>
         </router-link>
         <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span class="text-color">{{ item.label }}</span>
+            <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
         </a>
     </template>
 </Breadcrumb>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -57,7 +57,7 @@ export default {
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-color">{{ item.label }}</span>
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
@@ -84,7 +84,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -94,7 +94,7 @@ export default {
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span class="text-color">{{ item.label }}</span>
+                    <span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index e559dc25d..166a75fe5 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item }">
                 <a class="cursor-pointer" :href="item.url">
@@ -34,7 +34,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item }">
                 <a class="cursor-pointer" :href="item.url">
@@ -59,7 +59,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item }">
                 <a class="cursor-pointer" :href="item.url">
diff --git a/doc/button/AccessibilityDoc.vue b/doc/button/AccessibilityDoc.vue
index c3f9a4efb..208f2ba89 100644
--- a/doc/button/AccessibilityDoc.vue
+++ b/doc/button/AccessibilityDoc.vue
@@ -47,7 +47,7 @@ export default {
 
 <Button class="youtube p-0" aria-label="Youtube">
     <i class="pi pi-youtube px-2"></i>
-    <span class="px-3">Youtube</span>
+    <span class="px-4">Youtube</span>
 </Button>
 `
             }
diff --git a/doc/button/BadgesDoc.vue b/doc/button/BadgesDoc.vue
index 549b0a8f0..c9b51773a 100644
--- a/doc/button/BadgesDoc.vue
+++ b/doc/button/BadgesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
     </div>
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
     </div>
@@ -31,7 +31,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
     </div>
diff --git a/doc/button/BasicDoc.vue b/doc/button/BasicDoc.vue
index 7f4c60f84..29ddf9822 100644
--- a/doc/button/BasicDoc.vue
+++ b/doc/button/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text to display on a button is defined with the <i>label</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" />
     </div>
 </template>
@@ -28,7 +28,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" />
     </div>
 </template>
diff --git a/doc/button/ButtonGroupDoc.vue b/doc/button/ButtonGroupDoc.vue
index b8c5aac22..6511c3a74 100644
--- a/doc/button/ButtonGroupDoc.vue
+++ b/doc/button/ButtonGroupDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ButtonGroup>
             <Button label="Save" icon="pi pi-check" />
             <Button label="Delete" icon="pi pi-trash" />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ButtonGroup>
             <Button label="Save" icon="pi pi-check" />
             <Button label="Delete" icon="pi pi-trash" />
@@ -40,7 +40,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ButtonGroup>
             <Button label="Save" icon="pi pi-check" />
             <Button label="Delete" icon="pi pi-trash" />
diff --git a/doc/button/DisabledDoc.vue b/doc/button/DisabledDoc.vue
index 3ba0326b2..0d1726da0 100644
--- a/doc/button/DisabledDoc.vue
+++ b/doc/button/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" disabled />
     </div>
 </template>
@@ -28,7 +28,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Submit" disabled />
     </div>
 </template>
diff --git a/doc/button/IconOnlyDoc.vue b/doc/button/IconOnlyDoc.vue
index 710e43b9f..76874c668 100644
--- a/doc/button/IconOnlyDoc.vue
+++ b/doc/button/IconOnlyDoc.vue
@@ -3,7 +3,7 @@
         <p>Buttons can have icons without labels.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" aria-label="Search" />
@@ -13,7 +13,7 @@
             <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@@ -23,7 +23,7 @@
             <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@@ -33,7 +33,7 @@
             <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@@ -43,7 +43,7 @@
             <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3">
+        <div class="flex flex-wrap justify-center gap-4">
             <Button icon="pi pi-check" text rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
@@ -105,7 +105,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" aria-label="Search" />
@@ -115,7 +115,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@@ -125,7 +125,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@@ -135,7 +135,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@@ -145,7 +145,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3">
+        <div class="flex flex-wrap justify-center gap-4">
             <Button icon="pi pi-check" text rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
@@ -163,7 +163,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" aria-label="Search" />
@@ -173,7 +173,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@@ -183,7 +183,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@@ -193,7 +193,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3 mb-4">
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
             <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@@ -203,7 +203,7 @@ export default {
             <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
-        <div class="flex flex-wrap justify-content-center gap-3">
+        <div class="flex flex-wrap justify-center gap-4">
             <Button icon="pi pi-check" text rounded aria-label="Filter" />
             <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
             <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
diff --git a/doc/button/IconsDoc.vue b/doc/button/IconsDoc.vue
index f176321ea..3869b121e 100644
--- a/doc/button/IconsDoc.vue
+++ b/doc/button/IconsDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button icon="pi pi-check" class="align-self-center" aria-label="Submit" />
-        <Button label="Submit" icon="pi pi-check" class="align-self-center" />
-        <Button label="Submit" icon="pi pi-check" iconPos="right" class="align-self-center" />
+    <div class="card flex flex-wrap gap-4 justify-center">
+        <Button icon="pi pi-check" class="self-center" aria-label="Submit" />
+        <Button label="Submit" icon="pi pi-check" class="self-center" />
+        <Button label="Submit" icon="pi pi-check" iconPos="right" class="self-center" />
         <Button label="Submit" icon="pi pi-check" iconPos="top" />
         <Button label="Submit" icon="pi pi-check" iconPos="bottom" />
     </div>
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
+    <div class="card flex flex-wrap gap-4 justify-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
         <Button label="Submit" icon="pi pi-check" iconPos="right" />
@@ -40,7 +40,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
+    <div class="card flex flex-wrap gap-4 justify-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
         <Button label="Submit" icon="pi pi-check" iconPos="right" />
diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index 9bf4c8fda..03d05c4f8 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A button can be displayed as a link element when the <i>link</i> property is present. If you need to use buttons for navigation, wrap the button inside a component like <i>NuxtLink</i> or <i>router-link</i> depending on your router.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <Button label="Link" link />
         <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener" tabindex="-1">
             <Button label="External" />
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <Button label="Link" link />
         <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
             <Button label="External" />
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <Button label="Link" link />
         <NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
             <Button label="External" />
diff --git a/doc/button/LoadingDoc.vue b/doc/button/LoadingDoc.vue
index fc780de64..9701c6e91 100644
--- a/doc/button/LoadingDoc.vue
+++ b/doc/button/LoadingDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Busy state is controlled with the <i>loading</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
 </template>
@@ -44,7 +44,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
 </template>
diff --git a/doc/button/OutlinedDoc.vue b/doc/button/OutlinedDoc.vue
index 8872919ed..bd9778461 100644
--- a/doc/button/OutlinedDoc.vue
+++ b/doc/button/OutlinedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
         <Button label="Success" severity="success" outlined />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
         <Button label="Success" severity="success" outlined />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
         <Button label="Success" severity="success" outlined />
diff --git a/doc/button/RaisedDoc.vue b/doc/button/RaisedDoc.vue
index 787bddbb8..f4be302da 100644
--- a/doc/button/RaisedDoc.vue
+++ b/doc/button/RaisedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
         <Button label="Success" severity="success" raised />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
         <Button label="Success" severity="success" raised />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
         <Button label="Success" severity="success" raised />
diff --git a/doc/button/RaisedTextDoc.vue b/doc/button/RaisedTextDoc.vue
index f4d3868a1..7967cb05c 100644
--- a/doc/button/RaisedTextDoc.vue
+++ b/doc/button/RaisedTextDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
         <Button label="Success" severity="success" text raised />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
         <Button label="Success" severity="success" text raised />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
         <Button label="Success" severity="success" text raised />
diff --git a/doc/button/RoundedDoc.vue b/doc/button/RoundedDoc.vue
index 3abdabe68..804d5d5f9 100644
--- a/doc/button/RoundedDoc.vue
+++ b/doc/button/RoundedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
         <Button label="Success" severity="success" rounded />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
         <Button label="Success" severity="success" rounded />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
         <Button label="Success" severity="success" rounded />
diff --git a/doc/button/SeverityDoc.vue b/doc/button/SeverityDoc.vue
index b2d1bdfed..12f005179 100644
--- a/doc/button/SeverityDoc.vue
+++ b/doc/button/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
         <Button label="Success" severity="success" />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
         <Button label="Success" severity="success" />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
         <Button label="Success" severity="success" />
diff --git a/doc/button/SizesDoc.vue b/doc/button/SizesDoc.vue
index 4d6c44bef..310768126 100644
--- a/doc/button/SizesDoc.vue
+++ b/doc/button/SizesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
         <Button label="Large" icon="pi pi-check" size="large" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
         <Button label="Large" icon="pi pi-check" size="large" />
@@ -34,7 +34,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
         <Button label="Large" icon="pi pi-check" size="large" />
diff --git a/doc/button/TemplateDoc.vue b/doc/button/TemplateDoc.vue
index 89bb86b79..71a54e33d 100644
--- a/doc/button/TemplateDoc.vue
+++ b/doc/button/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button outlined class="border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -34,7 +34,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button outlined class="border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -55,7 +55,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button outlined class="border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
diff --git a/doc/button/TextDoc.vue b/doc/button/TextDoc.vue
index b0e2b2aa3..f4324300d 100644
--- a/doc/button/TextDoc.vue
+++ b/doc/button/TextDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
         <Button label="Success" severity="success" text />
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
         <Button label="Success" severity="success" text />
@@ -49,7 +49,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
         <Button label="Success" severity="success" text />
diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index c90bb10e4..afa9d274c 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
     </DocSectionText>
-    <div class="mb-3 p-5 flex align-items-center justify-content-center">
+    <div class="mb-4 p-8 flex items-center justify-center">
         <Card style="width: 25rem; overflow: hidden">
             <template #header>
                 <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
@@ -16,7 +16,7 @@
                 </p>
             </template>
             <template #footer>
-                <div class="flex gap-3 mt-1">
+                <div class="flex gap-4 mt-1">
                     <Button label="Cancel" severity="secondary" outlined class="w-full" />
                     <Button label="Save" class="w-full" />
                 </div>
@@ -45,7 +45,7 @@ export default {
         </p>
     </template>
     <template #footer>
-        <div class="flex gap-3 mt-1">
+        <div class="flex gap-4 mt-1">
             <Button label="Cancel" severity="secondary" outlined class="w-full" />
             <Button label="Save" class="w-full" />
         </div>
@@ -67,7 +67,7 @@ export default {
             </p>
         </template>
         <template #footer>
-            <div class="flex gap-3 mt-1">
+            <div class="flex gap-4 mt-1">
                 <Button label="Cancel" severity="secondary" outlined class="w-full" />
                 <Button label="Save" class="w-full" />
             </div>
@@ -93,7 +93,7 @@ export default {
             </p>
         </template>
         <template #footer>
-            <div class="flex gap-3 mt-1">
+            <div class="flex gap-4 mt-1">
                 <Button label="Cancel" severity="secondary" outlined class="w-full" />
                 <Button label="Save" class="w-full" />
             </div>
diff --git a/doc/card/BasicDoc.vue b/doc/card/BasicDoc.vue
index c6a9109af..654c53987 100644
--- a/doc/card/BasicDoc.vue
+++ b/doc/card/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
     </DocSectionText>
-    <div class="mb-3 p-5">
+    <div class="mb-4 p-8">
         <Card>
             <template #title>Simple Card</template>
             <template #content>
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index 3350b81dd..a5db3642e 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -6,15 +6,15 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -61,15 +61,15 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2  p-3">
-            <div class="mb-3">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
-            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-content-between align-items-center">
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between items-center">
                 <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                 <span>
                     <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -85,15 +85,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -165,15 +165,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index 881c7be61..4936662ea 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -6,15 +6,15 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -61,15 +61,15 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2  p-3">
-            <div class="mb-3">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
-            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-content-between align-items-center">
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between items-center">
                 <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                 <span>
                     <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -85,15 +85,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -165,15 +165,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index cd220d095..d1654445c 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -9,15 +9,15 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -64,15 +64,15 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2  p-3">
-            <div class="mb-3">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
-            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-content-between align-items-center">
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between items-center">
                 <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                 <span>
                     <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -88,15 +88,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -168,15 +168,15 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index d85fec02e..3a19cecda 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -4,17 +4,17 @@
     </DocSectionText>
 
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -37,17 +37,17 @@ export default {
             products: null,
             code: {
                 basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
+<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2  p-3">
-            <div class="mb-3">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+            <div class="mb-4">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
-            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-            <div class="flex justify-content-between align-items-center">
+            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-between items-center">
                 <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                 <span>
                     <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -61,17 +61,17 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -119,17 +119,17 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2  p-3">
-                    <div class="mb-3">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
-                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
-                    <div class="flex justify-content-between align-items-center">
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
                         <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
                         <span>
                             <Button icon="pi pi-heart" severity="secondary" outlined />
diff --git a/doc/cascadeselect/BasicDoc.vue b/doc/cascadeselect/BasicDoc.vue
index 5e71cd959..560077bb2 100644
--- a/doc/cascadeselect/BasicDoc.vue
+++ b/doc/cascadeselect/BasicDoc.vue
@@ -5,7 +5,7 @@
             required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
@@ -97,7 +97,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
@@ -189,7 +189,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
diff --git a/doc/cascadeselect/DisabledDoc.vue b/doc/cascadeselect/DisabledDoc.vue
index adf548a48..ba04f5d2d 100644
--- a/doc/cascadeselect/DisabledDoc.vue
+++ b/doc/cascadeselect/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
 </template>
diff --git a/doc/cascadeselect/FilledDoc.vue b/doc/cascadeselect/FilledDoc.vue
index 72cec7eae..609237fae 100644
--- a/doc/cascadeselect/FilledDoc.vue
+++ b/doc/cascadeselect/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
@@ -94,7 +94,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
@@ -186,7 +186,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
diff --git a/doc/cascadeselect/FloatLabelDoc.vue b/doc/cascadeselect/FloatLabelDoc.vue
index 8373ffa28..22f6377b3 100644
--- a/doc/cascadeselect/FloatLabelDoc.vue
+++ b/doc/cascadeselect/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
             <label for="cs-city">City</label>
@@ -100,7 +100,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
                 :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -195,7 +195,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
                 :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index 28342ba65..30cd21989 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
@@ -94,7 +94,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
@@ -186,7 +186,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
diff --git a/doc/cascadeselect/LoadingStateDoc.vue b/doc/cascadeselect/LoadingStateDoc.vue
index eb271200f..132e28624 100644
--- a/doc/cascadeselect/LoadingStateDoc.vue
+++ b/doc/cascadeselect/LoadingStateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
 </template>
diff --git a/doc/cascadeselect/TemplateDoc.vue b/doc/cascadeselect/TemplateDoc.vue
index 13fdda079..406c40e8d 100644
--- a/doc/cascadeselect/TemplateDoc.vue
+++ b/doc/cascadeselect/TemplateDoc.vue
@@ -5,10 +5,10 @@
             required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
                     <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@@ -104,7 +104,7 @@ export default {
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
     <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
             <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
             <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@@ -115,11 +115,11 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
                     <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
                     <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@@ -216,11 +216,11 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
                     <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
                     <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index 80b3c494f..3b6c09fc9 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -3,7 +3,7 @@
         <p>Different chart types can be combined in the same graph usign the <i>type</i> option of a dataset.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
@@ -116,7 +116,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index 31ae088ea..878397513 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
@@ -78,8 +78,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index 242320133..fea4a93d6 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -3,7 +3,7 @@
         <p>A bar chart is rendered horizontally when <i>indexAxis</i> option is set as <i>y</i>.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
     </div>
 </template>
 
@@ -111,7 +111,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
     </div>
 </template>
 
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index 8b966d084..6f69233ce 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -3,7 +3,7 @@
         <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
@@ -107,7 +107,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index 89e3b0578..f99041c8b 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -3,7 +3,7 @@
         <p>Various styles of a line series can be customized to display customizations like an area chart.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
@@ -116,7 +116,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index 7766cd31e..19a4eacee 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -3,7 +3,7 @@
         <p>Multiple axes can be added using the <i>scales</i> option.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
@@ -125,7 +125,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index cb3243f5e..f2a94d65f 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
@@ -76,8 +76,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index 33fc97f45..1d0ad2e09 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
@@ -89,8 +89,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index cc8c5a0f3..83239ef48 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
@@ -97,8 +97,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+    <div class="card flex justify-center">
+        <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index 7d110d024..4dc868265 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -3,7 +3,7 @@
         <p>Bars can be stacked on top of each other when <i>stacked</i> option of a scale is enabled.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
@@ -117,7 +117,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
 </template>
 
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index 03938ae02..aa147c8fc 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -3,7 +3,7 @@
         <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
     </DocSectionText>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
 </template>
@@ -19,12 +19,12 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
 `,
                 options: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
     </div>
 </template>
 
@@ -110,7 +110,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]"  />
     </div>
 </template>
 
diff --git a/doc/checkbox/BasicDoc.vue b/doc/checkbox/BasicDoc.vue
index f5c7d0633..c75d66dfc 100644
--- a/doc/checkbox/BasicDoc.vue
+++ b/doc/checkbox/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Binary checkbox is used as a controlled input with <i>v-model</i> and <i>binary</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
 </template>
diff --git a/doc/checkbox/DisabledDoc.vue b/doc/checkbox/DisabledDoc.vue
index 69d008084..f27f945a3 100644
--- a/doc/checkbox/DisabledDoc.vue
+++ b/doc/checkbox/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" disabled />
     </div>
 </template>
diff --git a/doc/checkbox/DynamicDoc.vue b/doc/checkbox/DynamicDoc.vue
index 5b221070d..a0a470973 100644
--- a/doc/checkbox/DynamicDoc.vue
+++ b/doc/checkbox/DynamicDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Checkboxes can be generated using a list of values.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category of categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
@@ -26,16 +26,16 @@ export default {
             ],
             code: {
                 basic: `
-<div v-for="category of categories" :key="category.key" class="flex align-items-center">
+<div v-for="category of categories" :key="category.key" class="flex items-center">
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category of categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
                 <label :for="category.key">{{ category.name }}</label>
             </div>
@@ -61,9 +61,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category of categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
                 <label :for="category.key">{{ category.name }}</label>
             </div>
diff --git a/doc/checkbox/FilledDoc.vue b/doc/checkbox/FilledDoc.vue
index cb1d4b5fc..105205ae1 100644
--- a/doc/checkbox/FilledDoc.vue
+++ b/doc/checkbox/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" binary variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" binary variant="filled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" binary variant="filled" />
     </div>
 </template>
diff --git a/doc/checkbox/GroupDoc.vue b/doc/checkbox/GroupDoc.vue
index 2c9a83498..544243358 100644
--- a/doc/checkbox/GroupDoc.vue
+++ b/doc/checkbox/GroupDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple checkboxes can be grouped together.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-3">
-        <div class="flex align-items-center">
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
             <label for="ingredient1" class="ml-2"> Cheese </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
             <label for="ingredient2" class="ml-2"> Mushroom </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
             <label for="ingredient3" class="ml-2"> Pepper </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
             <label for="ingredient4" class="ml-2"> Onion </label>
         </div>
@@ -30,20 +30,20 @@ export default {
             pizza: null,
             code: {
                 basic: `
-<div class="card flex flex-wrap justify-content-center gap-3">
-    <div class="flex align-items-center">
+<div class="card flex flex-wrap justify-center gap-4">
+    <div class="flex items-center">
         <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2"> Cheese </label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
         <label for="ingredient2" class="ml-2"> Mushroom </label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
         <label for="ingredient3" class="ml-2"> Pepper </label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
         <label for="ingredient4" class="ml-2"> Onion </label>
     </div>
@@ -51,20 +51,20 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-3">
-        <div class="flex align-items-center">
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
             <label for="ingredient1" class="ml-2"> Cheese </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
             <label for="ingredient2" class="ml-2"> Mushroom </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
             <label for="ingredient3" class="ml-2"> Pepper </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
             <label for="ingredient4" class="ml-2"> Onion </label>
         </div>
@@ -83,20 +83,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-3">
-        <div class="flex align-items-center">
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
             <label for="ingredient1" class="ml-2"> Cheese </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
             <label for="ingredient2" class="ml-2"> Mushroom </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
             <label for="ingredient3" class="ml-2"> Pepper </label>
         </div>
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
             <label for="ingredient4" class="ml-2"> Onion </label>
         </div>
diff --git a/doc/checkbox/IndeterminateDoc.vue b/doc/checkbox/IndeterminateDoc.vue
index 61989ae87..2b5b93c38 100644
--- a/doc/checkbox/IndeterminateDoc.vue
+++ b/doc/checkbox/IndeterminateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" indeterminate binary />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" indeterminate binary />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" indeterminate binary />
     </div>
 </template>
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index f91f9d345..c366d700c 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" invalid binary />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" invalid binary />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Checkbox v-model="checked" invalid binary />
     </div>
 </template>
diff --git a/doc/chip/TemplateDoc.vue b/doc/chip/TemplateDoc.vue
index e12fea388..5a696a1a8 100644
--- a/doc/chip/TemplateDoc.vue
+++ b/doc/chip/TemplateDoc.vue
@@ -3,8 +3,8 @@
         <p>The default slot allows displaying custom content inside a chip.</p>
     </DocSectionText>
     <div class="card">
-        <Chip class="py-0 pl-0 pr-3">
-            <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
             <span class="ml-2 font-medium">PRIME</span>
         </Chip>
     </div>
@@ -17,16 +17,16 @@ export default {
         return {
             code: {
                 basic: `
-<Chip class="py-0 pl-0 pr-3">
-    <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+<Chip class="py-0 pl-0 pr-4">
+    <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
     <span class="ml-2 font-medium">PRIME</span>
 </Chip>
 `,
                 options: `
 <template>
     <div class="card">
-        <Chip class="py-0 pl-0 pr-3">
-            <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
             <span class="ml-2 font-medium">PRIME</span>
         </Chip>
     </div>
@@ -39,8 +39,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Chip class="py-0 pl-0 pr-3">
-            <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+        <Chip class="py-0 pl-0 pr-4">
+            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
             <span class="ml-2 font-medium">PRIME</span>
         </Chip>
     </div>
diff --git a/doc/colorpicker/AccessibilityDoc.vue b/doc/colorpicker/AccessibilityDoc.vue
index 97565a103..2912c2728 100644
--- a/doc/colorpicker/AccessibilityDoc.vue
+++ b/doc/colorpicker/AccessibilityDoc.vue
@@ -84,7 +84,7 @@
                 <tbody>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">up arrow</i>
                                 <i>down arrow</i>
                             </span>
diff --git a/doc/colorpicker/BasicDoc.vue b/doc/colorpicker/BasicDoc.vue
index 45ce3927e..44991ad8f 100644
--- a/doc/colorpicker/BasicDoc.vue
+++ b/doc/colorpicker/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>ColorPicker is used as a controlled input with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" />
     </div>
 </template>
diff --git a/doc/colorpicker/DisabledDoc.vue b/doc/colorpicker/DisabledDoc.vue
index eef190b68..7fe7b20bc 100644
--- a/doc/colorpicker/DisabledDoc.vue
+++ b/doc/colorpicker/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" disabled />
     </div>
 </template>
diff --git a/doc/colorpicker/FormatDoc.vue b/doc/colorpicker/FormatDoc.vue
index cd64275c0..8e0518286 100644
--- a/doc/colorpicker/FormatDoc.vue
+++ b/doc/colorpicker/FormatDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Default color format to use in value binding is <i>hex</i> and other possible values can be <i>rgb</i> and <i>hsb</i> using the <i>format</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3">
-        <div class="flex-1 flex flex-column align-items-center">
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
             <span>{{ colorHEX }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
             <span>{{ JSON.stringify(colorRGB) }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
             <span>{{ JSON.stringify(colorHSB) }}</span>
         </div>
     </div>
@@ -31,26 +31,26 @@ export default {
             colorHSB: { h: 239, s: 59, b: 95 },
             code: {
                 basic: `
-<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
-<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
-<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
+<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
+<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
+<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3">
-        <div class="flex-1 flex flex-column align-items-center">
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
             <span>{{ colorHEX }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
             <span>{{ JSON.stringify(colorRGB) }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
             <span>{{ JSON.stringify(colorHSB) }}</span>
         </div>
     </div>
@@ -70,20 +70,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3">
-        <div class="flex-1 flex flex-column align-items-center">
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
+            <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
             <span>{{ colorHEX }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
+            <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
             <span>{{ JSON.stringify(colorRGB) }}</span>
         </div>
-        <div class="flex-1 flex flex-column align-items-center">
+        <div class="flex-1 flex flex-col items-center">
             <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
+            <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
             <span>{{ JSON.stringify(colorHSB) }}</span>
         </div>
     </div>
diff --git a/doc/colorpicker/InlineDoc.vue b/doc/colorpicker/InlineDoc.vue
index 58dd6f49d..737d3f2a1 100644
--- a/doc/colorpicker/InlineDoc.vue
+++ b/doc/colorpicker/InlineDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>ColorPicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" inline />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" inline />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ColorPicker v-model="color" inline />
     </div>
 </template>
diff --git a/doc/configuration/PTDoc.vue b/doc/configuration/PTDoc.vue
index 5a56f3e91..b09af2cf1 100644
--- a/doc/configuration/PTDoc.vue
+++ b/doc/configuration/PTDoc.vue
@@ -18,7 +18,7 @@ const app = createApp(App);
 app.use(PrimeVue, {
     pt: {
         slider: {
-            handle: { class: 'bg-primary' }
+            handle: { class: 'bg-primary text-primary-contrast' }
         }
     }
 });
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index 4c5cd1add..57fbac265 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1()" label="Save" outlined></Button>
         <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
@@ -24,7 +24,7 @@ export default {
 <template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1()" label="Save" outlined></Button>
         <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
@@ -84,7 +84,7 @@ export default {
 <template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1()" label="Save" outlined></Button>
         <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
index c6225a776..d5431a783 100644
--- a/doc/confirmdialog/HeadlessDoc.vue
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -4,20 +4,20 @@
     </DocSectionText>
     <ConfirmDialog group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
-                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
                     <i class="pi pi-question text-5xl"></i>
                 </div>
-                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
-                <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
+                <div class="flex items-center gap-2 mt-6">
+                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
                 </div>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
@@ -31,15 +31,15 @@ export default {
                 basic: `
 <ConfirmDialog group="headless">
     <template #container="{ message, acceptCallback, rejectCallback }">
-        <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
-            <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+        <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+            <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
                 <i class="pi pi-question text-5xl"></i>
             </div>
-            <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+            <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
             <p class="mb-0">{{ message.message }}</p>
-            <div class="flex align-items-center gap-2 mt-4">
-                <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
-                <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
+            <div class="flex items-center gap-2 mt-6">
+                <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
             </div>
         </div>
     </template>
@@ -50,20 +50,20 @@ export default {
 <template>
     <ConfirmDialog group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
-                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
                     <i class="pi pi-question text-5xl"></i>
                 </div>
-                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
-                <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
+                <div class="flex items-center gap-2 mt-6">
+                    <Button label="Save" @click="acceptCallback" class="w-32"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
                 </div>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <Toast />
@@ -93,20 +93,20 @@ export default {
 <template>
     <ConfirmDialog group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
-                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+            <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
+                <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
                     <i class="pi pi-question text-5xl"></i>
                 </div>
-                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
-                <div class="flex align-items-center gap-2 mt-4">
+                <div class="flex items-center gap-2 mt-6">
                     <Button label="Save" @click="acceptCallback"></Button>
                     <Button label="Cancel" outlined @click="rejectCallback"></Button>
                 </div>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <Toast />
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index 325039aea..06e410c0f 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -4,16 +4,16 @@
     </DocSectionText>
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@@ -29,16 +29,16 @@ export default {
             code: {
                 basic: `
 <ConfirmDialog group="positioned"></ConfirmDialog>
-<div class="flex flex-wrap justify-content-center gap-2 mb-3">
+<div class="flex flex-wrap justify-center gap-2 mb-4">
     <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
 </div>
-<div class="flex flex-wrap justify-content-center gap-2 mb-3">
+<div class="flex flex-wrap justify-center gap-2 mb-4">
     <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
 </div>
-<div class="flex flex-wrap justify-content-center gap-2">
+<div class="flex flex-wrap justify-center gap-2">
     <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@@ -49,16 +49,16 @@ export default {
     <Toast />
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@@ -103,16 +103,16 @@ export default {
     <Toast />
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
+        <div class="flex flex-wrap justify-center gap-2 mb-4">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 6356801f4..effd29915 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
@@ -24,7 +24,7 @@ export default {
                 basic: `
 <ConfirmDialog group="templating">
     <template #message="slotProps">
-        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
             <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
@@ -36,13 +36,13 @@ export default {
 <template>
     <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
                 <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <Toast />
@@ -84,13 +84,13 @@ export default {
 <template>
     <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <Toast />
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index 478dc8357..241061c89 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1($event)" label="Save" outlined></Button>
         <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
@@ -24,7 +24,7 @@ export default {
 <template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1($event)" label="Save" outlined></Button>
         <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
@@ -84,7 +84,7 @@ export default {
 <template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex flex-wrap gap-2 justify-center">
         <Button @click="confirm1($event)" label="Save" outlined></Button>
         <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
diff --git a/doc/confirmpopup/HeadlessDoc.vue b/doc/confirmpopup/HeadlessDoc.vue
index d3c6e9ad1..e792019ad 100644
--- a/doc/confirmpopup/HeadlessDoc.vue
+++ b/doc/confirmpopup/HeadlessDoc.vue
@@ -4,16 +4,16 @@
     </DocSectionText>
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="border-round p-3">
+            <div class="rounded p-4">
                 <span>{{ message.message }}</span>
-                <div class="flex align-items-center gap-2 mt-3">
+                <div class="flex items-center gap-2 mt-4">
                     <Button label="Save" @click="acceptCallback" size="small"></Button>
                     <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
@@ -27,9 +27,9 @@ export default {
                 basic: `
 <ConfirmPopup group="headless">
     <template #container="{ message, acceptCallback, rejectCallback }">
-        <div class="border-round p-3">
+        <div class="rounded p-4">
             <span>{{ message.message }}</span>
-            <div class="flex align-items-center gap-2 mt-3">
+            <div class="flex items-center gap-2 mt-4">
                 <Button label="Save" @click="acceptCallback" size="small"></Button>
                 <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
             </div>
@@ -43,16 +43,16 @@ export default {
     <Toast />
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="border-round p-3">
+            <div class="rounded p-4">
                 <span>{{ message.message }}</span>
-                <div class="flex align-items-center gap-2 mt-3">
+                <div class="flex items-center gap-2 mt-4">
                     <Button label="Save" @click="acceptCallback" size="small"></Button>
                     <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
 </template>
@@ -82,16 +82,16 @@ export default {
     <Toast />
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="border-round p-3">
+            <div class="rounded p-4">
                 <span>{{ message.message }}</span>
-                <div class="flex align-items-center gap-2 mt-3">
+                <div class="flex items-center gap-2 mt-4">
                     <Button label="Save" @click="acceptCallback" size="small"></Button>
                     <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
 </template>
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index 27801ce8e..fbbdf01c9 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
@@ -24,7 +24,7 @@ export default {
                 basic: `
 <ConfirmPopup group="templating">
     <template #message="slotProps">
-        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
+        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
             <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
@@ -37,13 +37,13 @@ export default {
     <Toast />
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
 </template>
@@ -83,13 +83,13 @@ export default {
     <Toast />
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
+            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
 </template>
diff --git a/doc/contextmenu/BasicDoc.vue b/doc/contextmenu/BasicDoc.vue
index 6ba7477df..68e9ecb53 100644
--- a/doc/contextmenu/BasicDoc.vue
+++ b/doc/contextmenu/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
     </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-30rem border-round shadow-4" @contextmenu="onImageRightClick" aria-haspopup="true" />
+    <div class="card flex md:justify-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,13 +19,13 @@ export default {
             ],
             code: {
                 basic: `
-<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-30rem border-round shadow-4" @contextmenu="onImageRightClick" aria-haspopup="true" />
+<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
 <ContextMenu ref="menu" :model="items" />
 `,
                 options: `
 <template>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-30rem border-round shadow-4" aria-haspopup="true" />
+    <div class="card flex md:justify-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
     </div>
 </template>
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-30rem border-round shadow-4" aria-haspopup="true" />
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
     </div>
 </template>
diff --git a/doc/contextmenu/CommandDoc.vue b/doc/contextmenu/CommandDoc.vue
index ac0cc2a7c..34d0fa95b 100644
--- a/doc/contextmenu/CommandDoc.vue
+++ b/doc/contextmenu/CommandDoc.vue
@@ -2,15 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" style="width: 32px" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
@@ -69,14 +69,14 @@ export default {
             ],
             code: {
                 basic: `
-<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
     <li
         v-for="user in users"
         :key="user.id"
-        :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
         @contextmenu="onRightClick($event, user)"
     >
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <img :alt="user.name" :src="\`/images/avatar/\${user.image}\`" style="width: 32px" />
             <span class="font-bold">{{ user.name }}</span>
         </div>
@@ -88,15 +88,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
@@ -171,15 +171,15 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
             <li
                 v-for="user in users"
                 :key="user.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
                 @contextmenu="onRightClick($event, user)"
             >
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
                     <span class="font-bold">{{ user.name }}</span>
                 </div>
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index 3779c5be9..a353c7829 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -58,7 +58,7 @@ export default {
             ],
             code: {
                 basic: `
-<span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
+<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="..." fill="var(--p-primary-color)" />
         <path d="..." fill="var(--text-color)" />
@@ -81,8 +81,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -146,8 +146,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
+    <div class="card flex justify-center">
+        <span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index a8229831d..539abd031 100644
--- a/doc/contextmenu/TemplateDoc.vue
+++ b/doc/contextmenu/TemplateDoc.vue
@@ -2,34 +2,34 @@
     <DocSectionText v-bind="$attrs">
         <p>ContextMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
     </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
             <li
                 v-for="product in products"
                 :key="product.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
                 @contextmenu="onRightClick($event, product.id)"
             >
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <i class="pi pi-tag text-sm"></i>
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-900 ml-5">${{ product.price }}</span>
+                    <span class="font-bold text-surface-900 ml-8">${{ product.price }}</span>
                 </div>
             </li>
         </ul>
         <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -79,33 +79,33 @@ export default {
             ],
             code: {
                 basic: `
-<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
     <li
         v-for="product in products"
         :key="product.id"
-        :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
         @contextmenu="onRightClick($event, product.id)"
     >
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
-            <div class="flex-1 flex flex-column gap-1">
+        <div class="flex flex-wrap p-2 items-center gap-4">
+            <img class="w-16 flex-shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
+            <div class="flex-1 flex flex-col gap-1">
                 <span class="font-bold">{{ product.name }}</span>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <i class="pi pi-tag text-sm"></i>
                     <span>{{ product.category }}</span>
                 </div>
             </div>
-            <span class="font-bold text-900 ml-5">\${{ product.price }}</span>
+            <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
         </div>
     </li>
 </ul>
 <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
     <template #item="{ item, props }">
-        <a v-ripple class="flex align-items-center" v-bind="props.action">
+        <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
@@ -113,34 +113,34 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
             <li
                 v-for="product in products"
                 :key="product.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
                 @contextmenu="onRightClick($event, product.id)"
             >
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <i class="pi pi-tag text-sm"></i>
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-900 ml-5">\${{ product.price }}</span>
+                    <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
                 </div>
             </li>
         </ul>
         <ContextMenu ref="menu" :model="items" @hide="selectedId = null">
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -203,34 +203,34 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex md:justify-content-center">
-        <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem" @hide="selectedId = null">
+    <div class="card flex md:justify-center">
+        <ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]" @hide="selectedId = null">
             <li
                 v-for="product in products"
                 :key="product.id"
-                :class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
+                :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
                 @contextmenu="onRightClick($event, product.id)"
             >
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-2 items-center gap-4">
+                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <i class="pi pi-tag text-sm"></i>
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-900 ml-5">\${{ product.price }}</span>
+                    <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
                 </div>
             </li>
         </ul>
         <ContextMenu ref="menu" :model="items">
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue
index 21486f042..38ac9a6dc 100644
--- a/doc/datatable/ConditionalStyleDoc.vue
+++ b/doc/datatable/ConditionalStyleDoc.vue
@@ -75,7 +75,7 @@ export default {
     },
     methods: {
         rowClass(data) {
-            return [{ 'bg-primary': data.category === 'Fitness' }];
+            return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
         },
         rowStyle(data) {
             if (data.quantity === 0) {
@@ -84,7 +84,7 @@ export default {
         },
         stockClass(data) {
             return [
-                'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
+                'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
                 {
                     'bg-red-100 text-red-900': data.quantity === 0,
                     'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
@@ -125,7 +125,7 @@ onMounted(() => {
 const products = ref();
 
 const rowClass = (data) => {
-    return [{ 'bg-primary': data.category === 'Fitness' }];
+    return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
 };
 const rowStyle = (data) => {
     if (data.quantity === 0) {
@@ -134,7 +134,7 @@ const rowStyle = (data) => {
 };
 const stockClass = (data) => {
     return [
-        'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
+        'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
         {
             'bg-red-100 text-red-900': data.quantity === 0,
             'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
@@ -167,7 +167,7 @@ const stockClass = (data) => {
             ProductService.getProductsSmall().then((data) => (this.products = data));
         },
         rowClass(data) {
-            return [{ 'bg-primary': data.category === 'Fitness' }];
+            return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
         },
         rowStyle(data) {
             if (data.quantity === 0) {
@@ -176,7 +176,7 @@ const stockClass = (data) => {
         },
         stockClass(data) {
             return [
-                'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
+                'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
                 {
                     'bg-red-100 text-red-900': data.quantity === 0,
                     'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue
index 83c0b2e9b..5a9b2aed9 100644
--- a/doc/datatable/LazyLoadDoc.vue
+++ b/doc/datatable/LazyLoadDoc.vue
@@ -43,7 +43,7 @@
                 </Column>
                 <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
                             <span>{{ data.country.name }}</span>
                         </div>
@@ -59,7 +59,7 @@
                 </Column>
                 <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
                             <span>{{ data.representative.name }}</span>
                         </div>
@@ -113,7 +113,7 @@ export default {
     </Column>
     <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                 <span>{{ data.country.name }}</span>
             </div>
@@ -129,7 +129,7 @@ export default {
     </Column>
     <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                 <span>{{ data.representative.name }}</span>
             </div>
@@ -155,7 +155,7 @@ export default {
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -171,7 +171,7 @@ export default {
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -289,7 +289,7 @@ export default {
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -305,7 +305,7 @@ export default {
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index c0afffce0..d143ce8b5 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -13,7 +13,7 @@
         <div class="card">
             <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
                 <template #header>
-                    <div class="flex flex-wrap justify-content-end gap-2">
+                    <div class="flex flex-wrap justify-end gap-2">
                         <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
                         <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                     </div>
@@ -22,7 +22,7 @@
                 <Column field="name" header="Name"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-4" width="64" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
                     </template>
                 </Column>
                 <Column field="price" header="Price">
@@ -42,7 +42,7 @@
                     </template>
                 </Column>
                 <template #expansion="slotProps">
-                    <div class="p-3">
+                    <div class="p-4">
                         <h5>Orders for {{ slotProps.data.name }}</h5>
                         <DataTable :value="slotProps.data.orders">
                             <Column field="id" header="Id" sortable></Column>
@@ -85,7 +85,7 @@ export default {
 <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
         @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
     <template #header>
-        <div class="flex flex-wrap justify-content-end gap-2">
+        <div class="flex flex-wrap justify-end gap-2">
             <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
         </div>
@@ -94,7 +94,7 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column header="Image">
         <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
         </template>
     </Column>
     <Column field="price" header="Price">
@@ -114,7 +114,7 @@ export default {
         </template>
     </Column>
     <template #expansion="slotProps">
-        <div class="p-3">
+        <div class="p-4">
             <h5>Orders for {{ slotProps.data.name }}</h5>
             <DataTable :value="slotProps.data.orders">
                 <Column field="id" header="Id" sortable></Column>
@@ -146,7 +146,7 @@ export default {
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
             <template #header>
-                <div class="flex flex-wrap justify-content-end gap-2">
+                <div class="flex flex-wrap justify-end gap-2">
                     <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
                     <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
@@ -155,7 +155,7 @@ export default {
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
                 </template>
             </Column>
             <Column field="price" header="Price">
@@ -175,7 +175,7 @@ export default {
                 </template>
             </Column>
             <template #expansion="slotProps">
-                <div class="p-3">
+                <div class="p-4">
                     <h5>Orders for {{ slotProps.data.name }}</h5>
                     <DataTable :value="slotProps.data.orders" >
                         <Column field="id" header="Id" sortable></Column>
@@ -276,7 +276,7 @@ export default {
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
             <template #header>
-                <div class="flex flex-wrap justify-content-end gap-2">
+                <div class="flex flex-wrap justify-end gap-2">
                     <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
                     <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
@@ -285,7 +285,7 @@ export default {
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
                 </template>
             </Column>
             <Column field="price" header="Price">
@@ -305,7 +305,7 @@ export default {
                 </template>
             </Column>
             <template #expansion="slotProps">
-                <div class="p-3">
+                <div class="p-4">
                     <h5>Orders for {{ slotProps.data.name }}</h5>
                     <DataTable :value="slotProps.data.orders">
                         <Column field="id" header="Id" sortable></Column>
diff --git a/doc/datatable/SizeDoc.vue b/doc/datatable/SizeDoc.vue
index 955ffe4a5..cf4f9363f 100644
--- a/doc/datatable/SizeDoc.vue
+++ b/doc/datatable/SizeDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center mb-4">
+            <div class="flex justify-center mb-6">
                 <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
             </div>
             <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
@@ -44,7 +44,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center mb-4">
+        <div class="flex justify-center mb-6">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
         </div>
         <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
@@ -80,7 +80,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center mb-4">
+        <div class="flex justify-center mb-6">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
         </div>
         <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index 6ecb60cc1..67d4214e9 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -37,7 +37,7 @@
                 </Column>
                 <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
                             <span>{{ data.country.name }}</span>
                         </div>
@@ -48,7 +48,7 @@
                 </Column>
                 <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
                             <span>{{ data.representative.name }}</span>
                         </div>
@@ -56,7 +56,7 @@
                     <template #filter="{ filterModel }">
                         <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
-                                <div class="flex align-items-center gap-2">
+                                <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
                                     <span>{{ slotProps.option.name }}</span>
                                 </div>
@@ -126,7 +126,7 @@ export default {
     </Column>
     <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                 <span>{{ data.country.name }}</span>
             </div>
@@ -137,7 +137,7 @@ export default {
     </Column>
     <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                 <span>{{ data.representative.name }}</span>
             </div>
@@ -145,7 +145,7 @@ export default {
         <template #filter="{ filterModel }">
             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                 <template #option="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                         <span>{{ slotProps.option.name }}</span>
                     </div>
@@ -189,7 +189,7 @@ export default {
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -200,7 +200,7 @@ export default {
             </Column>
             <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -208,7 +208,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -317,7 +317,7 @@ export default {
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -328,7 +328,7 @@ export default {
             </Column>
             <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -336,7 +336,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 691e6c828..9162ec9e3 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -6,15 +6,15 @@
         <div class="card">
             <DataTable :value="products" tableStyle="min-width: 50rem">
                 <template #header>
-                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <span class="text-xl text-900 font-bold">Products</span>
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <span class="text-xl text-surface-900 font-bold">Products</span>
                         <Button icon="pi pi-refresh" rounded raised />
                     </div>
                 </template>
                 <Column field="name" header="Name"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem border-round" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-24 rounded" />
                     </template>
                 </Column>
                 <Column field="price" header="Price">
@@ -51,15 +51,15 @@ export default {
                 basic: `
 <DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
-        <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-            <span class="text-xl text-900 font-bold">Products</span>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+            <span class="text-xl text-surface-900 font-bold">Products</span>
             <Button icon="pi pi-refresh" rounded raised />
         </div>
     </template>
     <Column field="name" header="Name"></Column>
     <Column header="Image">
         <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
         </template>
     </Column>
     <Column field="price" header="Price">
@@ -86,15 +86,15 @@ export default {
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
-                <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                    <span class="text-xl text-900 font-bold">Products</span>
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                    <span class="text-xl text-surface-900 font-bold">Products</span>
                     <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
                 </template>
             </Column>
             <Column field="price" header="Price">
@@ -158,15 +158,15 @@ export default {
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
-                <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                    <span class="text-xl text-900 font-bold">Products</span>
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                    <span class="text-xl text-surface-900 font-bold">Products</span>
                     <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
                 </template>
             </Column>
             <Column field="price" header="Price">
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index c7d66e7f5..39030a9a7 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -6,7 +6,7 @@
         <div class="card">
             <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
                 <template #header>
-                    <div class="flex justify-content-between">
+                    <div class="flex justify-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                         <IconField>
                             <InputIcon>
@@ -28,7 +28,7 @@
                 </Column>
                 <Column header="Country" filterField="country.name" style="min-width: 12rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
                             <span>{{ data.country.name }}</span>
                         </div>
@@ -43,12 +43,12 @@
                         <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                     </template>
                     <template #filterfooter>
-                        <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                        <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
                     </template>
                 </Column>
                 <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
                             <span>{{ data.representative.name }}</span>
                         </div>
@@ -56,7 +56,7 @@
                     <template #filter="{ filterModel }">
                         <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
-                                <div class="flex align-items-center gap-2">
+                                <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
                                     <span>{{ slotProps.option.name }}</span>
                                 </div>
@@ -97,8 +97,8 @@
                         <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                     </template>
                     <template #filter="{ filterModel }">
-                        <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                        <div class="flex align-items-center justify-content-between px-2">
+                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                        <div class="flex items-center justify-between px-2">
                             <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                             <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                         </div>
@@ -147,7 +147,7 @@ export default {
 <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
         filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
-        <div class="flex justify-content-between">
+        <div class="flex justify-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
             <IconField>
                 <InputIcon>
@@ -169,7 +169,7 @@ export default {
     </Column>
     <Column header="Country" filterField="country.name" style="min-width: 12rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                 <span>{{ data.country.name }}</span>
             </div>
@@ -184,12 +184,12 @@ export default {
             <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
         </template>
         <template #filterfooter>
-            <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+            <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
         </template>
     </Column>
     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                 <span>{{ data.representative.name }}</span>
             </div>
@@ -197,7 +197,7 @@ export default {
         <template #filter="{ filterModel }">
             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                 <template #option="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                         <span>{{ slotProps.option.name }}</span>
                     </div>
@@ -238,8 +238,8 @@ export default {
             <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
         </template>
         <template #filter="{ filterModel }">
-            <Slider v-model="filterModel.value" range class="m-3"></Slider>
-            <div class="flex align-items-center justify-content-between px-2">
+            <Slider v-model="filterModel.value" range class="m-4"></Slider>
+            <div class="flex items-center justify-between px-2">
                 <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                 <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
             </div>
@@ -262,7 +262,7 @@ export default {
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
-                <div class="flex justify-content-between">
+                <div class="flex justify-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <IconField>
                         <InputIcon>
@@ -284,7 +284,7 @@ export default {
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -299,12 +299,12 @@ export default {
                     <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                 </template>
                 <template #filterfooter>
-                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
                 </template>
             </Column>
             <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -312,7 +312,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -353,8 +353,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                 </template>
                 <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                    <div class="flex align-items-center justify-content-between px-2">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
                         <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                         <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                     </div>
@@ -469,7 +469,7 @@ export default {
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
-                <div class="flex justify-content-between">
+                <div class="flex justify-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <IconField>
                         <InputIcon>
@@ -491,7 +491,7 @@ export default {
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -506,12 +506,12 @@ export default {
                     <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                 </template>
                 <template #filterfooter>
-                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
                 </template>
             </Column>
             <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -519,7 +519,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -560,8 +560,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                 </template>
                 <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                    <div class="flex align-items-center justify-content-between px-2">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
                         <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                         <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                     </div>
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index 059ebba9e..4f7a613c2 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -10,7 +10,7 @@
         <div class="card">
             <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
                 <template #header>
-                    <div class="flex justify-content-end">
+                    <div class="flex justify-end">
                         <IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
@@ -31,7 +31,7 @@
                 </Column>
                 <Column header="Country" filterField="country.name" style="min-width: 12rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
                             <span>{{ data.country.name }}</span>
                         </div>
@@ -42,7 +42,7 @@
                 </Column>
                 <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
                             <span>{{ data.representative.name }}</span>
                         </div>
@@ -50,7 +50,7 @@
                     <template #filter="{ filterModel, filterCallback }">
                         <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
                             <template #option="slotProps">
-                                <div class="flex align-items-center gap-2">
+                                <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
                                     <span>{{ slotProps.option.name }}</span>
                                 </div>
@@ -119,7 +119,7 @@ export default {
 <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
         :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
     <template #header>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
@@ -140,7 +140,7 @@ export default {
     </Column>
     <Column header="Country" filterField="country.name" style="min-width: 12rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                 <span>{{ data.country.name }}</span>
             </div>
@@ -151,7 +151,7 @@ export default {
     </Column>
     <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                 <span>{{ data.representative.name }}</span>
             </div>
@@ -159,7 +159,7 @@ export default {
         <template #filter="{ filterModel, filterCallback }">
             <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
                 <template #option="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                         <span>{{ slotProps.option.name }}</span>
                     </div>
@@ -195,7 +195,7 @@ export default {
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
@@ -216,7 +216,7 @@ export default {
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -227,7 +227,7 @@ export default {
             </Column>
             <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -235,7 +235,7 @@ export default {
                 <template #filter="{ filterModel, filterCallback }">
                     <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -351,7 +351,7 @@ export default {
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
@@ -372,7 +372,7 @@ export default {
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -383,7 +383,7 @@ export default {
             </Column>
             <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -391,7 +391,7 @@ export default {
                 <template #filter="{ filterModel, filterCallback }">
                     <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
diff --git a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
index 3d6f9d9e0..4b941e18f 100644
--- a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
@@ -22,13 +22,13 @@
             >
                 <template #groupheader="slotProps">
                     <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2" />
-                    <span class="vertical-align-middle ml-2 font-bold line-height-3">{{ slotProps.data.representative.name }}</span>
+                    <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
                 </template>
                 <Column field="representative.name" header="Representative"></Column>
                 <Column field="name" header="Name" style="width: 20%"></Column>
                 <Column field="country" header="Country" style="width: 20%">
                     <template #body="slotProps">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
                             <span>{{ slotProps.data.country.name }}</span>
                         </div>
@@ -42,7 +42,7 @@
                 </Column>
                 <Column field="date" header="Date" style="width: 20%"></Column>
                 <template #groupfooter="slotProps">
-                    <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
                 </template>
             </DataTable>
         </div>
@@ -65,13 +65,13 @@ export default {
         sortMode="single" sortField="representative.name" :sortOrder="1">
     <template #groupheader="slotProps">
         <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-        <span class="vertical-align-middle ml-2 font-bold line-height-3">{{ slotProps.data.representative.name }}</span>
+        <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
     </template>
     <Column field="representative.name" header="Representative"></Column>
     <Column field="name" header="Name" style="width: 20%"></Column>
     <Column field="country" header="Country" style="width: 20%">
         <template #body="slotProps">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                 <span>{{ slotProps.data.country.name }}</span>
             </div>
@@ -85,7 +85,7 @@ export default {
     </Column>
     <Column field="date" header="Date" style="width: 20%"></Column>
     <template #groupfooter="slotProps">
-        <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>
 `,
@@ -97,13 +97,13 @@ export default {
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
                 <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-                <span class="vertical-align-middle ml-2 font-bold line-height-3">{{ slotProps.data.representative.name }}</span>
+                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>
             <Column field="name" header="Name" style="width: 20%"></Column>
             <Column field="country" header="Country" style="width: 20%">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
@@ -117,7 +117,7 @@ export default {
             </Column>
             <Column field="date" header="Date" style="width: 20%"></Column>
             <template #groupfooter="slotProps">
-                <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
             </template>
         </DataTable>
         <Toast />
@@ -187,13 +187,13 @@ export default {
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
                 <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
-                <span class="vertical-align-middle ml-2 font-bold line-height-3">{{ slotProps.data.representative.name }}</span>
+                <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>
             <Column field="name" header="Name" style="width: 20%"></Column>
             <Column field="country" header="Country" style="width: 20%">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
@@ -207,7 +207,7 @@ export default {
             </Column>
             <Column field="date" header="Date" style="width: 20%"></Column>
             <template #groupfooter="slotProps">
-                <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
             </template>
         </DataTable>
         <Toast />
diff --git a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
index 626e8c9d9..f0306b640 100644
--- a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
@@ -12,7 +12,7 @@
                 </Column>
                 <Column field="representative.name" header="Representative" style="min-width: 200px">
                     <template #body="slotProps">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
                             <span>{{ slotProps.data.representative.name }}</span>
                         </div>
@@ -21,7 +21,7 @@
                 <Column field="name" header="Name" style="min-width: 200px"></Column>
                 <Column field="country" header="Country" style="min-width: 150px">
                     <template #body="slotProps">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
                             <span>{{ slotProps.data.country.name }}</span>
                         </div>
@@ -58,7 +58,7 @@ export default {
     </Column>
     <Column field="representative.name" header="Representative" style="min-width: 200px">
         <template #body="slotProps">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
                 <span>{{ slotProps.data.representative.name }}</span>
             </div>
@@ -67,7 +67,7 @@ export default {
     <Column field="name" header="Name" style="min-width: 200px"></Column>
     <Column field="country" header="Country" style="min-width: 150px">
         <template #body="slotProps">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                 <span>{{ slotProps.data.country.name }}</span>
             </div>
@@ -93,7 +93,7 @@ export default {
             </Column>
             <Column field="representative.name" header="Representative" style="min-width: 200px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
                         <span>{{ slotProps.data.representative.name }}</span>
                     </div>
@@ -102,7 +102,7 @@ export default {
             <Column field="name" header="Name" style="min-width: 200px"></Column>
             <Column field="country" header="Country" style="min-width: 150px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
@@ -165,7 +165,7 @@ export default {
             </Column>
             <Column field="representative.name" header="Representative" style="min-width: 200px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
                         <span>{{ slotProps.data.representative.name }}</span>
                     </div>
@@ -174,7 +174,7 @@ export default {
             <Column field="name" header="Name" style="min-width: 200px"></Column>
             <Column field="country" header="Country" style="min-width: 150px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
diff --git a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
index ebb95ddc3..ce80c5712 100644
--- a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
@@ -9,7 +9,7 @@
         <div class="card">
             <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
                 <template #groupheader="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
                         <span>{{ slotProps.data.representative.name }}</span>
                     </div>
@@ -18,7 +18,7 @@
                 <Column field="name" header="Name" style="min-width: 200px"></Column>
                 <Column field="country" header="Country" style="min-width: 200px">
                     <template #body="slotProps">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
                             <span>{{ slotProps.data.country.name }}</span>
                         </div>
@@ -32,7 +32,7 @@
                 </Column>
                 <Column field="date" header="Date" style="min-width: 200px"></Column>
                 <template #groupfooter="slotProps">
-                    <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                    <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
                 </template>
             </DataTable>
         </div>
@@ -55,7 +55,7 @@ export default {
     <Column field="name" header="Name" style="min-width: 200px"></Column>
     <Column field="country" header="Country" style="min-width: 200px">
         <template #body="slotProps">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                 <span>{{ slotProps.data.country.name }}</span>
             </div>
@@ -69,13 +69,13 @@ export default {
     </Column>
     <Column field="date" header="Date" style="min-width: 200px"></Column>
     <template #groupheader="slotProps">
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
             <span>{{ slotProps.data.representative.name }}</span>
         </div>
     </template>
     <template #groupfooter="slotProps">
-        <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+        <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>
 `,
@@ -88,7 +88,7 @@ export default {
             <Column field="name" header="Name" style="min-width: 200px"></Column>
             <Column field="country" header="Country" style="min-width: 200px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
@@ -102,13 +102,13 @@ export default {
             </Column>
             <Column field="date" header="Date" style="min-width: 200px"></Column>
             <template #groupheader="slotProps">
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
                     <span>{{ slotProps.data.representative.name }}</span>
                 </div>
             </template>
             <template #groupfooter="slotProps">
-                <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
             </template>
         </DataTable>
     </div>
@@ -171,7 +171,7 @@ export default {
             <Column field="name" header="Name" style="min-width: 200px"></Column>
             <Column field="country" header="Country" style="min-width: 200px">
                 <template #body="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.data.country.code}\`" style="width: 24px" />
                         <span>{{ slotProps.data.country.name }}</span>
                     </div>
@@ -185,13 +185,13 @@ export default {
             </Column>
             <Column field="date" header="Date" style="min-width: 200px"></Column>
             <template #groupheader="slotProps">
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" />
                     <span>{{ slotProps.data.representative.name }}</span>
                 </div>
             </template>
             <template #groupfooter="slotProps">
-                <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
             </template>
         </DataTable>
     </div>
diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
index fabfed250..da94deb7e 100644
--- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -7,7 +7,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+            <div class="flex justify-center items-center mb-6 gap-2">
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
@@ -45,7 +45,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
@@ -78,7 +78,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
index ad59d5bd3..6044301f6 100644
--- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -11,7 +11,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+            <div class="flex justify-center items-center mb-6 gap-2">
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
@@ -49,7 +49,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
@@ -82,7 +82,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 5b4f9badb..7edb68c2b 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -15,7 +15,7 @@
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
             >
                 <template #header>
-                    <div class="flex justify-content-between">
+                    <div class="flex justify-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                         <IconField>
                             <InputIcon>
@@ -37,7 +37,7 @@
                 </Column>
                 <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
                             <span>{{ data.country.name }}</span>
                         </div>
@@ -48,7 +48,7 @@
                 </Column>
                 <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                     <template #body="{ data }">
-                        <div class="flex align-items-center gap-2">
+                        <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
                             <span>{{ data.representative.name }}</span>
                         </div>
@@ -56,7 +56,7 @@
                     <template #filter="{ filterModel }">
                         <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
-                                <div class="flex align-items-center gap-2">
+                                <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
                                     <span>{{ slotProps.option.name }}</span>
                                 </div>
@@ -97,8 +97,8 @@
                         <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                     </template>
                     <template #filter="{ filterModel }">
-                        <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                        <div class="flex align-items-center justify-content-between px-2">
+                        <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                        <div class="flex items-center justify-between px-2">
                             <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                             <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                         </div>
@@ -143,7 +143,7 @@ export default {
 <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
     :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
-        <div class="flex justify-content-between">
+        <div class="flex justify-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
             <IconField>
                 <InputIcon>
@@ -165,7 +165,7 @@ export default {
     </Column>
     <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                 <span>{{ data.country.name }}</span>
             </div>
@@ -176,7 +176,7 @@ export default {
     </Column>
     <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
         <template #body="{ data }">
-            <div class="flex align-items-center gap-2">
+            <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                 <span>{{ data.representative.name }}</span>
             </div>
@@ -184,7 +184,7 @@ export default {
         <template #filter="{ filterModel }">
             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                 <template #option="slotProps">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                         <span>{{ slotProps.option.name }}</span>
                     </div>
@@ -225,8 +225,8 @@ export default {
             <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
         </template>
         <template #filter="{ filterModel }">
-            <Slider v-model="filterModel.value" range class="m-3"></Slider>
-            <div class="flex align-items-center justify-content-between px-2">
+            <Slider v-model="filterModel.value" range class="m-4"></Slider>
+            <div class="flex items-center justify-between px-2">
                 <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                 <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
             </div>
@@ -245,7 +245,7 @@ export default {
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
-                <div class="flex justify-content-between">
+                <div class="flex justify-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <IconField>
                         <InputIcon>
@@ -267,7 +267,7 @@ export default {
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -278,7 +278,7 @@ export default {
             </Column>
             <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -286,7 +286,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -327,8 +327,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                 </template>
                 <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                    <div class="flex align-items-center justify-content-between px-2">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
                         <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                         <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                     </div>
@@ -438,7 +438,7 @@ export default {
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
-                <div class="flex justify-content-between">
+                <div class="flex justify-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <IconField>
                         <InputIcon>
@@ -460,7 +460,7 @@ export default {
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
                         <span>{{ data.country.name }}</span>
                     </div>
@@ -471,7 +471,7 @@ export default {
             </Column>
             <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                 <template #body="{ data }">
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
                         <span>{{ data.representative.name }}</span>
                     </div>
@@ -479,7 +479,7 @@ export default {
                 <template #filter="{ filterModel }">
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
-                            <div class="flex align-items-center gap-2">
+                            <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
                                 <span>{{ slotProps.option.name }}</span>
                             </div>
@@ -520,8 +520,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
                 </template>
                 <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                    <div class="flex align-items-center justify-content-between px-2">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
                         <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                         <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                     </div>
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 580422936..fd63b61ca 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <Toolbar class="mb-4">
+            <Toolbar class="mb-6">
                 <template #start>
                     <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -29,7 +29,7 @@
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
             >
                 <template #header>
-                    <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
                         <h4 class="m-0">Manage Products</h4>
                         <IconField>
                             <InputIcon>
@@ -45,7 +45,7 @@
                 <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
@@ -75,7 +75,7 @@
     </DeferredDemo>
 
     <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-        <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-3" />
+        <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
         <div class="field">
             <label for="name">Name</label>
             <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
@@ -87,7 +87,7 @@
         </div>
 
         <div class="field">
-            <label for="inventoryStatus" class="mb-3">Inventory Status</label>
+            <label for="inventoryStatus" class="mb-4">Inventory Status</label>
             <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
                 <template #value="slotProps">
                     <div v-if="slotProps.value && slotProps.value.value">
@@ -104,28 +104,28 @@
         </div>
 
         <div class="field">
-            <label class="mb-3">Category</label>
-            <div class="formgrid grid">
-                <div class="field-radiobutton col-6">
+            <label class="mb-4">Category</label>
+            <div class="formgrid grid grid-cols-12 gap-4">
+                <div class="field-radiobutton col-span-6">
                     <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
                     <label for="category1">Accessories</label>
                 </div>
-                <div class="field-radiobutton col-6">
+                <div class="field-radiobutton col-span-6">
                     <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
                     <label for="category2">Clothing</label>
                 </div>
-                <div class="field-radiobutton col-6">
+                <div class="field-radiobutton col-span-6">
                     <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
                     <label for="category3">Electronics</label>
                 </div>
-                <div class="field-radiobutton col-6">
+                <div class="field-radiobutton col-span-6">
                     <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
                     <label for="category4">Fitness</label>
                 </div>
             </div>
         </div>
 
-        <div class="formgrid grid">
+        <div class="formgrid grid grid-cols-12 gap-4">
             <div class="field col">
                 <label for="price">Price</label>
                 <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
@@ -143,7 +143,7 @@
 
     <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
         <div class="confirmation-content">
-            <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+            <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
             <span v-if="product"
                 >Are you sure you want to delete <b>{{ product.name }}</b
                 >?</span
@@ -157,7 +157,7 @@
 
     <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
         <div class="confirmation-content">
-            <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+            <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
             <span v-if="product">Are you sure you want to delete the selected products?</span>
         </div>
         <template #footer>
@@ -191,7 +191,7 @@ export default {
             ],
             code: {
                 basic: `
-<Toolbar class="mb-4">
+<Toolbar class="mb-6">
     <template #start>
         <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
         <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -206,7 +206,7 @@ export default {
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
     <template #header>
-        <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+        <div class="flex flex-wrap gap-2 items-center justify-between">
             <h4 class="m-0">Manage Products</h4>
             <IconField>
                 <InputIcon>
@@ -221,7 +221,7 @@ export default {
     <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
     <Column header="Image">
         <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
         </template>
     </Column>
     <Column field="price" header="Price" sortable style="min-width:8rem">
@@ -252,7 +252,7 @@ export default {
 <template>
     <div>
         <div class="card">
-            <Toolbar class="mb-4">
+            <Toolbar class="mb-6">
                 <template #start>
                     <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -269,7 +269,7 @@ export default {
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
                 <template #header>
-                    <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
                         <h4 class="m-0">Manage Products</h4>
 						<IconField>
                             <InputIcon>
@@ -285,7 +285,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width:8rem">
@@ -314,7 +314,7 @@ export default {
         </div>
 
         <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
-            <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
+            <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
             <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
@@ -326,7 +326,7 @@ export default {
             </div>
 
             <div class="field">
-				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
+				<label for="inventoryStatus" class="mb-4">Inventory Status</label>
 				<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
@@ -343,28 +343,28 @@ export default {
 			</div>
 
             <div class="field">
-                <label class="mb-3">Category</label>
-                <div class="formgrid grid">
-                    <div class="field-radiobutton col-6">
+                <label class="mb-4">Category</label>
+                <div class="formgrid grid grid-cols-12 gap-4">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
                         <label for="category1">Accessories</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
                         <label for="category2">Clothing</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
                         <label for="category3">Electronics</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
                         <label for="category4">Fitness</label>
                     </div>
                 </div>
             </div>
 
-            <div class="formgrid grid">
+            <div class="formgrid grid grid-cols-12 gap-4">
                 <div class="field col">
                     <label for="price">Price</label>
                     <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
@@ -382,7 +382,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
@@ -393,7 +393,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
@@ -543,7 +543,7 @@ export default {
 <template>
     <div>
         <div class="card">
-            <Toolbar class="mb-4">
+            <Toolbar class="mb-6">
                 <template #start>
                     <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -560,7 +560,7 @@ export default {
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
                 <template #header>
-                    <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+                    <div class="flex flex-wrap gap-2 items-center justify-between">
                         <h4 class="m-0">Manage Products</h4>
 						<IconField>
                             <InputIcon>
@@ -576,7 +576,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width:8rem">
@@ -605,7 +605,7 @@ export default {
         </div>
 
         <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
-            <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
+            <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
             <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
@@ -617,7 +617,7 @@ export default {
             </div>
 
             <div class="field">
-				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
+				<label for="inventoryStatus" class="mb-4">Inventory Status</label>
 				<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
@@ -634,28 +634,28 @@ export default {
 			</div>
 
             <div class="field">
-                <label class="mb-3">Category</label>
-                <div class="formgrid grid">
-                    <div class="field-radiobutton col-6">
+                <label class="mb-4">Category</label>
+                <div class="formgrid grid grid-cols-12 gap-4">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
                         <label for="category1">Accessories</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
                         <label for="category2">Clothing</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
                         <label for="category3">Electronics</label>
                     </div>
-                    <div class="field-radiobutton col-6">
+                    <div class="field-radiobutton col-span-6">
                         <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
                         <label for="category4">Fitness</label>
                     </div>
                 </div>
             </div>
 
-            <div class="formgrid grid">
+            <div class="formgrid grid grid-cols-12 gap-4">
                 <div class="field col">
                     <label for="price">Price</label>
                     <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
@@ -673,7 +673,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
@@ -684,7 +684,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
diff --git a/doc/datatable/scroll/FlexibleScrollDoc.vue b/doc/datatable/scroll/FlexibleScrollDoc.vue
index 0e05141cf..c0767ad54 100644
--- a/doc/datatable/scroll/FlexibleScrollDoc.vue
+++ b/doc/datatable/scroll/FlexibleScrollDoc.vue
@@ -5,7 +5,7 @@
             adjusts itself according to the size changes.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }" @show="onShow">
diff --git a/doc/datatable/scroll/FrozenColumnsDoc.vue b/doc/datatable/scroll/FrozenColumnsDoc.vue
index 35eefca94..5dd7adf55 100644
--- a/doc/datatable/scroll/FrozenColumnsDoc.vue
+++ b/doc/datatable/scroll/FrozenColumnsDoc.vue
@@ -6,7 +6,7 @@
         <div class="card">
             <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
-            <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
+            <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
                 <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
                 <Column field="id" header="Id" style="min-width: 100px"></Column>
                 <Column field="name" header="Name" style="min-width: 200px"></Column>
@@ -38,7 +38,7 @@ export default {
             code: {
                 basic: `
 <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
-<DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
+<DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
     <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
     <Column field="id" header="Id" style="min-width: 100px"></Column>
     <Column field="name" header="Name" style="min-width: 200px"></Column>
@@ -60,7 +60,7 @@ export default {
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
-        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
+        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
             <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
             <Column field="id" header="Id" style="min-width: 100px"></Column>
             <Column field="name" header="Name" style="min-width: 200px"></Column>
@@ -107,7 +107,7 @@ export default {
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
-        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
+        <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-6">
             <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
             <Column field="id" header="Id" style="min-width: 100px"></Column>
             <Column field="name" header="Name" style="min-width: 200px"></Column>
diff --git a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
index b8262d897..0e453456b 100644
--- a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
@@ -14,35 +14,35 @@
             >
                 <Column field="id" header="Id" style="width: 20%">
                     <template #loading>
-                        <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="vin" header="Vin" style="width: 20%">
                     <template #loading>
-                        <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="year" header="Year" style="width: 20%">
                     <template #loading>
-                        <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                             <Skeleton width="30%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="brand" header="Brand" style="width: 20%">
                     <template #loading>
-                        <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="color" header="Color" style="width: 20%">
                     <template #loading>
-                        <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                        <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
@@ -69,35 +69,35 @@ export default {
         :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
     <Column field="id" header="Id" style="width: 20%">
         <template #loading>
-            <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                 <Skeleton width="60%" height="1rem" />
             </div>
         </template>
     </Column>
     <Column field="vin" header="Vin" style="width: 20%">
         <template #loading>
-            <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                 <Skeleton width="40%" height="1rem" />
             </div>
         </template>
     </Column>
     <Column field="year" header="Year" style="width: 20%">
         <template #loading>
-            <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                 <Skeleton width="30%" height="1rem" />
             </div>
         </template>
     </Column>
     <Column field="brand" header="Brand" style="width: 20%">
         <template #loading>
-            <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                 <Skeleton width="40%" height="1rem" />
             </div>
         </template>
     </Column>
     <Column field="color" header="Color" style="width: 20%">
         <template #loading>
-            <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+            <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                 <Skeleton width="60%" height="1rem" />
             </div>
         </template>
@@ -111,35 +111,35 @@ export default {
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
             <Column field="id" header="Id" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="60%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="vin" header="Vin" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="40%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="year" header="Year" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="30%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="brand" header="Brand" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="40%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="color" header="Color" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="60%" height="1rem" />
                     </div>
                 </template>
@@ -197,35 +197,35 @@ export default {
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
             <Column field="id" header="Id" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="60%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="vin" header="Vin" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="40%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="year" header="Year" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="30%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="brand" header="Brand" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="40%" height="1rem" />
                     </div>
                 </template>
             </Column>
             <Column field="color" header="Color" style="width: 20%">
                 <template #loading>
-                    <div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
+                    <div class="flex items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
                         <Skeleton width="60%" height="1rem" />
                     </div>
                 </template>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 82064f670..c676ca03c 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -5,31 +5,31 @@
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -53,31 +53,31 @@ export default {
                 basic: `
 <DataView :value="products">
     <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <div class="md:w-10rem relative">
-                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                    <div class="md:w-40 relative">
+                        <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
-                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
-                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                     <i class="pi pi-star-fill text-yellow-500"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-column md:align-items-end gap-5">
-                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                             </div>
                         </div>
                     </div>
@@ -92,31 +92,31 @@ export default {
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -165,31 +165,31 @@ export default {
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index 9df67d23c..1ed2e784d 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -15,31 +15,31 @@
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -49,32 +49,32 @@
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 xl:col-6 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
-                            <div class="surface-50 flex justify-content-center border-round p-3">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
-                                    <img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
+                                    <img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
-                            <div class="pt-4">
-                                <div class="flex flex-row justify-content-between align-items-start gap-2">
+                            <div class="pt-6">
+                                <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column gap-4 mt-4">
-                                    <span class="text-2xl font-semibold text-900">${{ item.price }}</span>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold text-surface-900">${{ item.price }}</span>
                                     <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
                                     </div>
                                 </div>
@@ -95,13 +95,13 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
+            layout: 'grid grid-cols-12 gap-4',
+            options: ['list', 'grid grid-cols-12 gap-4'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
     <template #header>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                 <template #option="{ option }">
                     <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -111,31 +111,31 @@ export default {
     </template>
 
     <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <div class="md:w-10rem relative">
-                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                    <div class="md:w-40 relative">
+                        <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
-                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
-                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                     <i class="pi pi-star-fill text-yellow-500"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-column md:align-items-end gap-5">
-                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                             </div>
                         </div>
                     </div>
@@ -145,32 +145,32 @@ export default {
     </template>
 
     <template #grid="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 xl:col-6 p-2">
-                <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
-                    <div class="surface-50 flex justify-content-center border-round p-3">
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                    <div class="bg-surface-50 flex justify-center rounded p-4">
                         <div class="relative mx-auto">
-                            <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                            <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                             <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                         </div>
                     </div>
-                    <div class="pt-4">
-                        <div class="flex flex-row justify-content-between align-items-start gap-2">
+                    <div class="pt-6">
+                        <div class="flex flex-row justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
+                                <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                             </div>
-                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                     <i class="pi pi-star-fill text-yellow-500"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-column gap-4 mt-4">
-                            <span class="text-2xl font-semibold text-900">\${{ item.price }}</span>
+                        <div class="flex flex-col gap-6 mt-6">
+                            <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
                             <div class="flex gap-2">
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                 <Button icon="pi pi-heart" outlined></Button>
                             </div>
                         </div>
@@ -186,7 +186,7 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -196,31 +196,31 @@ export default {
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -230,32 +230,32 @@ export default {
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 xl:col-6 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
-                            <div class="surface-50 flex justify-content-center border-round p-3">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
-                                    <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                                    <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
-                            <div class="pt-4">
-                                <div class="flex flex-row justify-content-between align-items-start gap-2">
+                            <div class="pt-6">
+                                <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column gap-4 mt-4">
-                                    <span class="text-2xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
                                     </div>
                                 </div>
@@ -275,8 +275,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
+            layout: 'grid grid-cols-12 gap-4',
+            options: ['list', 'grid grid-cols-12 gap-4'],
         }
     },
     mounted() {
@@ -307,7 +307,7 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -317,31 +317,31 @@ export default {
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -351,32 +351,32 @@ export default {
             </template>
 
             <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 xl:col-6 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
-                            <div class="surface-50 flex justify-content-center border-round p-3">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
-                                    <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                                    <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
-                            <div class="pt-4">
-                                <div class="flex flex-row justify-content-between align-items-start gap-2">
+                            <div class="pt-6">
+                                <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column gap-4 mt-4">
-                                    <span class="text-2xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col gap-6 mt-6">
+                                    <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex gap-2">
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
                                     </div>
                                 </div>
@@ -398,8 +398,8 @@ onMounted(() => {
 });
 
 const products = ref();
-const layout = ref('grid');
-const options = ref(['list', 'grid']);
+const layout = ref('grid grid-cols-12 gap-4');
+const options = ref(['list', 'grid grid-cols-12 gap-4']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index a134bec6d..998cee283 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -15,22 +15,22 @@
             </template>
 
             <template #list>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <Skeleton class="w-8rem border-round h-2rem" />
-                                    <Skeleton class="w-6rem border-round h-1rem" />
-                                    <div class="flex align-items-center gap-3">
-                                        <Skeleton class="w-6rem border-round h-1rem" />
-                                        <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12">
+                        <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
+                            <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton class="w-32 rounded h-8" />
+                                    <Skeleton class="w-24 rounded h-4" />
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton class="w-24 rounded h-4" />
+                                        <Skeleton class="w-12 rounded h-4" />
                                     </div>
                                 </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <Skeleton class="w-4rem border-round h-2rem" />
-                                    <Skeleton shape="circle" class="w-3rem h-3rem" />
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton class="w-16 rounded h-8" />
+                                    <Skeleton shape="circle" class="w-12 h-12" />
                                 </div>
                             </div>
                         </div>
@@ -39,21 +39,21 @@
             </template>
 
             <template #grid>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <Skeleton class="w-6rem border-round h-2rem" />
-                                <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
+                            <div class="flex flex-wrap items-center justify-between gap-2">
+                                <Skeleton class="w-24 rounded h-8" />
+                                <Skeleton class="w-12 rounded h-4" />
                             </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 border-round h-10rem" />
-                                <Skeleton class="w-8rem border-round h-2rem" />
-                                <Skeleton class="w-6rem border-round h-1rem" />
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton class="w-9/12 rounded h-40" />
+                                <Skeleton class="w-32 rounded h-8" />
+                                <Skeleton class="w-24 rounded h-4" />
                             </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <Skeleton class="w-4rem border-round h-2rem" />
-                                <Skeleton shape="circle" class="w-3rem h-3rem" />
+                            <div class="flex items-center justify-between">
+                                <Skeleton class="w-16 rounded h-8" />
+                                <Skeleton shape="circle" class="w-12 h-12" />
                             </div>
                         </div>
                     </div>
@@ -71,13 +71,13 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
+            layout: 'grid grid-cols-12 gap-4',
+            options: ['list', 'grid grid-cols-12 gap-4'],
             code: {
                 basic: `
 <DataView :value="products" :layout="layout">
     <template #header>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                 <template #option="{ option }">
                     <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -87,22 +87,22 @@ export default {
     </template>
 
     <template #list>
-        <div class="grid grid-nogutter">
-            <div v-for="i in 6" :key="i" class="col-12">
-                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                    <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
-                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <Skeleton class="w-8rem border-round h-2rem" />
-                            <Skeleton class="w-6rem border-round h-1rem" />
-                            <div class="flex align-items-center gap-3">
-                                <Skeleton class="w-6rem border-round h-1rem" />
-                                <Skeleton class="w-3rem border-round h-1rem" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="i in 6" :key="i" class="col-span-12">
+                <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
+                    <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
+                    <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                        <div class="flex flex-col items-center sm:items-start gap-4">
+                            <Skeleton class="w-32 rounded h-8" />
+                            <Skeleton class="w-24 rounded h-4" />
+                            <div class="flex items-center gap-4">
+                                <Skeleton class="w-24 rounded h-4" />
+                                <Skeleton class="w-12 rounded h-4" />
                             </div>
                         </div>
-                        <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <Skeleton class="w-4rem border-round h-2rem" />
-                            <Skeleton shape="circle" class="w-3rem h-3rem" />
+                        <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                            <Skeleton class="w-16 rounded h-8" />
+                            <Skeleton shape="circle" class="w-12 h-12" />
                         </div>
                     </div>
                 </div>
@@ -111,21 +111,21 @@ export default {
     </template>
 
     <template #grid>
-        <div class="grid grid-nogutter">
-            <div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div class="p-4 border-1 surface-border surface-card border-round">
-                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <Skeleton class="w-6rem border-round h-2rem" />
-                        <Skeleton class="w-3rem border-round h-1rem" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
+                <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <Skeleton class="w-24 rounded h-8" />
+                        <Skeleton class="w-12 rounded h-4" />
                     </div>
-                    <div class="flex flex-column align-items-center gap-3 py-5">
-                        <Skeleton class="w-9 border-round h-10rem" />
-                        <Skeleton class="w-8rem border-round h-2rem" />
-                        <Skeleton class="w-6rem border-round h-1rem" />
+                    <div class="flex flex-col items-center gap-4 py-8">
+                        <Skeleton class="w-9/12 rounded h-40" />
+                        <Skeleton class="w-32 rounded h-8" />
+                        <Skeleton class="w-24 rounded h-4" />
                     </div>
-                    <div class="flex align-items-center justify-content-between">
-                        <Skeleton class="w-4rem border-round h-2rem" />
-                        <Skeleton shape="circle" class="w-3rem h-3rem" />
+                    <div class="flex items-center justify-between">
+                        <Skeleton class="w-16 rounded h-8" />
+                        <Skeleton shape="circle" class="w-12 h-12" />
                     </div>
                 </div>
             </div>
@@ -138,7 +138,7 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -148,22 +148,22 @@ export default {
             </template>
 
             <template #list>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <Skeleton class="w-8rem border-round h-2rem" />
-                                    <Skeleton class="w-6rem border-round h-1rem" />
-                                    <div class="flex align-items-center gap-3">
-                                        <Skeleton class="w-6rem border-round h-1rem" />
-                                        <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12">
+                        <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
+                            <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton class="w-32 rounded h-8" />
+                                    <Skeleton class="w-24 rounded h-4" />
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton class="w-24 rounded h-4" />
+                                        <Skeleton class="w-12 rounded h-4" />
                                     </div>
                                 </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <Skeleton class="w-4rem border-round h-2rem" />
-                                    <Skeleton shape="circle" class="w-3rem h-3rem" />
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton class="w-16 rounded h-8" />
+                                    <Skeleton shape="circle" class="w-12 h-12" />
                                 </div>
                             </div>
                         </div>
@@ -172,21 +172,21 @@ export default {
             </template>
 
             <template #grid>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <Skeleton class="w-6rem border-round h-2rem" />
-                                <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
+                            <div class="flex flex-wrap items-center justify-between gap-2">
+                                <Skeleton class="w-24 rounded h-8" />
+                                <Skeleton class="w-12 rounded h-4" />
                             </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 border-round h-10rem" />
-                                <Skeleton class="w-8rem border-round h-2rem" />
-                                <Skeleton class="w-6rem border-round h-1rem" />
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton class="w-9/12 rounded h-40" />
+                                <Skeleton class="w-32 rounded h-8" />
+                                <Skeleton class="w-24 rounded h-4" />
                             </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <Skeleton class="w-4rem border-round h-2rem" />
-                                <Skeleton shape="circle" class="w-3rem h-3rem" />
+                            <div class="flex items-center justify-between">
+                                <Skeleton class="w-16 rounded h-8" />
+                                <Skeleton shape="circle" class="w-12 h-12" />
                             </div>
                         </div>
                     </div>
@@ -203,8 +203,8 @@ export default {
     data() {
         return {
             products: null,
-            layout: 'grid',
-            options: ['list', 'grid'],
+            layout: 'grid grid-cols-12 gap-4',
+            options: ['list', 'grid grid-cols-12 gap-4'],
         }
     },
     mounted() {
@@ -235,7 +235,7 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                         <template #option="{ option }">
                             <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
@@ -245,22 +245,22 @@ export default {
             </template>
 
             <template #list>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <Skeleton class="w-8rem border-round h-2rem" />
-                                    <Skeleton class="w-6rem border-round h-1rem" />
-                                    <div class="flex align-items-center gap-3">
-                                        <Skeleton class="w-6rem border-round h-1rem" />
-                                        <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12">
+                        <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
+                            <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
+                            <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
+                                <div class="flex flex-col items-center sm:items-start gap-4">
+                                    <Skeleton class="w-32 rounded h-8" />
+                                    <Skeleton class="w-24 rounded h-4" />
+                                    <div class="flex items-center gap-4">
+                                        <Skeleton class="w-24 rounded h-4" />
+                                        <Skeleton class="w-12 rounded h-4" />
                                     </div>
                                 </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <Skeleton class="w-4rem border-round h-2rem" />
-                                    <Skeleton shape="circle" class="w-3rem h-3rem" />
+                                <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+                                    <Skeleton class="w-16 rounded h-8" />
+                                    <Skeleton shape="circle" class="w-12 h-12" />
                                 </div>
                             </div>
                         </div>
@@ -269,21 +269,21 @@ export default {
             </template>
 
             <template #grid>
-                <div class="grid grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <Skeleton class="w-6rem border-round h-2rem" />
-                                <Skeleton class="w-3rem border-round h-1rem" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
+                        <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
+                            <div class="flex flex-wrap items-center justify-between gap-2">
+                                <Skeleton class="w-24 rounded h-8" />
+                                <Skeleton class="w-12 rounded h-4" />
                             </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 border-round h-10rem" />
-                                <Skeleton class="w-8rem border-round h-2rem" />
-                                <Skeleton class="w-6rem border-round h-1rem" />
+                            <div class="flex flex-col items-center gap-4 py-8">
+                                <Skeleton class="w-9/12 rounded h-40" />
+                                <Skeleton class="w-32 rounded h-8" />
+                                <Skeleton class="w-24 rounded h-4" />
                             </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <Skeleton class="w-4rem border-round h-2rem" />
-                                <Skeleton shape="circle" class="w-3rem h-3rem" />
+                            <div class="flex items-center justify-between">
+                                <Skeleton class="w-16 rounded h-8" />
+                                <Skeleton shape="circle" class="w-12 h-12" />
                             </div>
                         </div>
                     </div>
@@ -302,8 +302,8 @@ onMounted(() => {
 });
 
 const products = ref();
-const layout = ref('grid');
-const options = ref(['list', 'grid']);
+const layout = ref('grid grid-cols-12 gap-4');
+const options = ref(['list', 'grid grid-cols-12 gap-4']);
 
 const getSeverity = (product) => {
     switch (product.inventoryStatus) {
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index c510d5728..a609b16b5 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -5,31 +5,31 @@
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -53,31 +53,31 @@ export default {
                 basic: `
 <DataView :value="products" paginator :rows="5">
     <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <div class="md:w-10rem relative">
-                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                    <div class="md:w-40 relative">
+                        <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
-                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
-                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                     <i class="pi pi-star-fill text-yellow-500"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-column md:align-items-end gap-5">
-                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                             </div>
                         </div>
                     </div>
@@ -92,31 +92,31 @@ export default {
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -165,31 +165,31 @@ export default {
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index 2dffc64d0..75419d889 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -8,31 +8,31 @@
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -66,31 +66,31 @@ export default {
         <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
     </template>
     <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <div class="md:w-10rem relative">
-                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                    <div class="md:w-40 relative">
+                        <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
-                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
-                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                     <i class="pi pi-star-fill text-yellow-500"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex flex-column md:align-items-end gap-5">
-                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                        <div class="flex flex-col md:items-end gap-8">
+                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
-                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                             </div>
                         </div>
                     </div>
@@ -108,31 +108,31 @@ export default {
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
@@ -205,31 +205,31 @@ export default {
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                            <div class="md:w-40 relative">
+                                <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                             <i class="pi pi-star-fill text-yellow-500"></i>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex flex-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
-                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                     </div>
                                 </div>
                             </div>
diff --git a/doc/datepicker/BasicDoc.vue b/doc/datepicker/BasicDoc.vue
index 6e104059f..575d9c5ed 100644
--- a/doc/datepicker/BasicDoc.vue
+++ b/doc/datepicker/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" />
     </div>
 </template>
diff --git a/doc/datepicker/ButtonBarDoc.vue b/doc/datepicker/ButtonBarDoc.vue
index b676beb36..1f4b7e43b 100644
--- a/doc/datepicker/ButtonBarDoc.vue
+++ b/doc/datepicker/ButtonBarDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" showButtonBar />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" showButtonBar />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" showButtonBar />
     </div>
 </template>
diff --git a/doc/datepicker/DateTemplateDoc.vue b/doc/datepicker/DateTemplateDoc.vue
index cf9832361..4deeaa4c1 100644
--- a/doc/datepicker/DateTemplateDoc.vue
+++ b/doc/datepicker/DateTemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
@@ -29,7 +29,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
@@ -51,7 +51,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
diff --git a/doc/datepicker/DisabledDoc.vue b/doc/datepicker/DisabledDoc.vue
index f9b32657c..f129cd1f3 100644
--- a/doc/datepicker/DisabledDoc.vue
+++ b/doc/datepicker/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" disabled />
     </div>
 </template>
diff --git a/doc/datepicker/FilledDoc.vue b/doc/datepicker/FilledDoc.vue
index 8ae08c91f..10a709a50 100644
--- a/doc/datepicker/FilledDoc.vue
+++ b/doc/datepicker/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" variant="filled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" variant="filled" />
     </div>
 </template>
diff --git a/doc/datepicker/FloatLabelDoc.vue b/doc/datepicker/FloatLabelDoc.vue
index 270cf1e77..c8e4809b7 100644
--- a/doc/datepicker/FloatLabelDoc.vue
+++ b/doc/datepicker/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
@@ -45,7 +45,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
diff --git a/doc/datepicker/FormatDoc.vue b/doc/datepicker/FormatDoc.vue
index b0686d6f9..612091612 100644
--- a/doc/datepicker/FormatDoc.vue
+++ b/doc/datepicker/FormatDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Default date format is <i>mm/dd/yy</i> which can be customized using the <i>dateFormat</i> property. Following options can be a part of the format.</p>
-        <ul class="mb-4 line-height-4">
+        <ul class="mb-6 leading-loose">
             <li><i>d</i> - day of month (no leading zero)</li>
             <li><i>dd</i> - day of month (two digit)</li>
             <li><i>o</i> - day of the year (no leading zeros)</li>
@@ -21,7 +21,7 @@
             <li><i>anything else</i> - literal text</li>
         </ul>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
     <DocSectionCode :code="code" />
@@ -38,7 +38,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
 </template>
@@ -55,7 +55,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
 </template>
diff --git a/doc/datepicker/IconDoc.vue b/doc/datepicker/IconDoc.vue
index 9d834700a..66f861c80 100644
--- a/doc/datepicker/IconDoc.vue
+++ b/doc/datepicker/IconDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
             <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
@@ -42,7 +42,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
             <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
@@ -76,7 +76,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
             <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
diff --git a/doc/datepicker/InlineDoc.vue b/doc/datepicker/InlineDoc.vue
index a349fe429..811530bc1 100644
--- a/doc/datepicker/InlineDoc.vue
+++ b/doc/datepicker/InlineDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" inline showWeek />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" inline showWeek />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" inline showWeek />
     </div>
 </template>
diff --git a/doc/datepicker/InvalidDoc.vue b/doc/datepicker/InvalidDoc.vue
index d6e231e8b..4021807a1 100644
--- a/doc/datepicker/InvalidDoc.vue
+++ b/doc/datepicker/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" invalid />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" invalid />
     </div>
 </template>
diff --git a/doc/datepicker/MinMaxDoc.vue b/doc/datepicker/MinMaxDoc.vue
index c0779e2e1..4f020dd98 100644
--- a/doc/datepicker/MinMaxDoc.vue
+++ b/doc/datepicker/MinMaxDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
 </template>
@@ -56,7 +56,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
 </template>
diff --git a/doc/datepicker/MonthPickerDoc.vue b/doc/datepicker/MonthPickerDoc.vue
index 23f3ea541..1b54e987e 100644
--- a/doc/datepicker/MonthPickerDoc.vue
+++ b/doc/datepicker/MonthPickerDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
 </template>
diff --git a/doc/datepicker/MultipleDoc.vue b/doc/datepicker/MultipleDoc.vue
index b85819ffc..d301922ba 100644
--- a/doc/datepicker/MultipleDoc.vue
+++ b/doc/datepicker/MultipleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
 </template>
diff --git a/doc/datepicker/MultipleMonthsDoc.vue b/doc/datepicker/MultipleMonthsDoc.vue
index 310d9dcfa..8bd503e19 100644
--- a/doc/datepicker/MultipleMonthsDoc.vue
+++ b/doc/datepicker/MultipleMonthsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
 </template>
diff --git a/doc/datepicker/RangeDoc.vue b/doc/datepicker/RangeDoc.vue
index 786a0ed6f..e6521b126 100644
--- a/doc/datepicker/RangeDoc.vue
+++ b/doc/datepicker/RangeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
 </template>
diff --git a/doc/datepicker/TimeDoc.vue b/doc/datepicker/TimeDoc.vue
index 1e48fd59c..911f6c121 100644
--- a/doc/datepicker/TimeDoc.vue
+++ b/doc/datepicker/TimeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
             <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
@@ -34,7 +34,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
             <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
@@ -64,7 +64,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
             <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
diff --git a/doc/datepicker/YearPickerDoc.vue b/doc/datepicker/YearPickerDoc.vue
index 7f7731546..8d14e5427 100644
--- a/doc/datepicker/YearPickerDoc.vue
+++ b/doc/datepicker/YearPickerDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
 </template>
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index 779dc4f28..02ecc10c7 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -34,16 +34,16 @@ export default {
 <Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="text-color-secondary block mb-5">Update your information.</span>
-    <div class="flex align-items-center gap-3 mb-3">
-        <label for="username" class="font-semibold w-6rem">Username</label>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex align-items-center gap-3 mb-5">
-        <label for="email" class="font-semibold w-6rem">Email</label>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
         <InputText id="email" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
         <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
         <Button type="button" label="Save" @click="visible = false"></Button>
     </div>
@@ -51,19 +51,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -83,19 +83,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
diff --git a/doc/dialog/HeadlessDoc.vue b/doc/dialog/HeadlessDoc.vue
index b450033f2..a72e78faa 100644
--- a/doc/dialog/HeadlessDoc.vue
+++ b/doc/dialog/HeadlessDoc.vue
@@ -2,21 +2,21 @@
     <DocSectionText v-bind="$attrs">
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
         <Dialog
             v-model:visible="visible"
             modal
             :pt="{
-                root: 'border-none',
+                root: 'border-0',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -27,17 +27,17 @@
                             fill="var(--p-primary-200)"
                         />
                     </svg>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem"></InputText>
+                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
                     </div>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem" type="password"></InputText>
+                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
                     </div>
-                    <div class="flex align-items-center gap-3">
-                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
                     </div>
                 </div>
             </template>
@@ -59,14 +59,14 @@ export default {
     v-model:visible="visible"
     modal
     :pt="{
-        root: 'border-none',
+        root: 'border-0',
         mask: {
             style: 'backdrop-filter: blur(2px)'
         }
     }"
 >
     <template #container="{ closeCallback }">
-        <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+        <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -77,17 +77,17 @@ export default {
                     fill="var(--p-primary-200)"
                 />
             </svg>
-            <div class="inline-flex flex-column gap-2">
+            <div class="inline-flex flex-col gap-2">
                 <label for="username" class="text-primary-50 font-semibold">Username</label>
-                <InputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem"></InputText>
+                <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
             </div>
-            <div class="inline-flex flex-column gap-2">
+            <div class="inline-flex flex-col gap-2">
                 <label for="password" class="text-primary-50 font-semibold">Password</label>
-                <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem" type="password"></InputText>
+                <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
             </div>
-            <div class="flex align-items-center gap-3">
-                <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+            <div class="flex items-center gap-4">
+                <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
             </div>
         </div>
     </template>
@@ -95,21 +95,21 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
         <Dialog
             v-model:visible="visible"
             modal
             :pt="{
-                root: 'border-none',
+                root: 'border-0',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -120,17 +120,17 @@ export default {
                             fill="var(--p-primary-200)"
                         />
                     </svg>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem"></InputText>
+                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
                     </div>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem" type="password"></InputText>
+                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
                     </div>
-                    <div class="flex align-items-center gap-3">
-                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
                     </div>
                 </div>
             </template>
@@ -150,21 +150,21 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
         <Dialog
             v-model:visible="visible"
             modal
             :pt="{
-                root: 'border-none',
+                root: 'border-0',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
+                <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -175,17 +175,17 @@ export default {
                             fill="var(--p-primary-200)"
                         />
                     </svg>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem"></InputText>
+                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
                     </div>
-                    <div class="inline-flex flex-column gap-2">
+                    <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50 w-20rem" type="password"></InputText>
+                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
                     </div>
-                    <div class="flex align-items-center gap-3">
-                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                    <div class="flex items-center gap-4">
+                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
                     </div>
                 </div>
             </template>
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 5281cba6d..34f4ec170 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -3,31 +3,31 @@
         <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
     </DocSectionText>
 
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
                 voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                 sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                 consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
                 facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
                 earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
                 voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                 sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
@@ -54,27 +54,27 @@ export default {
 <Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-    <p class="mb-5">
+    <p class="mb-8">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-    <p class="mb-5">
+    <p class="mb-8">
         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
         ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
         adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
         ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
     </p>
-    <p class="mb-5">
+    <p class="mb-8">
         At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
         qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
         maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
         non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
     </p>
-    <p class="mb-5">
+    <p class="mb-8">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-    <p class="mb-5">
+    <p class="mb-8">
         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
         ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
         adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
@@ -90,30 +90,30 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                 adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
                 ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                 qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
                 maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
                 non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                 adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
@@ -141,30 +141,30 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                 adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
                 ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                 qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
                 maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
                 non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p class="mb-5">
+            <p class="mb-8">
                 "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                 adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
diff --git a/doc/dialog/MaximizableDoc.vue b/doc/dialog/MaximizableDoc.vue
index 16c66eccd..d92f7724f 100644
--- a/doc/dialog/MaximizableDoc.vue
+++ b/doc/dialog/MaximizableDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Adding <i>maximizable</i> property enables the full screen mode.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
@@ -33,7 +33,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
@@ -56,7 +56,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index a8e660af9..80e85e634 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -3,32 +3,32 @@
         <p>The <i>position</i> property defines the location of relative to the screen.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
             <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
             <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
             <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -45,32 +45,32 @@ export default {
             visible: false,
             code: {
                 basic: `
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<div class="flex flex-wrap justify-center gap-2 mb-2">
     <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
     <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
 </div>
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<div class="flex flex-wrap justify-center gap-2 mb-2">
     <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
     <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
     <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
 </div>
-<div class="flex flex-wrap justify-content-center gap-2">
+<div class="flex flex-wrap justify-center gap-2">
     <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
     <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
     <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
 </div>
 
 <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-    <span class="text-color-secondary block mb-5">Update your information.</span>
-    <div class="flex align-items-center gap-3 mb-3">
-        <label for="username" class="font-semibold w-6rem">Username</label>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex align-items-center gap-3 mb-5">
-        <label for="email" class="font-semibold w-6rem">Email</label>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
         <InputText id="email" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
         <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
         <Button type="button" label="Save" @click="visible = false"></Button>
     </div>
@@ -79,32 +79,32 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
             <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
             <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
             <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -132,32 +132,32 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
             <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-center gap-2 mb-2">
             <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
             <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2">
+        <div class="flex flex-wrap justify-center gap-2">
             <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
             <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
             <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
diff --git a/doc/dialog/ResponsiveDoc.vue b/doc/dialog/ResponsiveDoc.vue
index 9cd4a502f..b9b0918a3 100644
--- a/doc/dialog/ResponsiveDoc.vue
+++ b/doc/dialog/ResponsiveDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
@@ -37,7 +37,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
@@ -60,7 +60,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index 0f175d50e..4f991697e 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -2,23 +2,23 @@
     <DocSectionText v-bind="$attrs">
         <p>Header and Footer sections allow customization via templating.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
-                <div class="inline-flex align-items-center justify-content-center gap-2">
+                <div class="inline-flex items-center justify-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-2">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
@@ -41,18 +41,18 @@ export default {
 
 <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
     <template #header>
-        <div class="inline-flex align-items-center justify-content-center gap-2">
+        <div class="inline-flex items-center justify-center gap-2">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold white-space-nowrap">Amy Elsner</span>
+            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
         </div>
     </template>
-    <span class="text-color-secondary block mb-5">Update your information.</span>
-    <div class="flex align-items-center gap-3 mb-3">
-        <label for="username" class="font-semibold w-6rem">Username</label>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex align-items-center gap-3 mb-2">
-        <label for="email" class="font-semibold w-6rem">Email</label>
+    <div class="flex items-center gap-4 mb-2">
+        <label for="email" class="font-semibold w-24">Email</label>
         <InputText id="email" class="flex-auto" autocomplete="off" />
     </div>
     <template #footer>
@@ -63,22 +63,22 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
-                <div class="inline-flex align-items-center justify-content-center gap-2">
+                <div class="inline-flex items-center justify-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-2">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
@@ -101,22 +101,22 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
-                <div class="inline-flex align-items-center justify-content-center gap-2">
+                <div class="inline-flex items-center justify-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-2">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-2">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index b6b3307c6..223a82c20 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -34,16 +34,16 @@ export default {
 <Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="text-color-secondary block mb-5">Update your information.</span>
-    <div class="flex align-items-center gap-3 mb-3">
-        <label for="username" class="font-semibold w-6rem">Username</label>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex align-items-center gap-3 mb-5">
-        <label for="email" class="font-semibold w-6rem">Email</label>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
         <InputText id="email" class="flex-auto" autocomplete="off" />
     </div>
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
         <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
         <Button type="button" label="Save" @click="visible = false"></Button>
     </div>
@@ -51,19 +51,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
@@ -83,19 +83,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="text-color-secondary block mb-5">Update your information.</span>
-            <div class="flex align-items-center gap-3 mb-3">
-                <label for="username" class="font-semibold w-6rem">Username</label>
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex align-items-center gap-3 mb-5">
-                <label for="email" class="font-semibold w-6rem">Email</label>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
                 <InputText id="email" class="flex-auto" autocomplete="off" />
             </div>
-            <div class="flex justify-content-end gap-2">
+            <div class="flex justify-end gap-2">
                 <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
                 <Button type="button" label="Save" @click="visible = false"></Button>
             </div>
diff --git a/doc/divider/LoginDoc.vue b/doc/divider/LoginDoc.vue
index 52ea3d883..d2b7d203c 100644
--- a/doc/divider/LoginDoc.vue
+++ b/doc/divider/LoginDoc.vue
@@ -3,24 +3,24 @@
         <p>Sample implementation of a login form using a divider with content.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-column md:flex-row">
-            <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Username</label>
-                    <InputText id="username" type="text" class="w-12rem" />
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-4 py-8">
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Username</label>
+                    <InputText id="username" type="text" class="w-48" />
                 </div>
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Password</label>
-                    <InputText id="password" type="password" class="w-12rem" />
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Password</label>
+                    <InputText id="password" type="password" class="w-48" />
                 </div>
-                <Button label="Login" icon="pi pi-user" class="w-10rem mx-auto"></Button>
+                <Button label="Login" icon="pi pi-user" class="w-40 mx-auto"></Button>
             </div>
-            <div class="w-full md:w-2">
+            <div class="w-full md:w-2/12">
                 <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
-            <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-8">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-40"></Button>
             </div>
         </div>
     </div>
@@ -33,48 +33,48 @@ export default {
         return {
             code: {
                 basic: `
-<div class="flex flex-column md:flex-row">
-    <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
-        <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-            <label class="w-6rem">Username</label>
-            <InputText id="username" type="text" class="w-12rem" />
+<div class="flex flex-col md:flex-row">
+    <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-4 py-8">
+        <div class="flex flex-wrap justify-center items-center gap-2">
+            <label class="w-24">Username</label>
+            <InputText id="username" type="text" class="w-48" />
         </div>
-        <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-            <label class="w-6rem">Password</label>
-            <InputText id="password" type="password" class="w-12rem" />
+        <div class="flex flex-wrap justify-center items-center gap-2">
+            <label class="w-24">Password</label>
+            <InputText id="password" type="password" class="w-48" />
         </div>
-        <Button label="Login" icon="pi pi-user" class="w-10rem mx-auto"></Button>
+        <Button label="Login" icon="pi pi-user" class="w-40 mx-auto"></Button>
     </div>
-    <div class="w-full md:w-2">
+    <div class="w-full md:w-2/12">
         <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
         <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
     </div>
-    <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
+    <div class="w-full md:w-5/12 flex items-center justify-center py-8">
+        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-40"></Button>
     </div>
 </div>
 `,
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-column md:flex-row">
-            <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Username</label>
-                    <InputText id="username" type="text" class="w-12rem" />
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-4 py-8">
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Username</label>
+                    <InputText id="username" type="text" class="w-48" />
                 </div>
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Password</label>
-                    <InputText id="password" type="password" class="w-12rem" />
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Password</label>
+                    <InputText id="password" type="password" class="w-48" />
                 </div>
-                <Button label="Login" icon="pi pi-user" class="w-10rem mx-auto"></Button>
+                <Button label="Login" icon="pi pi-user" class="w-40 mx-auto"></Button>
             </div>
-            <div class="w-full md:w-2">
+            <div class="w-full md:w-2/12">
                 <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
-            <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-8">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-40"></Button>
             </div>
         </div>
     </div>
@@ -86,24 +86,24 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-column md:flex-row">
-            <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Username</label>
-                    <InputText id="username" type="text" class="w-12rem" />
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-4 py-8">
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Username</label>
+                    <InputText id="username" type="text" class="w-48" />
                 </div>
-                <div class="flex flex-wrap justify-content-center align-items-center gap-2">
-                    <label class="w-6rem">Password</label>
-                    <InputText id="password" type="password" class="w-12rem" />
+                <div class="flex flex-wrap justify-center items-center gap-2">
+                    <label class="w-24">Password</label>
+                    <InputText id="password" type="password" class="w-48" />
                 </div>
-                <Button label="Login" icon="pi pi-user" class="w-10rem mx-auto"></Button>
+                <Button label="Login" icon="pi pi-user" class="w-40 mx-auto"></Button>
             </div>
-            <div class="w-full md:w-2">
+            <div class="w-full md:w-2/12">
                 <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
-            <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
+            <div class="w-full md:w-5/12 flex items-center justify-center py-8">
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-40"></Button>
             </div>
         </div>
     </div>
diff --git a/doc/dock/BasicDoc.vue b/doc/dock/BasicDoc.vue
index e426fe0f4..8bf20b6e7 100644
--- a/doc/dock/BasicDoc.vue
+++ b/doc/dock/BasicDoc.vue
@@ -3,8 +3,8 @@
         <p>Menu requires a collection of menuitems as its <i>model</i> and an <i>icon</i> template. Default location is <i>bottom</i> and other edges are also available when defined with the <i>position</i> property.</p>
     </DocSectionText>
     <div class="card dock-demo">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
                 <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
                 <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
             </div>
@@ -72,8 +72,8 @@ export default {
                 options: `
 <template>
     <div class="card dock-demo">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
                 <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
                 <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
             </div>
@@ -153,8 +153,8 @@ export default {
                 composition: `
 <template>
     <div class="card dock-demo">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
                 <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
                 <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
             </div>
diff --git a/doc/drawer/BasicDoc.vue b/doc/drawer/BasicDoc.vue
index 1abae8de8..837b50e71 100644
--- a/doc/drawer/BasicDoc.vue
+++ b/doc/drawer/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Drawer is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
@@ -18,7 +18,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<div class="card flex justify-content-center">
+<div class="card flex justify-center">
     <Drawer v-model:visible="visible" header="Drawer">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Drawer>
@@ -27,7 +27,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
diff --git a/doc/drawer/FullScreenDoc.vue b/doc/drawer/FullScreenDoc.vue
index d1a2cd61e..6f8fa316e 100644
--- a/doc/drawer/FullScreenDoc.vue
+++ b/doc/drawer/FullScreenDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
@@ -18,7 +18,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<div class="card flex justify-content-center">
+<div class="card flex justify-center">
     <Drawer v-model:visible="visible" header="Drawer" position="full">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Drawer>
@@ -27,7 +27,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible" header="Drawer" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
diff --git a/doc/drawer/HeadlessDoc.vue b/doc/drawer/HeadlessDoc.vue
index 7b1ec7bc7..d11f5afbc 100644
--- a/doc/drawer/HeadlessDoc.vue
+++ b/doc/drawer/HeadlessDoc.vue
@@ -2,12 +2,12 @@
     <DocSectionText v-bind="$attrs">
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
-                <div class="flex flex-column h-full">
-                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
-                        <span class="inline-flex align-items-center gap-2">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                        <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -21,35 +21,35 @@
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -60,42 +60,42 @@
                                             v-styleclass="{
                                                 selector: '@next',
                                                 enterClass: 'hidden',
-                                                enterActiveClass: 'slidedown',
+                                                enterActiveClass: 'animate-slidedown',
                                                 leaveToClass: 'hidden',
-                                                leaveActiveClass: 'slideup'
+                                                leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
                                             <i class="pi pi-chevron-down ml-auto"></i>
                                         </a>
-                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                             <li>
                                                 <a
                                                     v-ripple
                                                     v-styleclass="{
                                                         selector: '@next',
                                                         enterClass: 'hidden',
-                                                        enterActiveClass: 'slidedown',
+                                                        enterActiveClass: 'animate-slidedown',
                                                         leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'slideup'
+                                                        leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
                                                     <i class="pi pi-chevron-down ml-auto"></i>
                                                 </a>
-                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -103,7 +103,7 @@
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -111,26 +111,26 @@
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
-                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -138,37 +138,37 @@
                                 </ul>
                             </li>
                         </ul>
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -178,8 +178,8 @@
                         </ul>
                     </div>
                     <div class="mt-auto">
-                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
-                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
@@ -201,9 +201,9 @@ export default {
                 basic: `
 <Drawer v-model:visible="visible">
     <template #container="{ closeCallback }">
-        <div class="flex flex-column h-full">
-            <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
-                <span class="inline-flex align-items-center gap-2">
+        <div class="flex flex-col h-full">
+            <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                <span class="inline-flex items-center gap-2">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="..." fill="var(--p-primary-color)" />
                         <path d="..." fill="var(--text-color)" />
@@ -211,35 +211,35 @@ export default {
                     <span class="font-semibold text-2xl text-primary">Your Logo</span>
                 </span>
                 <span>
-                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
                 </span>
             </div>
             <div class="overflow-y-auto">
-                <ul class="list-none p-3 m-0">
+                <ul class="list-none p-4 m-0">
                     <li>
                         <div
                             v-ripple
                             v-styleclass="{
                                 selector: '@next',
                                 enterClass: 'hidden',
-                                enterActiveClass: 'slidedown',
+                                enterActiveClass: 'animate-slidedown',
                                 leaveToClass: 'hidden',
-                                leaveActiveClass: 'slideup'
+                                leaveActiveClass: 'animate-slideup'
                             }"
-                            class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                            class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                         >
                             <span class="font-medium">FAVORITES</span>
                             <i class="pi pi-chevron-down"></i>
                         </div>
                         <ul class="list-none p-0 m-0 overflow-hidden">
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-home mr-2"></i>
                                     <span class="font-medium">Dashboard</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-bookmark mr-2"></i>
                                     <span class="font-medium">Bookmarks</span>
                                 </a>
@@ -250,42 +250,42 @@ export default {
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                 >
                                     <i class="pi pi-chart-line mr-2"></i>
                                     <span class="font-medium">Reports</span>
                                     <i class="pi pi-chevron-down ml-auto"></i>
                                 </a>
-                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                     <li>
                                         <a
                                             v-ripple
                                             v-styleclass="{
                                                 selector: '@next',
                                                 enterClass: 'hidden',
-                                                enterActiveClass: 'slidedown',
+                                                enterActiveClass: 'animate-slidedown',
                                                 leaveToClass: 'hidden',
-                                                leaveActiveClass: 'slideup'
+                                                leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Revenue</span>
                                             <i class="pi pi-chevron-down ml-auto"></i>
                                         </a>
-                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                             <li>
-                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-table mr-2"></i>
                                                     <span class="font-medium">View</span>
                                                 </a>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-search mr-2"></i>
                                                     <span class="font-medium">Search</span>
                                                 </a>
@@ -293,7 +293,7 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Expenses</span>
                                         </a>
@@ -301,26 +301,26 @@ export default {
                                 </ul>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-users mr-2"></i>
                                     <span class="font-medium">Team</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-comments mr-2"></i>
                                     <span class="font-medium">Messages</span>
-                                    <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                    <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-calendar mr-2"></i>
                                     <span class="font-medium">Calendar</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-cog mr-2"></i>
                                     <span class="font-medium">Settings</span>
                                 </a>
@@ -328,37 +328,37 @@ export default {
                         </ul>
                     </li>
                 </ul>
-                <ul class="list-none p-3 m-0">
+                <ul class="list-none p-4 m-0">
                     <li>
                         <div
                             v-ripple
                             v-styleclass="{
                                 selector: '@next',
                                 enterClass: 'hidden',
-                                enterActiveClass: 'slidedown',
+                                enterActiveClass: 'animate-slidedown',
                                 leaveToClass: 'hidden',
-                                leaveActiveClass: 'slideup'
+                                leaveActiveClass: 'animate-slideup'
                             }"
-                            class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                            class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                         >
                             <span class="font-medium">APPLICATION</span>
                             <i class="pi pi-chevron-down"></i>
                         </div>
                         <ul class="list-none p-0 m-0 overflow-hidden">
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-folder mr-2"></i>
                                     <span class="font-medium">Projects</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-chart-bar mr-2"></i>
                                     <span class="font-medium">Performance</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-cog mr-2"></i>
                                     <span class="font-medium">Settings</span>
                                 </a>
@@ -368,8 +368,8 @@ export default {
                 </ul>
             </div>
             <div class="mt-auto">
-                <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
-                <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                     <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </a>
@@ -381,12 +381,12 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
-                <div class="flex flex-column h-full">
-                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
-                        <span class="inline-flex align-items-center gap-2">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                        <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -400,35 +400,35 @@ export default {
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -439,42 +439,42 @@ export default {
                                             v-styleclass="{
                                                 selector: '@next',
                                                 enterClass: 'hidden',
-                                                enterActiveClass: 'slidedown',
+                                                enterActiveClass: 'animate-slidedown',
                                                 leaveToClass: 'hidden',
-                                                leaveActiveClass: 'slideup'
+                                                leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
                                             <i class="pi pi-chevron-down ml-auto"></i>
                                         </a>
-                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                             <li>
                                                 <a
                                                     v-ripple
                                                     v-styleclass="{
                                                         selector: '@next',
                                                         enterClass: 'hidden',
-                                                        enterActiveClass: 'slidedown',
+                                                        enterActiveClass: 'animate-slidedown',
                                                         leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'slideup'
+                                                        leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
                                                     <i class="pi pi-chevron-down ml-auto"></i>
                                                 </a>
-                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -482,7 +482,7 @@ export default {
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -490,26 +490,26 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
-                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -517,37 +517,37 @@ export default {
                                 </ul>
                             </li>
                         </ul>
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -557,8 +557,8 @@ export default {
                         </ul>
                     </div>
                     <div class="mt-auto">
-                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
-                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
@@ -582,12 +582,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
-                <div class="flex flex-column h-full">
-                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
-                        <span class="inline-flex align-items-center gap-2">
+                <div class="flex flex-col h-full">
+                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                        <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -601,35 +601,35 @@ export default {
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -640,42 +640,42 @@ export default {
                                             v-styleclass="{
                                                 selector: '@next',
                                                 enterClass: 'hidden',
-                                                enterActiveClass: 'slidedown',
+                                                enterActiveClass: 'animate-slidedown',
                                                 leaveToClass: 'hidden',
-                                                leaveActiveClass: 'slideup'
+                                                leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
                                             <i class="pi pi-chevron-down ml-auto"></i>
                                         </a>
-                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                             <li>
                                                 <a
                                                     v-ripple
                                                     v-styleclass="{
                                                         selector: '@next',
                                                         enterClass: 'hidden',
-                                                        enterActiveClass: 'slidedown',
+                                                        enterActiveClass: 'animate-slidedown',
                                                         leaveToClass: 'hidden',
-                                                        leaveActiveClass: 'slideup'
+                                                        leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
                                                     <i class="pi pi-chevron-down ml-auto"></i>
                                                 </a>
-                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -683,7 +683,7 @@ export default {
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -691,26 +691,26 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
-                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -718,37 +718,37 @@ export default {
                                 </ul>
                             </li>
                         </ul>
-                        <ul class="list-none p-3 m-0">
+                        <ul class="list-none p-4 m-0">
                             <li>
                                 <div
                                     v-ripple
                                     v-styleclass="{
                                         selector: '@next',
                                         enterClass: 'hidden',
-                                        enterActiveClass: 'slidedown',
+                                        enterActiveClass: 'animate-slidedown',
                                         leaveToClass: 'hidden',
-                                        leaveActiveClass: 'slideup'
+                                        leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -758,8 +758,8 @@ export default {
                         </ul>
                     </div>
                     <div class="mt-auto">
-                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
-                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                        <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
diff --git a/doc/drawer/PositionDoc.vue b/doc/drawer/PositionDoc.vue
index ea3c1287c..2c5897661 100644
--- a/doc/drawer/PositionDoc.vue
+++ b/doc/drawer/PositionDoc.vue
@@ -3,7 +3,7 @@
         <p>Drawer location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex gap-2 justify-content-center">
+        <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
             <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
             <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
@@ -39,7 +39,7 @@ export default {
             visibleBottom: false,
             code: {
                 basic: `
-<div class="flex gap-2 justify-content-center">
+<div class="flex gap-2 justify-center">
     <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
     <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
     <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
@@ -65,7 +65,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex gap-2 justify-content-center">
+        <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
             <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
             <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
@@ -106,7 +106,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex gap-2 justify-content-center">
+        <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
             <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
             <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
diff --git a/doc/drawer/SizeDoc.vue b/doc/drawer/SizeDoc.vue
index 2ec2a682f..c6ab89bba 100644
--- a/doc/drawer/SizeDoc.vue
+++ b/doc/drawer/SizeDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -18,8 +18,8 @@ export default {
             visible: false,
             code: {
                 basic: `
-<div class="card flex justify-content-center">
-    <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
+<div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Drawer>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -27,8 +27,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -47,8 +47,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
+    <div class="card flex justify-center">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
diff --git a/doc/drawer/TemplateDoc.vue b/doc/drawer/TemplateDoc.vue
index 2836610d3..82487bb9d 100644
--- a/doc/drawer/TemplateDoc.vue
+++ b/doc/drawer/TemplateDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Additional content at the header section is provided using the <i>header</i> template.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -26,7 +26,7 @@ export default {
                 basic: `
 <Drawer v-model:visible="visible">
     <template #header>
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold">Amy Elsner</span>
         </div>
@@ -37,10 +37,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -63,10 +63,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
diff --git a/doc/dynamicdialog/ExampleDoc.vue b/doc/dynamicdialog/ExampleDoc.vue
index a2cc1f785..306b8cc5a 100644
--- a/doc/dynamicdialog/ExampleDoc.vue
+++ b/doc/dynamicdialog/ExampleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A sample implementation to demonstrate loading components asynchronously, nested content and passing data.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
         <DynamicDialog />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
         <DynamicDialog />
@@ -75,7 +75,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
         <DynamicDialog />
@@ -144,7 +144,7 @@ const showProducts = () => {
                         content: `
 <template>
 	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
+        <div class="flex justify-end mt-1 mb-4">
             <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
@@ -152,7 +152,7 @@ const showProducts = () => {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -207,7 +207,7 @@ export default {
 <template>
     <div>
         <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <Button type="button" label="Close" @click="closeDialog"></Button>
         </div>
     </div>
@@ -257,7 +257,7 @@ export default {
                         content: `
 <template>
 	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
+        <div class="flex justify-end mt-1 mb-4">
             <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
@@ -265,7 +265,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -320,7 +320,7 @@ const showInfo = () => {
 <template>
     <div>
         <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <Button type="button" label="Close" @click="closeDialog"></Button>
         </div>
     </div>
diff --git a/doc/dynamicdialog/demo/InfoDemo.vue b/doc/dynamicdialog/demo/InfoDemo.vue
index 3758bfdec..53a6b2968 100644
--- a/doc/dynamicdialog/demo/InfoDemo.vue
+++ b/doc/dynamicdialog/demo/InfoDemo.vue
@@ -3,7 +3,7 @@
         <p>
             There are <strong>{{ totalProducts }}</strong> products in total in this list.
         </p>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <Button autofocus type="button" label="Close" @click="closeDialog"></Button>
         </div>
     </div>
diff --git a/doc/dynamicdialog/demo/ProductListDemo.vue b/doc/dynamicdialog/demo/ProductListDemo.vue
index 1e4abf46a..ac4dfc575 100644
--- a/doc/dynamicdialog/demo/ProductListDemo.vue
+++ b/doc/dynamicdialog/demo/ProductListDemo.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="flex justify-content-end mt-1 mb-3">
+        <div class="flex justify-end mt-1 mb-4">
             <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
@@ -8,7 +8,7 @@
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-16" />
                 </template>
             </Column>
             <Column field="category" header="Category"></Column>
diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index 566ab203b..3edffa469 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center pl-2">
+                <div class="flex items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold p-2">Amy Elsner</span>
                 </div>
@@ -27,7 +27,7 @@ export default {
                 basic: `
 <Fieldset>
     <template #legend>
-        <div class="flex align-items-center pl-2">
+        <div class="flex items-center pl-2">
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold p-2">Amy Elsner</span>
         </div>
@@ -43,7 +43,7 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center pl-2">
+                <div class="flex items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold p-2">Amy Elsner</span>
                 </div>
@@ -64,7 +64,7 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center pl-2">
+                <div class="flex items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold p-2">Amy Elsner</span>
                 </div>
diff --git a/doc/fileupload/AutoDoc.vue b/doc/fileupload/AutoDoc.vue
index e5c0ea383..a54ae28d5 100644
--- a/doc/fileupload/AutoDoc.vue
+++ b/doc/fileupload/AutoDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>auto</i> property is enabled, a file gets uploaded instantly after selection.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
     </div>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
     </div>
diff --git a/doc/fileupload/BasicDoc.vue b/doc/fileupload/BasicDoc.vue
index 928d597aa..62d458313 100644
--- a/doc/fileupload/BasicDoc.vue
+++ b/doc/fileupload/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
     </DocSectionText>
-    <div class="card flex flex-column gap-4 align-items-center justify-content-center">
+    <div class="card flex flex-col gap-6 items-center justify-center">
         <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
         <Button label="Upload" @click="upload" severity="secondary" />
     </div>
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column gap-4 align-items-center justify-content-center">
+    <div class="card flex flex-col gap-6 items-center justify-center">
         <Toast />
         <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
         <Button label="Upload" @click="upload" severity="secondary" />
@@ -42,7 +42,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column gap-4 align-items-center justify-content-center">
+    <div class="card flex flex-col gap-6 items-center justify-center">
         <Toast />
         <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
         <Button label="Upload" @click="upload" severity="secondary" />
diff --git a/doc/fileupload/CustomUploadDoc.vue b/doc/fileupload/CustomUploadDoc.vue
index 2a32ade46..6c79423ca 100644
--- a/doc/fileupload/CustomUploadDoc.vue
+++ b/doc/fileupload/CustomUploadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Uploading implementation can be overridden by enabling <i>customUpload</i> property and defining a custom <i>uploader</i> handler event.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
 </template>
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index bca2f17d0..fdb690a2a 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -5,22 +5,22 @@
     <div class="card">
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
                     <div class="flex gap-2">
                         <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]">
-                        <span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
                     </ProgressBar>
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
                 <div v-if="files.length > 0">
                     <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
@@ -34,23 +34,23 @@
 
                 <div v-if="uploadedFiles.length > 0">
                     <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-3" severity="success" />
+                            <Badge value="Completed" class="mt-4" severity="success" />
                             <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
-                <div class="flex align-items-center justify-content-center flex-column">
-                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
-                    <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>
         </FileUpload>
@@ -69,22 +69,22 @@ export default {
                 basic: `
 <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-        <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+        <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
             <div class="flex gap-2">
                 <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
                 <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                 <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
             </div>
-            <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
+            <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
+                ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
             >
         </div>
     </template>
     <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
         <div v-if="files.length > 0">
             <h5>Pending</h5>
-            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+            <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                     <div>
                         <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                     </div>
@@ -98,23 +98,23 @@ export default {
 
         <div v-if="uploadedFiles.length > 0">
             <h5>Completed</h5>
-            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+            <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                     <div>
                         <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                     </div>
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
-                    <Badge value="Completed" class="mt-3" severity="success" />
+                    <Badge value="Completed" class="mt-4" severity="success" />
                     <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                 </div>
             </div>
         </div>
     </template>
     <template #empty>
-        <div class="flex align-items-center justify-content-center flex-column">
-            <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
-            <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+        <div class="flex items-center justify-center flex-col">
+            <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+            <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
         </div>
     </template>
 </FileUpload>
@@ -125,22 +125,22 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
                     <div class="flex gap-2">
                         <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                        ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
+                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
+                        ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
                     >
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
                 <div v-if="files.length > 0">
                     <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
@@ -154,23 +154,23 @@ export default {
 
                 <div v-if="uploadedFiles.length > 0">
                     <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-3" severity="success" />
+                            <Badge value="Completed" class="mt-4" severity="success" />
                             <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
-                <div class="flex align-items-center justify-content-center flex-column">
-                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
-                    <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>
         </FileUpload>
@@ -234,22 +234,22 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
                     <div class="flex gap-2">
                         <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                        ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
+                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
+                        ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
                     >
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
                 <div v-if="files.length > 0">
                     <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
@@ -263,23 +263,23 @@ export default {
 
                 <div v-if="uploadedFiles.length > 0">
                     <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
+                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
                             <div>
                                 <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-3" severity="success" />
+                            <Badge value="Completed" class="mt-4" severity="success" />
                             <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
-                <div class="flex align-items-center justify-content-center flex-column">
-                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
-                    <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>
         </FileUpload>
diff --git a/doc/floatlabel/BasicDoc.vue b/doc/floatlabel/BasicDoc.vue
index aeaf46ebc..09edcc57b 100644
--- a/doc/floatlabel/BasicDoc.vue
+++ b/doc/floatlabel/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>FloatLabel is used by wrapping the input and its label.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index 06afc5683..a9acced47 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>FocusTrap is enabled by attaching the directive with the v- prefix.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
                 <IconField>
@@ -65,7 +65,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
                 <IconField>
@@ -106,7 +106,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
                 <IconField>
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index dac40d619..0e79ede60 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -19,10 +19,10 @@
                 :responsiveOptions="responsiveOptions"
                 :pt="{
                     root: {
-                        class: [{ 'flex flex-column': fullScreen }]
+                        class: [{ 'flex flex-col': fullScreen }]
                     },
                     content: {
-                        class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+                        class: ['relative', { 'flex-1 justify-center': fullScreen }]
                     },
                     thumbnailwrapper: 'absolute w-full left-0 bottom-0'
                 }"
@@ -31,20 +31,20 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-nogutter justify-content-center">
+                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </div>
                 </template>
                 <template #footer>
-                    <div class="flex align-items-center bg-black-alpha-90 text-white">
-                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                        <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                    <div class="flex items-center bg-black/90 text-white">
+                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
+                        <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                         <span v-if="images" class="title-container">
-                            <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                            <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                            <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                            <span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                            <span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
+                            <span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
                         </span>
-                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                     </div>
                 </template>
             </Galleria>
@@ -92,10 +92,10 @@ export default {
     :responsiveOptions="responsiveOptions"
     :pt="{
         root: {
-            class: [{ 'flex flex-column': fullScreen }]
+            class: [{ 'flex flex-col': fullScreen }]
         },
         content: {
-            class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+            class: ['relative', { 'flex-1 justify-center': fullScreen }]
         },
 
         thumbnailwrapper: 'absolute w-full left-0 bottom-0'
@@ -105,20 +105,20 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-nogutter justify-content-center">
+        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
         </div>
     </template>
     <template #footer>
-        <div class="flex align-items-center bg-black-alpha-90 text-white">
-            <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-            <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+        <div class="flex items-center bg-black/90 text-white">
+            <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
+            <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
             <span v-if="images" class="title-container">
-                <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                <span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                <span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
+                <span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
             </span>
-            <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+            <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
         </div>
     </template>
 </Galleria>
@@ -141,10 +141,10 @@ export default {
             :responsiveOptions="responsiveOptions"
             :pt="{
                 root: {
-                    class: [{ 'flex flex-column': fullScreen }]
+                    class: [{ 'flex flex-col': fullScreen }]
                 },
                 content: {
-                    class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
                 },
 
                 thumbnailwrapper: 'absolute w-full left-0 bottom-0'
@@ -154,20 +154,20 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
             <template #footer>
-                <div class="flex align-items-center bg-black-alpha-90 text-white">
-                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                <div class="flex items-center bg-black/90 text-white">
+                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
+                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                     <span v-if="images" class="title-container">
-                        <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                        <span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                        <span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
+                        <span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
                     </span>
-                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                 </div>
             </template>
         </Galleria>
@@ -287,10 +287,10 @@ export default {
             :responsiveOptions="responsiveOptions"
             :pt="{
                 root: {
-                    class: [{ 'flex flex-column': fullScreen }]
+                    class: [{ 'flex flex-col': fullScreen }]
                 },
                 content: {
-                    class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+                    class: ['relative', { 'flex-1 justify-center': fullScreen }]
                 },
 
                 thumbnailwrapper: 'absolute w-full left-0 bottom-0'
@@ -300,20 +300,20 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
             <template #footer>
-                <div class="flex align-items-center bg-black-alpha-90 text-white">
-                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                <div class="flex items-center bg-black/90 text-white">
+                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
+                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                     <span v-if="images" class="title-container">
-                        <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                        <span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                        <span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
+                        <span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
                     </span>
-                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
                 </div>
             </template>
         </Galleria>
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index 550d8b254..525e23eae 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="mb-3">
+            <div class="mb-4">
                 <Button icon="pi pi-minus" @click="prev" />
                 <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
             </div>
@@ -59,7 +59,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="mb-3">
+        <div class="mb-4">
             <Button icon="pi pi-minus" @click="prev" />
             <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
@@ -112,7 +112,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="mb-3">
+        <div class="mb-4">
             <Button icon="pi pi-minus" @click="prev" />
             <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 4551440a0..058fdb782 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -9,7 +9,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-nogutter justify-content-center">
+                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </div>
                 </template>
@@ -43,7 +43,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-nogutter justify-content-center">
+        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
         </div>
     </template>
@@ -57,7 +57,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </div>
             </template>
@@ -98,7 +98,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </div>
             </template>
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index cb3c879e6..9667685d1 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex flex-wrap gap-3 mb-5">
-                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+            <div class="flex flex-wrap gap-4 mb-8">
+                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                     <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
                     <label :for="option.label" class="ml-2"> {{ option.label }} </label>
                 </div>
@@ -15,7 +15,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-nogutter justify-content-center">
+                    <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </div>
                 </template>
@@ -68,7 +68,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-nogutter justify-content-center">
+        <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
         </div>
     </template>
@@ -77,8 +77,8 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                 <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
@@ -88,7 +88,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
@@ -143,8 +143,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                 <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
@@ -154,7 +154,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
+                <div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue
index f1a895e14..3d344cff2 100644
--- a/doc/galleria/fullscreen/CustomContentDoc.vue
+++ b/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -3,7 +3,7 @@
         <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Galleria
                 v-model:activeIndex="activeIndex"
                 v-model:visible="displayCustom"
@@ -24,8 +24,8 @@
                 </template>
             </Galleria>
 
-            <div v-if="images" class="grid" style="max-width: 400px">
-                <div v-for="(image, index) of images" :key="index" class="col-4">
+            <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+                <div v-for="(image, index) of images" :key="index" class="col-span-4">
                     <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
                 </div>
             </div>
@@ -71,7 +71,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
             <template #item="slotProps">
@@ -82,8 +82,8 @@ export default {
             </template>
         </Galleria>
 
-        <div v-if="images" class="grid" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-4">
+        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+            <div v-for="(image, index) of images" :key="index" class="col-span-4">
                 <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
             </div>
         </div>
@@ -129,7 +129,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
             <template #item="slotProps">
@@ -140,8 +140,8 @@ export default {
             </template>
         </Galleria>
 
-        <div v-if="images" class="grid" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-4">
+        <div v-if="images" class="grid grid-cols-12 gap-4" style="max-width: 400px">
+            <div v-for="(image, index) of images" :key="index" class="col-span-4">
                 <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
             </div>
         </div>
diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
index 4eba2a7a8..2d3c67bee 100644
--- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -3,7 +3,7 @@
         <p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
                 <template #item="slotProps">
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -60,7 +60,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -110,7 +110,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
index b35e6ac20..be67bf6a6 100644
--- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -3,7 +3,7 @@
         <p>Thumbnails can also be hidden in full screen mode.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
                 <template #item="slotProps">
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -60,7 +60,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -110,7 +110,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index 84ee10607..28c6ea89e 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex flex-wrap gap-3 mb-5">
-                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+            <div class="flex flex-wrap gap-4 mb-8">
+                <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                     <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
                     <label :for="option.label" class="ml-2"> {{ option.label }} </label>
                 </div>
             </div>
-            <div class="flex align-items-center mb-5">
+            <div class="flex items-center mb-8">
                 <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
                 <label for="inside_cbox" class="ml-2"> Inside </label>
             </div>
@@ -63,13 +63,13 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                 <RadioButton :value="option.value" />
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
-        <div class="flex align-items-center mb-5">
+        <div class="flex items-center mb-8">
             <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
             <label for="inside_cbox" class="ml-2"> Inside </label>
         </div>
@@ -119,13 +119,13 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+        <div class="flex flex-wrap gap-4 mb-8">
+            <div v-for="option in positionOptions" :key="option.label" class="flex items-center">
                 <RadioButton :value="option.value" />
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
-        <div class="flex align-items-center mb-5">
+        <div class="flex items-center mb-8">
             <Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
             <label for="inside_cbox" class="ml-2"> Inside </label>
         </div>
diff --git a/doc/guides/accessibility/ColorsDoc.vue b/doc/guides/accessibility/ColorsDoc.vue
index d4584513f..08303b0be 100644
--- a/doc/guides/accessibility/ColorsDoc.vue
+++ b/doc/guides/accessibility/ColorsDoc.vue
@@ -5,10 +5,10 @@
         <p>Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="border-radius: 10px">
+            <div class="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-blue-600" style="border-radius: 10px">
                 <span class="text-white">GOOD</span>
             </div>
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="border-radius: 10px">
+            <div class="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-blue-400" style="border-radius: 10px">
                 <span class="text-white">BAD</span>
             </div>
         </div>
@@ -17,7 +17,7 @@
         <p>Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="border-radius: 10px">
+            <div class="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-pink-500" style="border-radius: 10px">
                 <span class="text-blue-500">VIBRATE</span>
             </div>
         </div>
@@ -26,13 +26,13 @@
         <p>Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
+            <div class="h-32 w-32 flex flex-col justify-center items-center mr-8 font-bold bg-gray-900" style="border-radius: 10px">
                 <span class="text-indigo-500">Indigo 500</span>
-                <i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
+                <i class="text-indigo-500 pi pi-times-circle mt-4 text-xl"></i>
             </div>
-            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
+            <div class="h-32 w-32 flex flex-col justify-center items-center mr-8 font-bold bg-gray-900" style="border-radius: 10px">
                 <span class="text-indigo-200">Indigo 200</span>
-                <i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
+                <i class="text-indigo-200 pi pi-check-circle mt-4 text-xl"></i>
             </div>
         </div>
     </DocSectionText>
diff --git a/doc/guides/accessibility/FormControlsDoc.vue b/doc/guides/accessibility/FormControlsDoc.vue
index 5f19cde24..1cf6abd69 100644
--- a/doc/guides/accessibility/FormControlsDoc.vue
+++ b/doc/guides/accessibility/FormControlsDoc.vue
@@ -10,7 +10,7 @@
         
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
     </div>
     <pre v-code><code>
@@ -18,7 +18,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>
             <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
             controls should be preferred.
@@ -29,7 +29,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
     </div>
     <pre v-code><code>
diff --git a/doc/guides/accessibility/SemanticHTMLDoc.vue b/doc/guides/accessibility/SemanticHTMLDoc.vue
index 43396fc3f..49a283c6d 100644
--- a/doc/guides/accessibility/SemanticHTMLDoc.vue
+++ b/doc/guides/accessibility/SemanticHTMLDoc.vue
@@ -26,7 +26,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
     </div>
     <pre v-code><code>
diff --git a/doc/guides/accessibility/WAIAriaDoc.vue b/doc/guides/accessibility/WAIAriaDoc.vue
index 2d6548c0c..4b86c35ca 100644
--- a/doc/guides/accessibility/WAIAriaDoc.vue
+++ b/doc/guides/accessibility/WAIAriaDoc.vue
@@ -18,7 +18,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>
             A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be
             read by a reader.
@@ -31,7 +31,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
     </div>
     <pre v-code><code>
@@ -43,7 +43,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>
             However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
             <i>p-hidden-accessible</i>
@@ -60,11 +60,11 @@
 
 </code></pre>
 
-    <div class="doc-section-description mt-3">
+    <div class="doc-section-description mt-4">
         <p>A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
     </div>
 
-    <div class="card flex align-items-center justify-content-center">
+    <div class="card flex items-center justify-center">
         <label for="binary" class="mr-2">Remember Me</label>
         <Checkbox id="binary" v-model="checked" binary />
     </div>
diff --git a/doc/iconfield/BasicDoc.vue b/doc/iconfield/BasicDoc.vue
index 9b03fb38b..e9e6fafd5 100644
--- a/doc/iconfield/BasicDoc.vue
+++ b/doc/iconfield/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p><i>IconField</i> wraps the <i>InputIcon</i> and the input field component.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-3">
+    <div class="card flex flex-wrap justify-center gap-4">
         <IconField>
             <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
@@ -36,7 +36,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-3">
+    <div class="card flex flex-wrap justify-center gap-4">
         <IconField>
             <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
@@ -62,7 +62,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-3">
+    <div class="card flex flex-wrap justify-center gap-4">
         <IconField>
             <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
diff --git a/doc/iconfield/TemplateDoc.vue b/doc/iconfield/TemplateDoc.vue
index 067d67f30..968e7c001 100644
--- a/doc/iconfield/TemplateDoc.vue
+++ b/doc/iconfield/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content inside an InputIcon is defined as children.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <IconField>
             <InputIcon>
                 <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -41,7 +41,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <IconField>
             <InputIcon>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -66,7 +66,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <IconField>
             <InputIcon>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/doc/icons/BasicDoc.vue b/doc/icons/BasicDoc.vue
index 6661cfe6f..612e6a40e 100644
--- a/doc/icons/BasicDoc.vue
+++ b/doc/icons/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeIcons use the <i>pi pi-&#123;icon&#125;</i> syntax such as <i>pi pi-check</i>. A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
     </DocSectionText>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <i class="pi pi-check"></i>
         <i class="pi pi-times"></i>
         <span class="pi pi-search"></span>
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index 701ad5a7b..7153d5343 100644
--- a/doc/icons/ColorDoc.vue
+++ b/doc/icons/ColorDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon color is defined with the <i>color</i> property which is inherited from parent by default.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-3">
+    <div class="card flex justify-center items-center gap-4">
         <i class="pi pi-check" style="color: slateblue"></i>
         <i class="pi pi-times" style="color: green"></i>
         <i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
diff --git a/doc/icons/ConstantsDoc.vue b/doc/icons/ConstantsDoc.vue
index 77ef70649..08f15a236 100644
--- a/doc/icons/ConstantsDoc.vue
+++ b/doc/icons/ConstantsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Constants API is available to reference icons easily when used programmatically.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
 </template>
diff --git a/doc/icons/ListDoc.vue b/doc/icons/ListDoc.vue
index 7af4a64bd..6383aef8c 100644
--- a/doc/icons/ListDoc.vue
+++ b/doc/icons/ListDoc.vue
@@ -3,12 +3,12 @@
         <p>Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
     </DocSectionText>
 
-    <InputText v-model="filter" class="w-full p-3 mt-3 mb-4" placeholder="Search an icon" />
+    <InputText v-model="filter" class="w-full p-4 mt-4 mb-6" placeholder="Search an icon" />
 
     <div class="card">
-        <div class="grid text-center">
-            <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-12 md:col-2 mb-5">
-                <i :class="'text-2xl mb-3 text-color-secondary pi pi-' + icon.properties.name"></i>
+        <div class="grid grid-cols-12 gap-4 text-center">
+            <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-span-12 md:col-span-2 mb-8">
+                <i :class="'text-2xl mb-4 text-surface-500 dark:text-surface-400 pi pi-' + icon.properties.name"></i>
                 <div>pi-{{ icon.properties.name }}</div>
             </div>
         </div>
diff --git a/doc/icons/SizeDoc.vue b/doc/icons/SizeDoc.vue
index 0dd8b5a60..60614aa90 100644
--- a/doc/icons/SizeDoc.vue
+++ b/doc/icons/SizeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Size of an icon is controlled with the font-size property of the element.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-3">
+    <div class="card flex justify-center items-center gap-4">
         <i class="pi pi-check" style="font-size: 1rem"></i>
         <i class="pi pi-times" style="font-size: 1.5rem"></i>
         <i class="pi pi-search" style="font-size: 2rem"></i>
diff --git a/doc/icons/SpinDoc.vue b/doc/icons/SpinDoc.vue
index d25a255ce..8cbc3bc45 100644
--- a/doc/icons/SpinDoc.vue
+++ b/doc/icons/SpinDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Special <i>pi-spin</i> class applies infinite rotation to an icon.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
         <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
     </div>
diff --git a/doc/image/BasicDoc.vue b/doc/image/BasicDoc.vue
index c52ef142f..ab326950d 100644
--- a/doc/image/BasicDoc.vue
+++ b/doc/image/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Image is used similar to the standard <i>img</i> element.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,14 +18,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
 </template>
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index d8bfe1e87..b71b3467c 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 
@@ -19,14 +19,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 </template>
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index 5add98922..b1ccba7ef 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -5,7 +5,7 @@
             image respectively.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image alt="Image" preview>
             <template #previewicon>
                 <i class="pi pi-search"></i>
@@ -41,7 +41,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image alt="Image" preview>
             <template #previewicon>
                 <i class="pi pi-search"></i>
@@ -58,7 +58,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image alt="Image" preview>
             <template #previewicon>
                 <i class="pi pi-search"></i>
diff --git a/doc/inlinemessage/BasicDoc.vue b/doc/inlinemessage/BasicDoc.vue
index abbbfb752..573b2530d 100644
--- a/doc/inlinemessage/BasicDoc.vue
+++ b/doc/inlinemessage/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>InlineMessage component requires a content to display.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
 </template>
@@ -28,7 +28,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
 </template>
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index 3e169a021..d3ef49018 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -3,11 +3,11 @@
         <p>Message component is handy when displaying error messages next to form elements.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap align-items-center mb-3 gap-2">
+        <div class="flex flex-wrap items-center mb-4 gap-2">
             <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
-        <div class="flex flex-wrap align-items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
@@ -21,11 +21,11 @@ export default {
         return {
             code: {
                 basic: `
-<div class="flex flex-wrap align-items-center mb-3 gap-2">
+<div class="flex flex-wrap items-center mb-4 gap-2">
     <InputText placeholder="Username" aria-label="username" invalid />
     <InlineMessage>Username is required</InlineMessage>
 </div>
-<div class="flex flex-wrap align-items-center gap-2">
+<div class="flex flex-wrap items-center gap-2">
     <InputText placeholder="Email" aria-label="email" invalid />
     <InlineMessage />
 </div>
@@ -33,11 +33,11 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap align-items-center mb-3 gap-2">
+        <div class="flex flex-wrap items-center mb-4 gap-2">
             <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
-        <div class="flex flex-wrap align-items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
@@ -50,11 +50,11 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap align-items-center mb-3 gap-2">
+        <div class="flex flex-wrap items-center mb-4 gap-2">
             <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
-        <div class="flex flex-wrap align-items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
diff --git a/doc/inlinemessage/SeverityDoc.vue b/doc/inlinemessage/SeverityDoc.vue
index 86e3b3ad0..64463669d 100644
--- a/doc/inlinemessage/SeverityDoc.vue
+++ b/doc/inlinemessage/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>severity</i> option specifies the type of the message.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <InlineMessage severity="success">Success Message</InlineMessage>
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warn Message</InlineMessage>
@@ -28,7 +28,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <InlineMessage severity="success">Success Message</InlineMessage>
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warn Message</InlineMessage>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-4">
         <InlineMessage severity="success">Success Message</InlineMessage>
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warn Message</InlineMessage>
diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index 35454b836..7a3562b4c 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A group is created by wrapping the input and add-ons with the <i>InputGroup</i> component. Each add-on element is defined as a child of <i>InputGroupAddon</i> component.</p>
     </DocSectionText>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputGroupAddon>
                 <i class="pi pi-user"></i>
@@ -50,7 +50,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputGroupAddon>
                 <i class="pi pi-user"></i>
@@ -73,7 +73,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputGroupAddon>
                 <i class="pi pi-user"></i>
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index 83ce25c00..20ef10831 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Buttons can be placed at either side of an input element.</p>
     </DocSectionText>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
@@ -46,7 +46,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
@@ -67,7 +67,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
diff --git a/doc/inputgroup/CheckboxDoc.vue b/doc/inputgroup/CheckboxDoc.vue
index ad2849a8e..3287463a9 100644
--- a/doc/inputgroup/CheckboxDoc.vue
+++ b/doc/inputgroup/CheckboxDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
     </DocSectionText>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputText placeholder="Price" />
             <InputGroupAddon>
@@ -66,7 +66,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputText placeholder="Price" />
             <InputGroupAddon>
@@ -108,7 +108,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column md:flex-row gap-3">
+    <div class="card flex flex-col md:flex-row gap-4">
         <InputGroup>
             <InputText placeholder="Price" />
             <InputGroupAddon>
diff --git a/doc/inputgroup/MultipleDoc.vue b/doc/inputgroup/MultipleDoc.vue
index dc06ec9de..88e91a360 100644
--- a/doc/inputgroup/MultipleDoc.vue
+++ b/doc/inputgroup/MultipleDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple add-ons can be placed inside the same group.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputGroup class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <InputGroup class="w-full md:w-[30rem]">
             <InputGroupAddon>
                 <i class="pi pi-clock"></i>
             </InputGroupAddon>
@@ -24,7 +24,7 @@ export default {
         return {
             code: {
                 basic: `
-<InputGroup class="w-full md:w-30rem">
+<InputGroup class="w-full md:w-[30rem]">
     <InputGroupAddon>
         <i class="pi pi-clock"></i>
     </InputGroupAddon>
@@ -38,8 +38,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <InputGroup class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <InputGroup class="w-full md:w-[30rem]">
             <InputGroupAddon>
                 <i class="pi pi-clock"></i>
             </InputGroupAddon>
@@ -55,8 +55,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <InputGroup class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <InputGroup class="w-full md:w-[30rem]">
             <InputGroupAddon>
                 <i class="pi pi-clock"></i>
             </InputGroupAddon>
diff --git a/doc/inputmask/BasicDoc.vue b/doc/inputmask/BasicDoc.vue
index da5bfa3b0..906493881 100644
--- a/doc/inputmask/BasicDoc.vue
+++ b/doc/inputmask/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>InputMask is used as a controlled input with <i>v-model</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
 </template>
diff --git a/doc/inputmask/DisabledDoc.vue b/doc/inputmask/DisabledDoc.vue
index 96d91e789..f7b247741 100644
--- a/doc/inputmask/DisabledDoc.vue
+++ b/doc/inputmask/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
 </template>
diff --git a/doc/inputmask/FilledDoc.vue b/doc/inputmask/FilledDoc.vue
index 0695039a5..1f01e62d6 100644
--- a/doc/inputmask/FilledDoc.vue
+++ b/doc/inputmask/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
     </div>
 </template>
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index ef9c67e20..630cdaff2 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 6df8082f3..bdf5cea3f 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
diff --git a/doc/inputmask/MaskDoc.vue b/doc/inputmask/MaskDoc.vue
index b03427290..09388a46f 100644
--- a/doc/inputmask/MaskDoc.vue
+++ b/doc/inputmask/MaskDoc.vue
@@ -5,7 +5,7 @@
             <i>-</i> are also accepted.
         </p>
     </DocSectionText>
-    <div class="card p-fluid flex flex-wrap gap-3">
+    <div class="card p-fluid flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
             <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
@@ -50,7 +50,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card p-fluid flex flex-wrap gap-3">
+    <div class="card p-fluid flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
             <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
@@ -83,7 +83,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card p-fluid flex flex-wrap gap-3">
+    <div class="card p-fluid flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
             <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
diff --git a/doc/inputmask/OptionalDoc.vue b/doc/inputmask/OptionalDoc.vue
index e417c786f..b8b24996f 100644
--- a/doc/inputmask/OptionalDoc.vue
+++ b/doc/inputmask/OptionalDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
 </template>
diff --git a/doc/inputmask/SlotCharDoc.vue b/doc/inputmask/SlotCharDoc.vue
index 27906864d..c2c38d964 100644
--- a/doc/inputmask/SlotCharDoc.vue
+++ b/doc/inputmask/SlotCharDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
 </template>
diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index bbee15463..12c7ce42b 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
             <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
@@ -49,7 +49,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
             <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
@@ -87,7 +87,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
             <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
diff --git a/doc/inputnumber/CurrencyDoc.vue b/doc/inputnumber/CurrencyDoc.vue
index 650fef36d..84596cbfc 100644
--- a/doc/inputnumber/CurrencyDoc.vue
+++ b/doc/inputnumber/CurrencyDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
             <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
@@ -40,7 +40,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
             <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
@@ -75,7 +75,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
             <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
diff --git a/doc/inputnumber/DisabledDoc.vue b/doc/inputnumber/DisabledDoc.vue
index 3087646da..6e6f053f1 100644
--- a/doc/inputnumber/DisabledDoc.vue
+++ b/doc/inputnumber/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
 </template>
diff --git a/doc/inputnumber/FilledDoc.vue b/doc/inputnumber/FilledDoc.vue
index 42a9fdc59..03b2c5dc9 100644
--- a/doc/inputnumber/FilledDoc.vue
+++ b/doc/inputnumber/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" variant="filled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" variant="filled" />
     </div>
 </template>
diff --git a/doc/inputnumber/FloatLabelDoc.vue b/doc/inputnumber/FloatLabelDoc.vue
index d0b6278a3..512f2d9ab 100644
--- a/doc/inputnumber/FloatLabelDoc.vue
+++ b/doc/inputnumber/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
@@ -45,7 +45,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index ece73f47c..b0f84745d 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
diff --git a/doc/inputnumber/LocaleDoc.vue b/doc/inputnumber/LocaleDoc.vue
index 3865488d6..e13db5472 100644
--- a/doc/inputnumber/LocaleDoc.vue
+++ b/doc/inputnumber/LocaleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
             <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
@@ -40,7 +40,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
             <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
@@ -75,7 +75,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
             <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
diff --git a/doc/inputnumber/NumeralsDoc.vue b/doc/inputnumber/NumeralsDoc.vue
index 146d9314a..3f983148d 100644
--- a/doc/inputnumber/NumeralsDoc.vue
+++ b/doc/inputnumber/NumeralsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>InputNumber is used as a controlled input with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
             <InputNumber v-model="value1" inputId="integeronly" />
@@ -40,7 +40,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
             <InputNumber v-model="value1" inputId="integeronly" />
@@ -75,7 +75,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
             <InputNumber v-model="value1" inputId="integeronly" />
diff --git a/doc/inputnumber/PrefixSuffixDoc.vue b/doc/inputnumber/PrefixSuffixDoc.vue
index 6c720f1e7..5de1b25c2 100644
--- a/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/doc/inputnumber/PrefixSuffixDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
             <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
@@ -40,7 +40,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
             <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
@@ -75,7 +75,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
+    <div class="card flex flex-wrap gap-4 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
             <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index fcf955901..6eebef2b1 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
             <template #incrementbuttonicon>
                 <span class="pi pi-plus" />
@@ -33,7 +33,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
             <template #incrementbuttonicon>
                 <span class="pi pi-plus" />
@@ -57,7 +57,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
             <template #incrementbuttonicon>
                 <span class="pi pi-plus" />
diff --git a/doc/inputotp/BasicDoc.vue b/doc/inputotp/BasicDoc.vue
index ac72aad11..11a5b84cf 100644
--- a/doc/inputotp/BasicDoc.vue
+++ b/doc/inputotp/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" />
     </div>
 </template>
diff --git a/doc/inputotp/IntegerOnlyDoc.vue b/doc/inputotp/IntegerOnlyDoc.vue
index 55a525e79..25b29abbf 100644
--- a/doc/inputotp/IntegerOnlyDoc.vue
+++ b/doc/inputotp/IntegerOnlyDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>integerOnly</i> is present, only integers can be accepted as input.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" integerOnly />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" integerOnly />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" integerOnly />
     </div>
 </template>
diff --git a/doc/inputotp/MaskDoc.vue b/doc/inputotp/MaskDoc.vue
index 153ad36b4..f80fbec8e 100644
--- a/doc/inputotp/MaskDoc.vue
+++ b/doc/inputotp/MaskDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Enable the <i>mask</i> option to hide the values in the input fields.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" mask />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" mask />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value" mask />
     </div>
 </template>
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
index d1e986429..9735ff581 100644
--- a/doc/inputotp/SampleDoc.vue
+++ b/doc/inputotp/SampleDoc.vue
@@ -2,19 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>A sample UI implementation with templating and additional elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
             <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
             <InputOtp v-model="value" :length="6" style="gap: 0">
                 <template #default="{ attrs, events, index }">
                     <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-3">
+                    <div v-if="index === 3" class="px-4">
                         <i class="pi pi-minus" />
                     </div>
                 </template>
             </InputOtp>
-            <div class="flex justify-content-between mt-5 align-self-stretch">
+            <div class="flex justify-between mt-8 self-stretch">
                 <Button label="Resend Code" link class="p-0"></Button>
                 <Button label="Submit Code"></Button>
             </div>
@@ -30,18 +30,18 @@ export default {
             value: null,
             code: {
                 basic: `
-<div class="flex flex-column align-items-center">
+<div class="flex flex-col items-center">
     <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-    <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
     <InputOtp v-model="value" :length="6" style="gap: 0">
         <template #default="{ attrs, events, index }">
             <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            <div v-if="index === 3" class="px-3">
+            <div v-if="index === 3" class="px-4">
                 <i class="pi pi-minus" />
             </div>
         </template>
     </InputOtp>
-    <div class="flex justify-content-between mt-5 align-self-stretch">
+    <div class="flex justify-between mt-8 self-stretch">
         <Button label="Resend Code" link class="p-0"></Button>
         <Button label="Submit Code"></Button>
     </div>
@@ -49,19 +49,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
             <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
             <InputOtp v-model="value" :length="6" style="gap: 0">
                 <template #default="{ attrs, events, index }">
                     <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-3">
+                    <div v-if="index === 3" class="px-4">
                         <i class="pi pi-minus" />
                     </div>
                 </template>
             </InputOtp>
-            <div class="flex justify-content-between mt-5 align-self-stretch">
+            <div class="flex justify-between mt-8 self-stretch">
                 <Button label="Resend Code" link class="p-0"></Button>
                 <Button label="Submit Code"></Button>
             </div>
@@ -119,19 +119,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
             <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-            <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+            <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
             <InputOtp v-model="value" :length="6" style="gap: 0">
                 <template #default="{ attrs, events, index }">
                     <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-                    <div v-if="index === 3" class="px-3">
+                    <div v-if="index === 3" class="px-4">
                         <i class="pi pi-minus" />
                     </div>
                 </template>
             </InputOtp>
-            <div class="flex justify-content-between mt-5 align-self-stretch">
+            <div class="flex justify-between mt-8 self-stretch">
                 <Button label="Resend Code" link class="p-0"></Button>
                 <Button label="Submit Code"></Button>
             </div>
diff --git a/doc/inputotp/TemplateDoc.vue b/doc/inputotp/TemplateDoc.vue
index 36d7142a0..de3189954 100644
--- a/doc/inputotp/TemplateDoc.vue
+++ b/doc/inputotp/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value">
             <template #default="{ attrs, events }">
                 <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
@@ -27,7 +27,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value">
             <template #default="{ attrs, events }">
                 <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
@@ -66,7 +66,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputOtp v-model="value">
             <template #default="{ attrs, events }">
                 <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
diff --git a/doc/inputtext/BasicDoc.vue b/doc/inputtext/BasicDoc.vue
index 6cc9fcbb7..ed62486a3 100644
--- a/doc/inputtext/BasicDoc.vue
+++ b/doc/inputtext/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>InputText is used as a controlled input with <i>v-model</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText type="text" v-model="value" />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText type="text" v-model="value" />
     </div>
 </template>
diff --git a/doc/inputtext/DisabledDoc.vue b/doc/inputtext/DisabledDoc.vue
index eb107b3f9..6b42f75a0 100644
--- a/doc/inputtext/DisabledDoc.vue
+++ b/doc/inputtext/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
diff --git a/doc/inputtext/FilledDoc.vue b/doc/inputtext/FilledDoc.vue
index 28313edb3..11ff03fa0 100644
--- a/doc/inputtext/FilledDoc.vue
+++ b/doc/inputtext/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" type="text" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" type="text" variant="filled" />
     </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" type="text" variant="filled" />
     </div>
 </template>
diff --git a/doc/inputtext/FloatLabelDoc.vue b/doc/inputtext/FloatLabelDoc.vue
index 80f3d9773..e0b695cc2 100644
--- a/doc/inputtext/FloatLabelDoc.vue
+++ b/doc/inputtext/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
diff --git a/doc/inputtext/HelpTextDoc.vue b/doc/inputtext/HelpTextDoc.vue
index 81c943748..88cfacd5e 100644
--- a/doc/inputtext/HelpTextDoc.vue
+++ b/doc/inputtext/HelpTextDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>An advisory text can be defined with the semantic <i>small</i> tag.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-2">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
             <label for="username">Username</label>
             <InputText id="username" v-model="value" aria-describedby="username-help" />
             <small id="username-help">Enter your username to reset your password.</small>
@@ -19,7 +19,7 @@ export default {
             value: null,
             code: {
                 basic: `
-<div class="flex flex-column gap-2">
+<div class="flex flex-col gap-2">
     <label for="username">Username</label>
     <InputText id="username" v-model="value" aria-describedby="username-help" />
     <small id="username-help">Enter your username to reset your password.</small>
@@ -27,8 +27,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-2">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
             <label for="username">Username</label>
             <InputText id="username" v-model="value" aria-describedby="username-help" />
             <small id="username-help">Enter your username to reset your password.</small>
@@ -48,8 +48,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-2">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-2">
             <label for="username">Username</label>
             <InputText id="username" v-model="value" aria-describedby="username-help" />
             <small id="username-help">Enter your username to reset your password.</small>
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index c10554452..2ee407a99 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" invalid />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <InputText v-model="value" invalid />
     </div>
 </template>
diff --git a/doc/inputtext/SizesDoc.vue b/doc/inputtext/SizesDoc.vue
index e95830d92..39dbcf826 100644
--- a/doc/inputtext/SizesDoc.vue
+++ b/doc/inputtext/SizesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
         <InputText v-model="value3" type="text" size="large" placeholder="Large" />
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
         <InputText v-model="value3" type="text" size="large" placeholder="Large" />
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
         <InputText v-model="value3" type="text" size="large" placeholder="Large" />
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index bb91d3b2e..77fcc1b93 100644
--- a/doc/knob/AccessibilityDoc.vue
+++ b/doc/knob/AccessibilityDoc.vue
@@ -23,7 +23,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">left arrow</i>
                                 <i>down arrow</i>
                             </span>
@@ -32,7 +32,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">right arrow</i>
                                 <i>up arrow</i>
                             </span>
diff --git a/doc/knob/BasicDoc.vue b/doc/knob/BasicDoc.vue
index c48ec5dc2..164587558 100644
--- a/doc/knob/BasicDoc.vue
+++ b/doc/knob/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" />
     </div>
 </template>
diff --git a/doc/knob/ColorDoc.vue b/doc/knob/ColorDoc.vue
index a46098024..a0b65d7a4 100644
--- a/doc/knob/ColorDoc.vue
+++ b/doc/knob/ColorDoc.vue
@@ -5,7 +5,7 @@
             of range and value sections.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
 </template>
@@ -39,7 +39,7 @@ export default {
 `,
                 composition: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
 </template>
diff --git a/doc/knob/DisabledDoc.vue b/doc/knob/DisabledDoc.vue
index 314dd0ac4..6d0fe13b8 100644
--- a/doc/knob/DisabledDoc.vue
+++ b/doc/knob/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" disabled />
     </div>
 </template>
diff --git a/doc/knob/MinMaxDoc.vue b/doc/knob/MinMaxDoc.vue
index 884f95522..7dcbbc269 100644
--- a/doc/knob/MinMaxDoc.vue
+++ b/doc/knob/MinMaxDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
 </template>
diff --git a/doc/knob/ReactiveDoc.vue b/doc/knob/ReactiveDoc.vue
index 2b45d955b..774be6264 100644
--- a/doc/knob/ReactiveDoc.vue
+++ b/doc/knob/ReactiveDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Knob can be controlled with custom controls as well.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
             <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
@@ -27,7 +27,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
             <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
@@ -48,7 +48,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-2">
+    <div class="card flex flex-col items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
             <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
diff --git a/doc/knob/ReadOnlyDoc.vue b/doc/knob/ReadOnlyDoc.vue
index 964410805..93b9f42ae 100644
--- a/doc/knob/ReadOnlyDoc.vue
+++ b/doc/knob/ReadOnlyDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>readonly</i> present, value cannot be edited.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" readonly />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" readonly />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" readonly />
     </div>
 </template>
diff --git a/doc/knob/SizeDoc.vue b/doc/knob/SizeDoc.vue
index 6532b2af6..346cb5a7f 100644
--- a/doc/knob/SizeDoc.vue
+++ b/doc/knob/SizeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Diameter of the knob is defined in pixels using the <i>size</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :size="200" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" :size="200" />
   </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" :size="200" />
   </div>
 </template>
diff --git a/doc/knob/StepDoc.vue b/doc/knob/StepDoc.vue
index b5b434e70..4bc717125 100644
--- a/doc/knob/StepDoc.vue
+++ b/doc/knob/StepDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :step="10" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :step="10" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :step="10" />
     </div>
 </template>
diff --git a/doc/knob/StrokeDoc.vue b/doc/knob/StrokeDoc.vue
index 38a63015e..fd7a167c5 100644
--- a/doc/knob/StrokeDoc.vue
+++ b/doc/knob/StrokeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The border size is specified with the <i>stroke</i> property as a number in pixels.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" :strokeWidth="5" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-  <div class="card flex justify-content-center">
+  <div class="card flex justify-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
 </template>
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 08cc2278c..974f494eb 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The label can be customized with the <i>valueTemplate</i> property using either a template string or a function.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
 </template>
diff --git a/doc/listbox/BasicDoc.vue b/doc/listbox/BasicDoc.vue
index d9e5b7484..e6a9f83d9 100644
--- a/doc/listbox/BasicDoc.vue
+++ b/doc/listbox/BasicDoc.vue
@@ -5,8 +5,8 @@
             that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,12 +25,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -53,8 +53,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/CheckmarkDoc.vue b/doc/listbox/CheckmarkDoc.vue
index 073f31513..f3998037b 100644
--- a/doc/listbox/CheckmarkDoc.vue
+++ b/doc/listbox/CheckmarkDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/DisabledDoc.vue b/doc/listbox/DisabledDoc.vue
index 0d935a177..68c6eed47 100644
--- a/doc/listbox/DisabledDoc.vue
+++ b/doc/listbox/DisabledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/FilterDoc.vue b/doc/listbox/FilterDoc.vue
index 60364d8fb..26e481925 100644
--- a/doc/listbox/FilterDoc.vue
+++ b/doc/listbox/FilterDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Listbox provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/GroupDoc.vue b/doc/listbox/GroupDoc.vue
index 5e93adfbc..6824d9332 100644
--- a/doc/listbox/GroupDoc.vue
+++ b/doc/listbox/GroupDoc.vue
@@ -5,10 +5,10 @@
             of a group.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -57,9 +57,9 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
     <template #optiongroup="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
             <div>{{ slotProps.option.label }}</div>
         </div>
@@ -68,10 +68,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -124,10 +124,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index 838e9ea9f..8f95677d3 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/MultipleDoc.vue b/doc/listbox/MultipleDoc.vue
index 704ef7c62..712658fc3 100644
--- a/doc/listbox/MultipleDoc.vue
+++ b/doc/listbox/MultipleDoc.vue
@@ -5,8 +5,8 @@
             be present.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,12 +25,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -53,8 +53,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/listbox/TemplateDoc.vue b/doc/listbox/TemplateDoc.vue
index 8e3b716f2..3ff0fe1e3 100644
--- a/doc/listbox/TemplateDoc.vue
+++ b/doc/listbox/TemplateDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content for an option is displayed with the <i>option</i> slot that takes an option as a parameter. Additional available templating sections are <i>filter</i> and <i>optionGroup</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -34,9 +34,9 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
     <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
             <div>{{ slotProps.option.name }}</div>
         </div>
@@ -45,10 +45,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -81,10 +81,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
diff --git a/doc/listbox/VirtualScrollDoc.vue b/doc/listbox/VirtualScrollDoc.vue
index 6d56650f9..de711c5d7 100644
--- a/doc/listbox/VirtualScrollDoc.vue
+++ b/doc/listbox/VirtualScrollDoc.vue
@@ -5,8 +5,8 @@
             <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Listbox.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,13 +20,13 @@ export default {
             code: {
                 basic: `
 <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
+    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"    
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
     </div>
 </template>
 
@@ -43,9 +43,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
+            :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
     </div>
 </template>
 
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 475a74ccc..827a385b3 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>MegaMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
-    <div class="card lg:px-8">
+    <div class="card lg:px-20">
         <MegaMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 30a93ca93..5899c187d 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -5,9 +5,9 @@
         </p>
     </DocSectionText>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -19,20 +19,20 @@
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
-                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
-                    <span class="inline-flex flex-column gap-1">
-                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
-                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-column align-items-start gap-3">
+                <div v-else class="flex flex-col items-start gap-4">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />
@@ -100,28 +100,28 @@ export default {
             ],
             code: {
                 basic: `
-<MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
+<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
     <template #start>
-        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
             <path d="..." fill="var(--p-primary-color)" />
             <path d="..." fill="var(--text-color)" />
         </svg>
     </template>
     <template #item="{ item }">
-        <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+        <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
         </a>
-        <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
-            <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                 <i :class="[item.icon, 'text-lg']"></i>
             </span>
-            <span class="inline-flex flex-column gap-1">
-                <span class="font-medium text-lg text-900">{{ item.label }}</span>
-                <span class="white-space-nowrap">{{ item.subtext }}</span>
+            <span class="inline-flex flex-col gap-1">
+                <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                <span class="whitespace-nowrap">{{ item.subtext }}</span>
             </span>
         </a>
-        <div v-else class="flex flex-column align-items-start gap-3">
+        <div v-else class="flex flex-col items-start gap-4">
             <img alt="megamenu-demo" :src="item.image" class="w-full" />
             <span>{{ item.subtext }}</span>
             <Button :label="item.label" outlined />
@@ -135,9 +135,9 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -149,20 +149,20 @@ export default {
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
-                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
-                    <span class="inline-flex flex-column gap-1">
-                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
-                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-column align-items-start gap-3">
+                <div v-else class="flex flex-col items-start gap-4">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />
@@ -235,9 +235,9 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -249,20 +249,20 @@ export default {
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
-                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
-                    <span class="inline-flex flex-column gap-1">
-                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
-                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    <span class="inline-flex flex-col gap-1">
+                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-column align-items-start gap-3">
+                <div v-else class="flex flex-col items-start gap-4">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />
diff --git a/doc/menu/BasicDoc.vue b/doc/menu/BasicDoc.vue
index 1f428b53f..bb40cad90 100644
--- a/doc/menu/BasicDoc.vue
+++ b/doc/menu/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Menu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
 </template>
@@ -42,7 +42,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
 </template>
diff --git a/doc/menu/CommandDoc.vue b/doc/menu/CommandDoc.vue
index 713c6b278..a32dbabc4 100644
--- a/doc/menu/CommandDoc.vue
+++ b/doc/menu/CommandDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -35,7 +35,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
         <Toast />
     </div>
@@ -68,7 +68,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
         <Toast />
     </div>
diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index a6d749f13..160de6691 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Menu supports single level of grouping by defining children with the <i>items</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -46,7 +46,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
 </template>
@@ -90,7 +90,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
 </template>
diff --git a/doc/menu/PopupDoc.vue b/doc/menu/PopupDoc.vue
index fb96a76a6..1121fb21a 100644
--- a/doc/menu/PopupDoc.vue
+++ b/doc/menu/PopupDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-ellipsis-v" plain @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
     </div>
@@ -35,7 +35,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
     </div>
@@ -67,7 +67,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
     </div>
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 5cb52ec5d..79898bcdc 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -68,7 +68,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -116,7 +116,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Menu :model="items">
             <template #item="{ item, props }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 0917b799d..84ec79566 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -5,11 +5,11 @@
             <i>end</i> are provided to embed content before or after the menu.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Menu :model="items" class="w-full md:w-15rem">
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
             <template #start>
-                <span class="inline-flex align-items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                             fill="var(--p-primary-color)"
@@ -26,17 +26,17 @@
                 <span class="text-primary font-bold">{{ item.label }}</span>
             </template>
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column align-items-start">
+                    <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
@@ -96,10 +96,10 @@ export default {
             ],
             code: {
                 basic: `
-<Menu :model="items" class="w-full md:w-15rem">
+<Menu :model="items" class="w-full md:w-60">
     <template #start>
-        <span class="inline-flex align-items-center gap-1 px-2 py-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+        <span class="inline-flex items-center gap-1 px-2 py-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                 <path d="..." fill="var(--p-primary-color)" />
                 <path d="..." fill="var(--text-color)" />
             </svg>
@@ -110,17 +110,17 @@ export default {
         <span class="text-primary font-bold">{{ item.label }}</span>
     </template>
     <template #item="{ item, props }">
-        <a v-ripple class="flex align-items-center" v-bind="props.action">
+        <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
     <template #end>
-        <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
+        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-            <span class="inline-flex flex-column align-items-start">
+            <span class="inline-flex flex-col items-start">
                 <span class="font-bold">Amy Elsner</span>
                 <span class="text-sm">Admin</span>
             </span>
@@ -130,11 +130,11 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Menu :model="items" class="w-full md:w-15rem">
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
             <template #start>
-                <span class="inline-flex align-items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                             fill="var(--p-primary-color)"
@@ -151,17 +151,17 @@ export default {
                 <span class="text-primary font-bold">{{ item.label }}</span>
             </template>
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column align-items-start">
+                    <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
@@ -225,11 +225,11 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Menu :model="items" class="w-full md:w-15rem">
+    <div class="card flex justify-center">
+        <Menu :model="items" class="w-full md:w-60">
             <template #start>
-                <span class="inline-flex align-items-center gap-1 px-2 py-2">
-                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <span class="inline-flex items-center gap-1 px-2 py-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                             fill="var(--p-primary-color)"
@@ -246,17 +246,17 @@ export default {
                 <span class="text-primary font-bold">{{ item.label }}</span>
             </template>
             <template #item="{ item, props }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column align-items-start">
+                    <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 66e850cef..5ae894725 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -7,7 +7,7 @@
     <div class="card">
         <Menubar :model="items">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -19,17 +19,17 @@
                 </svg>
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
-                <div class="flex align-items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                 </div>
             </template>
@@ -101,23 +101,23 @@ export default {
                 basic: `
 <Menubar :model="items">
     <template #start>
-        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
             <path d="..." fill="var(--p-primary-color)" />
             <path d="..." fill="var(--text-color)" />
         </svg>
     </template>
     <template #item="{ item, props, hasSubmenu, root }">
-        <a v-ripple class="flex align-items-center" v-bind="props.action">
+        <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
         </a>
     </template>
     <template #end>
-        <div class="flex align-items-center gap-2">
-            <InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+        <div class="flex items-center gap-2">
+            <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
         </div>
     </template>
@@ -128,7 +128,7 @@ export default {
     <div class="card">
         <Menubar :model="items">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -140,17 +140,17 @@ export default {
                 </svg>
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
-                <div class="flex align-items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                 </div>
             </template>
@@ -227,7 +227,7 @@ export default {
     <div class="card">
         <Menubar :model="items">
             <template #start>
-                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                         fill="var(--p-primary-color)"
@@ -239,17 +239,17 @@ export default {
                 </svg>
             </template>
             <template #item="{ item, props, hasSubmenu, root }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
-                <div class="flex align-items-center gap-2">
-                    <InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+                <div class="flex items-center gap-2">
+                    <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                 </div>
             </template>
diff --git a/doc/metergroup/TemplateDoc.vue b/doc/metergroup/TemplateDoc.vue
index dabb5268a..cc1cb3685 100644
--- a/doc/metergroup/TemplateDoc.vue
+++ b/doc/metergroup/TemplateDoc.vue
@@ -5,16 +5,16 @@
     <div class="card">
         <MeterGroup :value="value" labelPosition="start">
             <template #label="{ value }">
-                <div class="flex flex-wrap gap-3">
+                <div class="flex flex-wrap gap-4">
                     <template v-for="val of value" :key="val.label">
                         <Card class="flex-1">
                             <template #content>
-                                <div class="flex justify-content-between gap-5">
-                                    <div class="flex flex-column gap-1">
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
                                         <span class="text-secondary text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
-                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
                                         <i :class="val.icon" />
                                     </span>
                                 </div>
@@ -27,14 +27,14 @@
                 <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2 relative">
+                <div class="flex justify-between mt-4 mb-2 relative">
                     <span>Storage</span>
                     <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span class="font-medium">1TB</span>
                 </div>
             </template>
             <template #end>
-                <div class="flex justify-content-between mt-3">
+                <div class="flex justify-between mt-4">
                     <Button label="Manage Storage" outlined size="small" />
                     <Button label="Update Plan" size="small" />
                 </div>
@@ -58,16 +58,16 @@ export default {
                 basic: `
 <MeterGroup :value="value" labelPosition="start">
     <template #label="{ value }">
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-wrap gap-4">
             <template v-for="val of value" :key="val.label">
                 <Card class="flex-1">
                     <template #content>
-                        <div class="flex justify-content-between gap-5">
-                            <div class="flex flex-column gap-1">
+                        <div class="flex justify-between gap-8">
+                            <div class="flex flex-col gap-1">
                                 <span class="text-secondary text-sm">{{ val.label }}</span>
                                 <span class="font-bold text-lg">{{ val.value }}%</span>
                             </div>
-                            <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                            <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
                                 <i :class="val.icon" />
                             </span>
                         </div>
@@ -80,14 +80,14 @@ export default {
         <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
     </template>
     <template #start="{ totalPercent }">
-        <div class="flex justify-content-between mt-3 mb-2 relative">
+        <div class="flex justify-between mt-4 mb-2 relative">
             <span>Storage</span>
             <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
             <span class="font-medium">1TB</span>
         </div>
     </template>
     <template #end>
-        <div class="flex justify-content-between mt-3">
+        <div class="flex justify-between mt-4">
             <Button label="Manage Storage" outlined size="small" />
             <Button label="Update Plan" size="small" />
         </div>
@@ -99,16 +99,16 @@ export default {
     <div class="card">
         <MeterGroup :value="value" labelPosition="start">
             <template #label="{ value }">
-                <div class="flex flex-wrap gap-3">
+                <div class="flex flex-wrap gap-4">
                     <template v-for="val of value" :key="val.label">
                         <Card class="flex-1">
                             <template #content>
-                                <div class="flex justify-content-between gap-5">
-                                    <div class="flex flex-column gap-1">
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
                                         <span class="text-secondary text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
-                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
                                         <i :class="val.icon" />
                                     </span>
                                 </div>
@@ -121,14 +121,14 @@ export default {
                 <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2 relative">
+                <div class="flex justify-between mt-4 mb-2 relative">
                     <span>Storage</span>
                     <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span class="font-medium">1TB</span>
                 </div>
             </template>
             <template #end>
-                <div class="flex justify-content-between mt-3">
+                <div class="flex justify-between mt-4">
                     <Button label="Manage Storage" outlined size="small" />
                     <Button label="Update Plan" size="small" />
                 </div>
@@ -157,16 +157,16 @@ export default {
     <div class="card">
         <MeterGroup :value="value" labelPosition="start">
             <template #label="{ value }">
-                <div class="flex flex-wrap gap-3">
+                <div class="flex flex-wrap gap-4">
                     <template v-for="val of value" :key="i">
                         <Card class="flex-1">
                             <template #content>
-                                <div class="flex justify-content-between gap-5">
-                                    <div class="flex flex-column gap-1">
+                                <div class="flex justify-between gap-8">
+                                    <div class="flex flex-col gap-1">
                                         <span class="text-secondary text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
-                                    <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
+                                    <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
                                         <i :class="val.icon" />
                                     </span>
                                 </div>
@@ -179,14 +179,14 @@ export default {
                 <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex justify-content-between mt-3 mb-2 relative">
+                <div class="flex justify-between mt-4 mb-2 relative">
                     <span>Storage</span>
                     <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
                     <span class="font-medium">1TB</span>
                 </div>
             </template>
             <template #end>
-                <div class="flex justify-content-between mt-3">
+                <div class="flex justify-between mt-4">
                     <Button label="Manage Storage" outlined size="small" />
                     <Button label="Update Plan" size="small" />
                 </div>
diff --git a/doc/metergroup/VerticalDoc.vue b/doc/metergroup/VerticalDoc.vue
index fc0565d9b..ee8a757b6 100644
--- a/doc/metergroup/VerticalDoc.vue
+++ b/doc/metergroup/VerticalDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center" style="height: 360px">
+    <div class="card flex justify-center" style="height: 360px">
         <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
     <DocSectionCode :code="code" />
@@ -24,7 +24,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center" style="height: 360px">
+    <div class="card flex justify-center" style="height: 360px">
         <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
 </template>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center" style="height: 360px">
+    <div class="card flex justify-center" style="height: 360px">
         <MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
     </div>
 </template>
diff --git a/doc/migration/v4/breakingchanges/ComponentsDoc.vue b/doc/migration/v4/breakingchanges/ComponentsDoc.vue
index 96ee178a5..87f8aec7b 100644
--- a/doc/migration/v4/breakingchanges/ComponentsDoc.vue
+++ b/doc/migration/v4/breakingchanges/ComponentsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The team has put in a great effort to migrate the entire UI suite with minor breaking changes. Two components have been removed by design.</p>
     </DocSectionText>
-    <ul class="flex flex-column gap-2">
+    <ul class="flex flex-col gap-2">
         <li><i>DataViewLayoutOptions</i> is removed, use SelectButton instead as in the demo.</li>
         <li><i>TriStateCheckbox</i> is removed, use Checkbox with the new <i>indeterminate</i> state as a replacement.</li>
         <li>
diff --git a/doc/migration/v4/breakingchanges/StyledModeDoc.vue b/doc/migration/v4/breakingchanges/StyledModeDoc.vue
index 261923a67..1971a6dbb 100644
--- a/doc/migration/v4/breakingchanges/StyledModeDoc.vue
+++ b/doc/migration/v4/breakingchanges/StyledModeDoc.vue
@@ -6,7 +6,7 @@
             <NuxtLink to="/theming/styled">styled mode</NuxtLink> for details.
         </p>
     </DocSectionText>
-    <ul class="flex flex-column gap-2">
+    <ul class="flex flex-col gap-2">
         <li>Files under <i>primevue/resources</i> such as the themes, migration to new styled mode is necessary.</li>
         <li><i>switchTheme</i> function, use the new APIs like <i>usePreset</i> instead to dynamic theme switching.</li>
         <li>The legacy Tailwind preset at <i>primevue/passthrough/tailwind</i>, migrate to the <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project.</li>
diff --git a/doc/multiselect/BasicDoc.vue b/doc/multiselect/BasicDoc.vue
index c6a81e593..4e88c4afb 100644
--- a/doc/multiselect/BasicDoc.vue
+++ b/doc/multiselect/BasicDoc.vue
@@ -5,8 +5,8 @@
             that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -26,13 +26,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    :maxSelectedLabels="3" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -55,9 +55,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/ChipsDoc.vue b/doc/multiselect/ChipsDoc.vue
index 6001823c2..3dbe2e740 100644
--- a/doc/multiselect/ChipsDoc.vue
+++ b/doc/multiselect/ChipsDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -23,13 +23,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    :maxSelectedLabels="3" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -52,9 +52,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/DisabledDoc.vue b/doc/multiselect/DisabledDoc.vue
index 1347a8072..503d747af 100644
--- a/doc/multiselect/DisabledDoc.vue
+++ b/doc/multiselect/DisabledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
+<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="flex justify-content-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
+    <div class="flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -29,8 +29,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex justify-content-center">
-        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
+    <div class="flex justify-center">
+        <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/FilledDoc.vue b/doc/multiselect/FilledDoc.vue
index 17fdaa355..edc322c58 100644
--- a/doc/multiselect/FilledDoc.vue
+++ b/doc/multiselect/FilledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -23,13 +23,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    :maxSelectedLabels="3" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -52,9 +52,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/FilterDoc.vue b/doc/multiselect/FilterDoc.vue
index 6fc47f8d8..fc93eb63f 100644
--- a/doc/multiselect/FilterDoc.vue
+++ b/doc/multiselect/FilterDoc.vue
@@ -5,8 +5,8 @@
             fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -26,13 +26,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    :maxSelectedLabels="3" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -55,9 +55,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 0202968d9..c3fe31a60 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
@@ -25,15 +25,15 @@ export default {
             ],
             code: {
                 basic: `
-<FloatLabel class="w-full md:w-20rem">
+<FloatLabel class="w-full md:w-80">
     <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
     <label for="ms-cities">MultiSelect</label>
 </FloatLabel>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
@@ -59,8 +59,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
diff --git a/doc/multiselect/GroupDoc.vue b/doc/multiselect/GroupDoc.vue
index 5f96e7f53..6b3da3766 100644
--- a/doc/multiselect/GroupDoc.vue
+++ b/doc/multiselect/GroupDoc.vue
@@ -5,10 +5,10 @@
             of a group.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -57,9 +57,9 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
     <template #optiongroup="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
             <div>{{ slotProps.option.label }}</div>
         </div>
@@ -68,10 +68,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -124,10 +124,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index 4d8cf1ba3..8a1b2a3f1 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -23,13 +23,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
+    :maxSelectedLabels="3" invalid class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" invalid class="w-full md:w-80" />
     </div>
 </template>
 
@@ -52,9 +52,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
+            :maxSelectedLabels="3" invalid class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/multiselect/LoadingStateDoc.vue b/doc/multiselect/LoadingStateDoc.vue
index f2a60a008..0ad78452f 100644
--- a/doc/multiselect/LoadingStateDoc.vue
+++ b/doc/multiselect/LoadingStateDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
+<MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
     </div>
 </template>
 
@@ -28,8 +28,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
+    <div class="card flex justify-center">
+        <MultiSelect placeholder="Loading..." loading class="w-full md:w-80"></MultiSelect>
     </div>
 </template>
 
diff --git a/doc/multiselect/TemplateDoc.vue b/doc/multiselect/TemplateDoc.vue
index 10813b0c3..908e67214 100644
--- a/doc/multiselect/TemplateDoc.vue
+++ b/doc/multiselect/TemplateDoc.vue
@@ -5,16 +5,16 @@
             <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
             <template #footer>
-                <div class="py-2 px-3">
+                <div class="py-2 px-4">
                     <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
                 </div>
             </template>
@@ -42,15 +42,15 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
     <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
     <template #footer>
-        <div class="py-2 px-3">
+        <div class="py-2 px-4">
             <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
         </div>
     </template>
@@ -58,16 +58,16 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
             <template #footer>
-                <div class="py-2 px-3">
+                <div class="py-2 px-4">
                     <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
                 </div>
             </template>
@@ -99,16 +99,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
             <template #footer>
-                <div class="py-2 px-3">
+                <div class="py-2 px-4">
                     <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
                 </div>
             </template>
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index ec4cadb7c..5830ef027 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -5,7 +5,7 @@
             <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by MultiSelect.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect
             v-model="selectedItems"
             :options="items"
@@ -18,7 +18,7 @@
             :virtualScrollerOptions="{ itemSize: 44 }"
             filter
             placeholder="Select Item"
-            class="w-full md:w-20rem"
+            class="w-full md:w-80"
         />
     </div>
     <DocSectionCode :code="code" />
@@ -34,13 +34,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
+    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -67,9 +67,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/nuxt/UsageDoc.vue b/doc/nuxt/UsageDoc.vue
index 7d7d86008..cc92ab8cd 100644
--- a/doc/nuxt/UsageDoc.vue
+++ b/doc/nuxt/UsageDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The nuxt-primevue module registers the components automatically so you may start using them instantly. See the <NuxtLink to="/nuxt/#components">Components</NuxtLink> section to customize how the components are loaded and named.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index fa39032b6..b8ca04e80 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -21,7 +21,7 @@ export default {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-14rem">
+<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
     <template #item="{ item }">
         {{ item.name }}
     </template>
@@ -29,8 +29,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-14rem">
+    <div class="card lg:flex lg:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -54,8 +54,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card lg:flex lg:justify-content-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-14rem">
+    <div class="card lg:flex lg:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index 668e83656..1c2232da4 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -2,14 +2,14 @@
     <DocSectionText v-bind="$attrs">
         <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
     </DocSectionText>
-    <div class="card lg:flex lg:justify-content-center">
+    <div class="card lg:flex lg:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
@@ -32,11 +32,11 @@ export default {
                 basic: `
 <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
     <template #item="{ item }">
-        <div class="flex flex-wrap p-1 align-items-center gap-3">
-            <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-            <div class="flex-1 flex flex-column gap-1">
+        <div class="flex flex-wrap p-1 items-center gap-4">
+            <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
-                <div class="flex align-items-center gap-1">
+                <div class="flex items-center gap-1">
                     <i class="pi pi-tag text-sm text-secondary"></i>
                     <span class="text-sm text-secondary">{{ item.category }}</span>
                 </div>
@@ -48,14 +48,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card lg:flex lg:justify-content-center">
+    <div class="card lg:flex lg:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
@@ -83,14 +83,14 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card lg:flex lg:justify-content-center">
+    <div class="card lg:flex lg:justify-center">
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
diff --git a/doc/organizationchart/ColoredDoc.vue b/doc/organizationchart/ColoredDoc.vue
index e6d88aab8..455611aec 100644
--- a/doc/organizationchart/ColoredDoc.vue
+++ b/doc/organizationchart/ColoredDoc.vue
@@ -5,9 +5,9 @@
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
-                <div class="flex flex-column">
-                    <div class="flex flex-column align-items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                         <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                         <span>{{ slotProps.node.data.title }}</span>
                     </div>
@@ -28,7 +28,7 @@ export default {
             data: {
                 key: '0',
                 type: 'person',
-                styleClass: 'bg-indigo-100 text-indigo-900 border-round-xl',
+                styleClass: 'bg-indigo-100 text-indigo-900 rounded-xl',
                 data: {
                     image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
                     name: 'Amy Elsner',
@@ -38,7 +38,7 @@ export default {
                     {
                         key: '0_0',
                         type: 'person',
-                        styleClass: 'bg-purple-100 text-purple-900 border-round-xl',
+                        styleClass: 'bg-purple-100 text-purple-900 rounded-xl',
                         data: {
                             image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
                             name: 'Anna Fali',
@@ -47,18 +47,18 @@ export default {
                         children: [
                             {
                                 label: 'Sales',
-                                styleClass: 'bg-purple-100 text-purple-900 border-round-xl'
+                                styleClass: 'bg-purple-100 text-purple-900 rounded-xl'
                             },
                             {
                                 label: 'Marketing',
-                                styleClass: 'bg-purple-100 text-purple-900 border-round-xl'
+                                styleClass: 'bg-purple-100 text-purple-900 rounded-xl'
                             }
                         ]
                     },
                     {
                         key: '0_1',
                         type: 'person',
-                        styleClass: 'bg-teal-100 text-teal-900 border-round-xl',
+                        styleClass: 'bg-teal-100 text-teal-900 rounded-xl',
                         data: {
                             image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
                             name: 'Stephen Shaw',
@@ -67,11 +67,11 @@ export default {
                         children: [
                             {
                                 label: 'Development',
-                                styleClass: 'bg-teal-100 text-teal-900 border-round-xl'
+                                styleClass: 'bg-teal-100 text-teal-900 rounded-xl'
                             },
                             {
                                 label: 'UI/UX Design',
-                                styleClass: 'bg-teal-100 text-teal-900 border-round-xl'
+                                styleClass: 'bg-teal-100 text-teal-900 rounded-xl'
                             }
                         ]
                     }
@@ -81,9 +81,9 @@ export default {
                 basic: `
 <OrganizationChart :value="data" collapsible>
     <template #person="slotProps">
-        <div class="flex flex-column">
-            <div class="flex flex-column align-items-center">
-                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+        <div class="flex flex-col">
+            <div class="flex flex-col items-center">
+                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                 <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                 <span>{{ slotProps.node.data.title }}</span>
             </div>
@@ -99,9 +99,9 @@ export default {
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
-                <div class="flex flex-column">
-                    <div class="flex flex-column align-items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                         <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                         <span>{{ slotProps.node.data.title }}</span>
                     </div>
@@ -121,7 +121,7 @@ export default {
             data: {
                 key: '0',
                 type: 'person',
-                styleClass: 'bg-indigo-100 text-white border-round-xl',
+                styleClass: 'bg-indigo-100 text-white rounded-xl',
                 data: {
                     image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
                     name: 'Amy Elsner',
@@ -131,7 +131,7 @@ export default {
                     {
                         key: '0_0',
                         type: 'person',
-                        styleClass: 'bg-purple-100 text-white border-round-xl',
+                        styleClass: 'bg-purple-100 text-white rounded-xl',
                         data: {
                             image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
                             name: 'Anna Fali',
@@ -140,18 +140,18 @@ export default {
                         children: [
                             {
                                 label: 'Sales',
-                                styleClass: 'bg-purple-100 text-white border-round-xl'
+                                styleClass: 'bg-purple-100 text-white rounded-xl'
                             },
                             {
                                 label: 'Marketing',
-                                styleClass: 'bg-purple-100 text-white border-round-xl'
+                                styleClass: 'bg-purple-100 text-white rounded-xl'
                             }
                         ]
                     },
                     {
                         key: '0_1',
                         type: 'person',
-                        styleClass: 'bg-teal-100 text-white border-round-xl',
+                        styleClass: 'bg-teal-100 text-white rounded-xl',
                         data: {
                             image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
                             name: 'Stephen Shaw',
@@ -160,11 +160,11 @@ export default {
                         children: [
                             {
                                 label: 'Development',
-                                styleClass: 'bg-teal-100 text-white border-round-xl'
+                                styleClass: 'bg-teal-100 text-white rounded-xl'
                             },
                             {
                                 label: 'UI/UX Design',
-                                styleClass: 'bg-teal-100 text-white border-round-xl'
+                                styleClass: 'bg-teal-100 text-white rounded-xl'
                             }
                         ]
                     }
@@ -180,9 +180,9 @@ export default {
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
-                <div class="flex flex-column">
-                    <div class="flex flex-column align-items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                         <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                         <span>{{ slotProps.node.data.title }}</span>
                     </div>
@@ -201,7 +201,7 @@ import { ref } from "vue";
 const data = ref({
     key: '0',
     type: 'person',
-    styleClass: 'bg-indigo-100 text-white border-round-xl',
+    styleClass: 'bg-indigo-100 text-white rounded-xl',
     data: {
         image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
         name: 'Amy Elsner',
@@ -211,7 +211,7 @@ const data = ref({
         {
             key: '0_0',
             type: 'person',
-            styleClass: 'bg-purple-100 text-white border-round-xl',
+            styleClass: 'bg-purple-100 text-white rounded-xl',
             data: {
                 image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
                 name: 'Anna Fali',
@@ -220,18 +220,18 @@ const data = ref({
             children: [
                 {
                     label: 'Sales',
-                    styleClass: 'bg-purple-100 text-white border-round-xl'
+                    styleClass: 'bg-purple-100 text-white rounded-xl'
                 },
                 {
                     label: 'Marketing',
-                    styleClass: 'bg-purple-100 text-white border-round-xl'
+                    styleClass: 'bg-purple-100 text-white rounded-xl'
                 }
             ]
         },
         {
             key: '0_1',
             type: 'person',
-            styleClass: 'bg-teal-100 text-white border-round-xl',
+            styleClass: 'bg-teal-100 text-white rounded-xl',
             data: {
                 image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
                 name: 'Stephen Shaw',
@@ -240,11 +240,11 @@ const data = ref({
             children: [
                 {
                     label: 'Development',
-                    styleClass: 'bg-teal-100 text-white border-round-xl'
+                    styleClass: 'bg-teal-100 text-white rounded-xl'
                 },
                 {
                     label: 'UI/UX Design',
-                    styleClass: 'bg-teal-100 text-white border-round-xl'
+                    styleClass: 'bg-teal-100 text-white rounded-xl'
                 }
             ]
         }
diff --git a/doc/organizationchart/SelectionDoc.vue b/doc/organizationchart/SelectionDoc.vue
index bf885a0a3..30ca5f0ce 100644
--- a/doc/organizationchart/SelectionDoc.vue
+++ b/doc/organizationchart/SelectionDoc.vue
@@ -8,9 +8,9 @@
     <div class="card overflow-x-auto">
         <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
             <template #person="slotProps">
-                <div class="flex flex-column">
-                    <div class="flex flex-column align-items-center">
-                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+                <div class="flex flex-col">
+                    <div class="flex flex-col items-center">
+                        <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                         <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                         <span>{{ slotProps.node.data.title }}</span>
                     </div>
@@ -82,9 +82,9 @@ export default {
                 basic: `
 <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
     <template #person="slotProps">
-        <div class="flex flex-column">
-            <div class="flex flex-column align-items-center">
-                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+        <div class="flex flex-col">
+            <div class="flex flex-col items-center">
+                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                 <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                 <span>{{ slotProps.node.data.title }}</span>
             </div>
@@ -99,9 +99,9 @@ export default {
 <template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
-            <div class="flex flex-column">
-                <div class="flex flex-column align-items-center">
-                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+            <div class="flex flex-col">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                     <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                     <span>{{ slotProps.node.data.title }}</span>
                 </div>
@@ -176,9 +176,9 @@ export default {
 <template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
-            <div class="flex flex-column">
-                <div class="flex flex-column align-items-center">
-                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
+            <div class="flex flex-col">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-4 w-12 h-12" />
                     <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                     <span>{{ slotProps.node.data.title }}</span>
                 </div>
diff --git a/doc/organizationchart/TemplateDoc.vue b/doc/organizationchart/TemplateDoc.vue
index 5f18a63c6..123c3b9a7 100644
--- a/doc/organizationchart/TemplateDoc.vue
+++ b/doc/organizationchart/TemplateDoc.vue
@@ -5,9 +5,9 @@
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
-                <div class="flex flex-column align-items-center">
+                <div class="flex flex-col items-center">
                     <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
-                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
             <template #default="slotProps">
@@ -74,9 +74,9 @@ export default {
                 basic: `
 <OrganizationChart :value="data" collapsible>
     <template #country="slotProps">
-        <div class="flex flex-column align-items-center">
+        <div class="flex flex-col items-center">
             <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-            <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+            <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
         </div>
     </template>
     <template #default="slotProps">
@@ -89,9 +89,9 @@ export default {
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
-                <div class="flex flex-column align-items-center">
+                <div class="flex flex-col items-center">
                     <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
             <template #default="slotProps">
@@ -163,9 +163,9 @@ export default {
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
-                <div class="flex flex-column align-items-center">
+                <div class="flex flex-col items-center">
                     <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
-                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                    <div class="mt-4 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
             <template #default="slotProps">
diff --git a/doc/paginator/CurrentPageReportDoc.vue b/doc/paginator/CurrentPageReportDoc.vue
index c133247a1..17ac8b68c 100644
--- a/doc/paginator/CurrentPageReportDoc.vue
+++ b/doc/paginator/CurrentPageReportDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;</p>
-        <ul class="mb-4 line-height-4">
+        <ul class="mb-6 leading-loose">
             <li>{currentPage}</li>
             <li>{totalPages}</li>
             <li>{rows}</li>
diff --git a/doc/paginator/TemplateDoc.vue b/doc/paginator/TemplateDoc.vue
index 2f80e4d2b..81f7e2f01 100644
--- a/doc/paginator/TemplateDoc.vue
+++ b/doc/paginator/TemplateDoc.vue
@@ -4,7 +4,7 @@
             Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
             can be placed inside a paginator in any order.
         </p>
-        <ul class="mb-4 line-height-4">
+        <ul class="mb-6 leading-loose">
             <li>FirstPageLink</li>
             <li>PrevPageLink</li>
             <li>PageLinks</li>
@@ -19,8 +19,8 @@
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
-        <div class="p-3 text-center">
-            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="border-round w-full sm:w-30rem" />
+        <div class="p-4 text-center">
+            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="rounded w-full sm:w-[30rem]" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -35,8 +35,8 @@ export default {
                 basic: `
 <Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
-<div class="p-3 text-center">
-    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
+<div class="p-4 text-center">
+    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
 </div>
 `,
                 options: `
@@ -44,8 +44,8 @@ export default {
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
-        <div class="p-3 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
+        <div class="p-4 text-center">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
         </div>
     </div>
 </template>
@@ -65,8 +65,8 @@ export default {
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
-        <div class="p-3 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
+        <div class="p-4 text-center">
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="rounded w-full sm:w-[30rem]" />
         </div>
     </div>
 </template>
diff --git a/doc/panel/TemplateDoc.vue b/doc/panel/TemplateDoc.vue
index 2709db192..376603932 100644
--- a/doc/panel/TemplateDoc.vue
+++ b/doc/panel/TemplateDoc.vue
@@ -5,18 +5,18 @@
     <div class="card">
         <Panel toggleable>
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <template #footer>
-                <div class="flex flex-wrap align-items-center justify-content-between gap-3">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="text-color-secondary">Updated 2 hours ago</span>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
@@ -57,18 +57,18 @@ export default {
                 basic: `
 <Panel toggleable>
     <template #header>
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
             <span class="font-bold">Amy Elsner</span>
         </div>
     </template>
     <template #footer>
-        <div class="flex flex-wrap align-items-center justify-content-between gap-3">
-            <div class="flex align-items-center gap-2">
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex items-center gap-2">
                 <Button icon="pi pi-user" rounded text></Button>
                 <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
             </div>
-            <span class="text-color-secondary">Updated 2 hours ago</span>
+            <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
         </div>
     </template>
     <template #icons>
@@ -87,18 +87,18 @@ export default {
         <Toast />
         <Panel toggleable>
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <template #footer>
-                <div class="flex flex-wrap align-items-center justify-content-between gap-3">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="text-color-secondary">Updated 2 hours ago</span>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
@@ -153,18 +153,18 @@ export default {
         <Toast />
         <Panel toggleable>
             <template #header>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
             <template #footer>
-                <div class="flex flex-wrap align-items-center justify-content-between gap-3">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="text-color-secondary">Updated 2 hours ago</span>
+                    <span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
diff --git a/doc/panelmenu/BasicDoc.vue b/doc/panelmenu/BasicDoc.vue
index 19d1b86ed..8499c5cf2 100644
--- a/doc/panelmenu/BasicDoc.vue
+++ b/doc/panelmenu/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>PanelMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -96,8 +96,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -190,8 +190,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/panelmenu/CommandDoc.vue b/doc/panelmenu/CommandDoc.vue
index c24bc2dca..7f4c59e32 100644
--- a/doc/panelmenu/CommandDoc.vue
+++ b/doc/panelmenu/CommandDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -75,8 +75,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
         <Toast />
     </div>
 </template>
@@ -148,8 +148,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80" />
         <Toast />
     </div>
 </template>
diff --git a/doc/panelmenu/ControlledDoc.vue b/doc/panelmenu/ControlledDoc.vue
index 639c7305a..9368ed18f 100644
--- a/doc/panelmenu/ControlledDoc.vue
+++ b/doc/panelmenu/ControlledDoc.vue
@@ -5,9 +5,9 @@
             value is a boolean.
         </p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -89,9 +89,9 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
     </div>
 </template>
 
@@ -199,9 +199,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button type="button" label="Toggle All" text @click="toggleAll" />
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
index b4df9a25f..b36fbdd65 100644
--- a/doc/panelmenu/MultipleDoc.vue
+++ b/doc/panelmenu/MultipleDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Only one root menuitem at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple root menuitems.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -96,8 +96,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
     </div>
 </template>
 
@@ -190,8 +190,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" multiple class="w-full md:w-20rem" />
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" multiple class="w-full md:w-80" />
     </div>
 </template>
 
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index b352e913e..37395ba9b 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -2,16 +2,16 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-color">{{ item.label }}</span>
+                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
@@ -72,12 +72,12 @@ export default {
 <PanelMenu :model="items">
     <template #item="{ item }">
         <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+            <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                 <span :class="item.icon" />
-                <span class="ml-2 text-color">{{ item.label }}</span>
+                <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
             </a>
         </router-link>
-        <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+        <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
@@ -87,16 +87,16 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-color">{{ item.label }}</span>
+                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
@@ -158,16 +158,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                    <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-color">{{ item.label }}</span>
+                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
diff --git a/doc/panelmenu/TemplateDoc.vue b/doc/panelmenu/TemplateDoc.vue
index 4566eaaf2..0e9544dff 100644
--- a/doc/panelmenu/TemplateDoc.vue
+++ b/doc/panelmenu/TemplateDoc.vue
@@ -2,14 +2,14 @@
     <DocSectionText v-bind="$attrs">
         <p>PanelMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
@@ -88,25 +88,25 @@ export default {
                 basic: `
 <PanelMenu :model="items">
     <template #item="{ item }">
-        <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
             <span :class="[item.icon, 'text-primary']" />
             <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
 </PanelMenu>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
@@ -187,14 +187,14 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index f99e79cf1..bb996eea5 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -24,14 +24,14 @@
                     class: [
                         'border-primary',
                         {
-                            'bg-primary': options.state.d_collapsed,
-                            'bg-primary-reverse': !options.state.d_collapsed
+                            'bg-primary text-primary-contrast': options.state.d_collapsed,
+                            'text-primary bg-primary-contrast': !options.state.d_collapsed
                         }
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: 'text-xl',
-                toggler: () => 'bg-primary hover:bg-primary-reverse'
+                toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
             }"
         >
             <p class="m-0">
@@ -59,14 +59,14 @@ export default {
             class: [
                 'border-primary',
                 {
-                    'bg-primary': options.state.d_collapsed,
-                    'bg-primary-reverse': !options.state.d_collapsed
+                    'bg-primary text-primary-contrast': options.state.d_collapsed,
+                    'text-primary bg-primary-contrast': !options.state.d_collapsed
                 }
             ]
         }),
         content: { class: 'border-primary text-lg text-primary-700' },
         title: 'text-xl',                                     // OR { class: 'text-xl' }
-        toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
+        toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'  // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
     }">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -87,14 +87,14 @@ export default {
                     class: [
                         'border-primary',
                         {
-                            'bg-primary': options.state.d_collapsed,
-                            'bg-primary-reverse': !options.state.d_collapsed
+                            'bg-primary text-primary-contrast': options.state.d_collapsed,
+                            'text-primary bg-primary-contrast': !options.state.d_collapsed
                         }
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: 'text-xl',                                     // OR { class: 'text-xl' }
-                toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'  // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -120,14 +120,14 @@ export default {
                     class: [
                         'border-primary',
                         {
-                            'bg-primary': options.state.d_collapsed,
-                            'bg-primary-reverse': !options.state.d_collapsed
+                            'bg-primary text-primary-contrast': options.state.d_collapsed,
+                            'text-primary bg-primary-contrast': !options.state.d_collapsed
                         }
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: 'text-xl',                                     // OR { class: 'text-xl' }
-                toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'  // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/passthrough/DeclarativeDoc.vue b/doc/passthrough/DeclarativeDoc.vue
index ccfbb7710..8543dd875 100644
--- a/doc/passthrough/DeclarativeDoc.vue
+++ b/doc/passthrough/DeclarativeDoc.vue
@@ -39,7 +39,7 @@ export default {
             code3: {
                 basic: `
 <Panel
-    pt:root:class="border-1 border-solid"
+    pt:root:class="border border-solid"
     pt:header:id="headerId"
     pt:header:data-test-id="testId"
     pt:header:class="bg-blue-500"
diff --git a/doc/passthrough/GlobalDoc.vue b/doc/passthrough/GlobalDoc.vue
index ca6f26f1e..e4e9a7fcf 100644
--- a/doc/passthrough/GlobalDoc.vue
+++ b/doc/passthrough/GlobalDoc.vue
@@ -23,12 +23,12 @@ app.use(PrimeVue, {
     pt: {
         panel: {
             header: {
-                class: 'bg-primary'
+                class: 'bg-primary text-primary-contrast'
             }
         },
         autocomplete: {
             input: {
-                root: 'w-16rem' // OR { class: 'w-16rem' }
+                root: 'w-64' // OR { class: 'w-64' }
             }
         }
     }
diff --git a/doc/password/BasicDoc.vue b/doc/password/BasicDoc.vue
index b04b3660c..dc96c87fc 100644
--- a/doc/password/BasicDoc.vue
+++ b/doc/password/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way value binding is defined using <i>v-model</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" />
     </div>
 </template>
diff --git a/doc/password/DisabledDoc.vue b/doc/password/DisabledDoc.vue
index a894d8c9f..782daf6cf 100644
--- a/doc/password/DisabledDoc.vue
+++ b/doc/password/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password disabled placeholder="Disabled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password disabled placeholder="Disabled" />
     </div>
 </template>
diff --git a/doc/password/FilledDoc.vue b/doc/password/FilledDoc.vue
index 624227ea0..e3d8ed17c 100644
--- a/doc/password/FilledDoc.vue
+++ b/doc/password/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" variant="filled" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" variant="filled" />
     </div>
 </template>
diff --git a/doc/password/FloatLabelDoc.vue b/doc/password/FloatLabelDoc.vue
index 6b9ca4140..05e3718bd 100644
--- a/doc/password/FloatLabelDoc.vue
+++ b/doc/password/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
@@ -45,7 +45,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index 4f866739d..f63eaa51f 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password invalid />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password invalid />
     </div>
 </template>
diff --git a/doc/password/LocaleDoc.vue b/doc/password/LocaleDoc.vue
index 04f2bb143..63a137505 100644
--- a/doc/password/LocaleDoc.vue
+++ b/doc/password/LocaleDoc.vue
@@ -5,7 +5,7 @@
             <NuxtLink to="/configuration/#locale">locale</NuxtLink>.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
     </div>
 </template>
@@ -39,7 +39,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
     </div>
 </template>
diff --git a/doc/password/MeterDoc.vue b/doc/password/MeterDoc.vue
index 4dc8ed91d..70703adc3 100644
--- a/doc/password/MeterDoc.vue
+++ b/doc/password/MeterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Strength meter is displayed as a popup while a value is being entered.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" />
     </div>
 </template>
diff --git a/doc/password/TemplateDoc.vue b/doc/password/TemplateDoc.vue
index 2f4901c83..01a6c95ef 100644
--- a/doc/password/TemplateDoc.vue
+++ b/doc/password/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
                 <h6>Pick a password</h6>
@@ -47,7 +47,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
                 <h6>Pick a password</h6>
@@ -78,7 +78,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
                 <h6>Pick a password</h6>
diff --git a/doc/password/ToggleMaskDoc.vue b/doc/password/ToggleMaskDoc.vue
index edf7d2308..6a6b2447e 100644
--- a/doc/password/ToggleMaskDoc.vue
+++ b/doc/password/ToggleMaskDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>toggleMask</i> is present, an icon is displayed to show the value as plain text.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" toggleMask />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" toggleMask />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Password v-model="value" toggleMask />
     </div>
 </template>
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index 1867f1ab1..1ab272ae3 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -5,11 +5,11 @@
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
@@ -33,11 +33,11 @@ export default {
                 basic: `
 <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
     <template #item="{ item }">
-        <div class="flex flex-wrap p-1 align-items-center gap-3">
-            <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-            <div class="flex-1 flex flex-column gap-1">
+        <div class="flex flex-wrap p-1 items-center gap-4">
+            <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
-                <div class="flex align-items-center gap-1">
+                <div class="flex items-center gap-1">
                     <i class="pi pi-tag text-sm text-secondary"></i>
                     <span class="text-sm text-secondary">{{ item.category }}</span>
                 </div>
@@ -52,11 +52,11 @@ export default {
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
@@ -87,11 +87,11 @@ export default {
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 align-items-center gap-3">
-                    <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
-                    <div class="flex-1 flex flex-column gap-1">
+                <div class="flex flex-wrap p-1 items-center gap-4">
+                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
-                        <div class="flex align-items-center gap-1">
+                        <div class="flex items-center gap-1">
                             <i class="pi pi-tag text-sm text-secondary"></i>
                             <span class="text-sm text-secondary">{{ item.category }}</span>
                         </div>
diff --git a/doc/popover/BasicDoc.vue b/doc/popover/BasicDoc.vue
index 5a6009edb..6effa3aba 100644
--- a/doc/popover/BasicDoc.vue
+++ b/doc/popover/BasicDoc.vue
@@ -2,37 +2,37 @@
     <DocSectionText v-bind="$attrs">
         <p>Popover is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
 
         <Popover ref="op">
-            <div class="flex flex-column gap-3 w-25rem">
+            <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
                     <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
                             <i class="pi pi-copy"></i>
                         </InputGroupAddon>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled></InputText>
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
                             <div>
                                 <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
                             </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
                                 <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
@@ -59,33 +59,33 @@ export default {
 <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <Popover ref="op">
-    <div class="flex flex-column gap-3 w-25rem">
+    <div class="flex flex-col gap-4 w-[25rem]">
         <div>
-            <span class="font-medium text-900 block mb-2">Share this document</span>
+            <span class="font-medium text-surface-900 block mb-2">Share this document</span>
             <InputGroup>
-                <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                 <InputGroupAddon>
                     <i class="pi pi-copy"></i>
                 </InputGroupAddon>
             </InputGroup>
         </div>
         <div>
-            <span class="font-medium text-900 block mb-2">Invite Member</span>
+            <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
             <InputGroup>
                 <InputText disabled />
                 <Button label="Invite" icon="pi pi-users"></Button>
             </InputGroup>
         </div>
         <div>
-            <span class="font-medium text-900 block mb-2">Team Members</span>
-            <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+            <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+            <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                     <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                     <div>
                         <span class="font-medium">{{ member.name }}</span>
-                        <div class="text-sm text-color-secondary">{{ member.email }}</div>
+                        <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
                     </div>
-                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                    <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
                         <span>{{ member.role }}</span>
                         <i class="pi pi-angle-down"></i>
                     </div>
@@ -97,37 +97,37 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
         <Popover ref="op">
-            <div class="flex flex-column gap-3 w-25rem">
+            <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
                     <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
                             <i class="pi pi-copy"></i>
                         </InputGroupAddon>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled />
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                             <div>
                                 <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
                             </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
                                 <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
@@ -160,37 +160,37 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
         <Popover ref="op">
-            <div class="flex flex-column gap-3 w-25rem">
+            <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-900 block mb-2">Share this document</span>
+                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
                     <InputGroup>
-                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
                             <i class="pi pi-copy"></i>
                         </InputGroupAddon>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Invite Member</span>
+                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled />
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-900 block mb-2">Team Members</span>
-                    <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                             <div>
                                 <span class="font-medium">{{ member.name }}</span>
-                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
                             </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
                                 <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
diff --git a/doc/popover/DataTableDoc.vue b/doc/popover/DataTableDoc.vue
index 433834a93..b4d30b9fa 100644
--- a/doc/popover/DataTableDoc.vue
+++ b/doc/popover/DataTableDoc.vue
@@ -3,18 +3,18 @@
         <p>An example that displays a DataTable inside a popup to select an item.</p>
     </DocSectionText>
 
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card border-round">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
             <div class="relative">
-                <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
+                <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
-            <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
+            <div class="flex items-center justify-between mt-4 mb-2">
+                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-600">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
@@ -22,7 +22,7 @@
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
@@ -46,15 +46,15 @@ export default {
 <Toast />
 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-<div v-if="selectedProduct" class="p-5 surface-card border-round">
+<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
     <div class="relative">
-        <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" />
+        <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" />
     </div>
-    <div class="flex align-items-center justify-content-between mt-3 mb-2">
-        <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-        <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
+    <div class="flex items-center justify-between mt-4 mb-2">
+        <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
+        <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
     </div>
-    <span class="text-600">{{ selectedProduct.category }}</span>
+    <span class="text-surface-600">{{ selectedProduct.category }}</span>
 </div>
 
 <Popover ref="op" appendTo="body">
@@ -62,7 +62,7 @@ export default {
         <Column field="name" header="Name" sortable style="width: 50%"></Column>
         <Column header="Image" style="width: 20%">
             <template #body="slotProps">
-                <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
+                <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
             </template>
         </Column>
         <Column field="price" header="Price" sortable style="width: 30%">
@@ -75,19 +75,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card border-round">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
             <div class="relative">
-                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
+                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
-            <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
+            <div class="flex items-center justify-between mt-4 mb-2">
+                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-600">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
@@ -95,7 +95,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
@@ -137,19 +137,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card border-round">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
             <div class="relative">
-                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
+                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
-            <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
+            <div class="flex items-center justify-between mt-4 mb-2">
+                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-600">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
@@ -157,7 +157,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
diff --git a/doc/progressspinner/BasicDoc.vue b/doc/progressspinner/BasicDoc.vue
index 87fb1fdf5..3b4ad63c5 100644
--- a/doc/progressspinner/BasicDoc.vue
+++ b/doc/progressspinner/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>An infinite spin animation is displayed by default.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner />
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner />
     </div>
 </template>
@@ -28,7 +28,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner />
     </div>
 </template>
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index eb7b32194..90607c664 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> <i>fill</i> and <i>animationDuration</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
@@ -30,7 +30,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 74c3e5c04..6fd159adb 100644
--- a/doc/radiobutton/AccessibilityDoc.vue
+++ b/doc/radiobutton/AccessibilityDoc.vue
@@ -23,7 +23,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">left arrow</i>
                                 <i>up arrow</i>
                             </span>
@@ -32,7 +32,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">right arrow</i>
                                 <i>down arrow</i>
                             </span>
diff --git a/doc/radiobutton/DisabledDoc.vue b/doc/radiobutton/DisabledDoc.vue
index 3e16d3a1d..efeedf7f0 100644
--- a/doc/radiobutton/DisabledDoc.vue
+++ b/doc/radiobutton/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
 </template>
diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index e2089e722..fb657da78 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>RadioButtons can be generated using a list of values.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
@@ -26,7 +26,7 @@ export default {
             selectedCategory: 'Production',
             code: {
                 basic: `
-<div v-for="category in categories" :key="category.key" class="flex align-items-center">
+<div v-for="category in categories" :key="category.key" class="flex items-center">
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
@@ -34,9 +34,9 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
@@ -62,9 +62,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category in categories" :key="category.key" class="flex items-center">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
diff --git a/doc/radiobutton/FilledDoc.vue b/doc/radiobutton/FilledDoc.vue
index e360d9fc4..0c98783c4 100644
--- a/doc/radiobutton/FilledDoc.vue
+++ b/doc/radiobutton/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" variant="filled" binary />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" variant="filled" binary />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton v-model="checked" variant="filled" binary />
     </div>
 </template>
diff --git a/doc/radiobutton/GroupDoc.vue b/doc/radiobutton/GroupDoc.vue
index f71b6bec0..7506736b7 100644
--- a/doc/radiobutton/GroupDoc.vue
+++ b/doc/radiobutton/GroupDoc.vue
@@ -2,21 +2,21 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way value binding is defined using <i>v-model</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-wrap gap-3">
-            <div class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
                 <label for="ingredient1" class="ml-2">Cheese</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
                 <label for="ingredient2" class="ml-2">Mushroom</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
                 <label for="ingredient3" class="ml-2">Pepper</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
                 <label for="ingredient4" class="ml-2">Onion</label>
             </div>
@@ -32,20 +32,20 @@ export default {
             ingredient: '',
             code: {
                 basic: `
-<div class="flex flex-wrap gap-3">
-    <div class="flex align-items-center">
+<div class="flex flex-wrap gap-4">
+    <div class="flex items-center">
         <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2">Cheese</label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
         <label for="ingredient2" class="ml-2">Mushroom</label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
         <label for="ingredient3" class="ml-2">Pepper</label>
     </div>
-    <div class="flex align-items-center">
+    <div class="flex items-center">
         <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
         <label for="ingredient4" class="ml-2">Onion</label>
     </div>
@@ -53,21 +53,21 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-wrap gap-3">
-            <div class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
                 <label for="ingredient1" class="ml-2">Cheese</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
                 <label for="ingredient2" class="ml-2">Mushroom</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
                 <label for="ingredient3" class="ml-2">Pepper</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
                 <label for="ingredient4" class="ml-2">Onion</label>
             </div>
@@ -87,21 +87,21 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-wrap gap-3">
-            <div class="flex align-items-center">
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
                 <label for="ingredient1" class="ml-2">Cheese</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
                 <label for="ingredient2" class="ml-2">Mushroom</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
                 <label for="ingredient3" class="ml-2">Pepper</label>
             </div>
-            <div class="flex align-items-center">
+            <div class="flex items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
                 <label for="ingredient4" class="ml-2">Onion</label>
             </div>
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index 9f7ced260..3474d2e52 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton invalid binary />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton invalid binary />
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <RadioButton invalid binary />
     </div>
 </template>
diff --git a/doc/rating/AccessibilityDoc.vue b/doc/rating/AccessibilityDoc.vue
index 9f14ff082..120511de2 100644
--- a/doc/rating/AccessibilityDoc.vue
+++ b/doc/rating/AccessibilityDoc.vue
@@ -23,7 +23,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">left arrow</i>
                                 <i>up arrow</i>
                             </span>
@@ -32,7 +32,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">right arrow</i>
                                 <i>down arrow</i>
                             </span>
diff --git a/doc/rating/BasicDoc.vue b/doc/rating/BasicDoc.vue
index 91ec6c336..17534ec98 100644
--- a/doc/rating/BasicDoc.vue
+++ b/doc/rating/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way value binding is defined using v-model.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" />
     </div>
 </template>
diff --git a/doc/rating/DisabledDoc.vue b/doc/rating/DisabledDoc.vue
index 0473d42f5..d0e8e0a0d 100644
--- a/doc/rating/DisabledDoc.vue
+++ b/doc/rating/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" disabled />
     </div>
 </template>
diff --git a/doc/rating/NumberOfStarsDoc.vue b/doc/rating/NumberOfStarsDoc.vue
index 48f5e2414..4f602e18b 100644
--- a/doc/rating/NumberOfStarsDoc.vue
+++ b/doc/rating/NumberOfStarsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Number of stars to display is defined with <i>stars</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" :stars="10" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" :stars="10" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" :stars="10" />
     </div>
 </template>
diff --git a/doc/rating/ReadOnlyDoc.vue b/doc/rating/ReadOnlyDoc.vue
index 74ae6e5b1..8aff4c703 100644
--- a/doc/rating/ReadOnlyDoc.vue
+++ b/doc/rating/ReadOnlyDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>readOnly</i> present, value cannot be edited.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" readonly :cancel="false" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" readonly :cancel="false" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value" readonly :cancel="false" />
     </div>
 </template>
diff --git a/doc/rating/TemplateDoc.vue b/doc/rating/TemplateDoc.vue
index 8318a0253..d69756e5f 100644
--- a/doc/rating/TemplateDoc.vue
+++ b/doc/rating/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom icons are used to override the default icons with <i>onicon</i>, <i>officon</i> and <i>cancelicon</i> slots.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value">
             <template #cancelicon>
                 <img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24" />
@@ -39,7 +39,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value">
             <template #cancelicon>
                 <img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24" />
@@ -66,7 +66,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Rating v-model="value">
             <template #cancelicon>
                 <img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24" />
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 1328341ab..07ad5779e 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
-    <div class="card flex flex-column gap-3 align-items-center">
+    <div class="card flex flex-col gap-4 items-center">
         <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
-        <div class="flex justify-content-center gap-2">
+        <div class="flex justify-center gap-2">
             <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
             <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
             <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="flex justify-content-center align-items-center gap-2">
+    <div class="flex justify-center items-center gap-2">
         <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
         <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
         <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex justify-content-center align-items-center gap-2">
+    <div class="flex justify-center items-center gap-2">
         <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
         <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
         <div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index 4871169d5..50eff3e16 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
         <div v-ripple class="ripple-box">Default</div>
     </div>
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <div v-ripple class="ripple-box">Default</div>
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <div v-ripple class="ripple-box">Default</div>
     </div>
 </template>
diff --git a/doc/scrolltop/BasicDoc.vue b/doc/scrolltop/BasicDoc.vue
index 81a4fb034..89c4fb507 100644
--- a/doc/scrolltop/BasicDoc.vue
+++ b/doc/scrolltop/BasicDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>ScrollTop listens window scroll by default.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center">
+    <div class="card flex flex-col items-center">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem; margin-bottom: 30rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem; margin-bottom: 30rem"></i>
         <ScrollTop />
     </div>
     <DocSectionCode :code="code" />
@@ -20,9 +20,9 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center" style="height: 2000px">
+    <div class="card flex flex-col items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem"></i>
         <ScrollTop />
     </div>
 </template>
@@ -32,9 +32,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center" style="height: 2000px">
+    <div class="card flex flex-col items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem"></i>
         <ScrollTop />
     </div>
 </template>
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index cea7bce1e..a46b343a4 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Setting the <i>target</i> property to <i>parent</i> binds ScrollTop to its parent element that has scrolling content.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
@@ -17,8 +17,8 @@
                 icon="pi pi-arrow-up"
                 :pt="{
                     button: {
-                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        icon: 'text-base w-1rem h-1rem'
+                        root: 'w-8 h-8 rounded bg-primary text-primary-contrast',
+                        icon: 'text-base w-4 h-4'
                     }
                 }"
             />
@@ -47,8 +47,8 @@ export default {
         icon="pi pi-arrow-up"
         :pt="{
             button: {
-                root: 'w-2rem h-2rem border-round-sm bg-primary',
-                icon: 'text-base w-1rem h-1rem'
+                root: 'w-8 h-8 rounded bg-primary text-primary-contrast',
+                icon: 'text-base w-4 h-4'
             }
         }"
     />
@@ -56,7 +56,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
@@ -71,8 +71,8 @@ export default {
                 icon="pi pi-arrow-up"
                 :pt="{
                     button: {
-                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        icon: 'text-base w-1rem h-1rem'
+                        root: 'w-8 h-8 rounded bg-primary text-primary-contrast',
+                        icon: 'text-base w-4 h-4'
                     }
                 }"
             />
@@ -82,7 +82,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
@@ -97,8 +97,8 @@ export default {
                 icon="pi pi-arrow-up"
                 :pt="{
                     button: {
-                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        icon: 'text-base w-1rem h-1rem'
+                        root: 'w-8 h-8 rounded bg-primary text-primary-contrast',
+                        icon: 'text-base w-4 h-4'
                     }
                 }"
             />
diff --git a/doc/select/BasicDoc.vue b/doc/select/BasicDoc.vue
index 52717343b..5f5caf546 100644
--- a/doc/select/BasicDoc.vue
+++ b/doc/select/BasicDoc.vue
@@ -5,8 +5,8 @@
             when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,12 +25,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -53,8 +53,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/CheckmarkDoc.vue b/doc/select/CheckmarkDoc.vue
index 0edb6f5fa..fb6863b42 100644
--- a/doc/select/CheckmarkDoc.vue
+++ b/doc/select/CheckmarkDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/ClearIconDoc.vue b/doc/select/ClearIconDoc.vue
index 33bd33838..fba5c5cf2 100644
--- a/doc/select/ClearIconDoc.vue
+++ b/doc/select/ClearIconDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Select.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/DisabledDoc.vue b/doc/select/DisabledDoc.vue
index 90dda8f1f..a6795e2bf 100644
--- a/doc/select/DisabledDoc.vue
+++ b/doc/select/DisabledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
+<Select disabled placeholder="Select a City" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -29,8 +29,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select disabled placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/EditableDoc.vue b/doc/select/EditableDoc.vue
index bc38d9c4f..eb204dfbf 100644
--- a/doc/select/EditableDoc.vue
+++ b/doc/select/EditableDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>editable</i> is present, the input can also be entered with typing.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/FilledDoc.vue b/doc/select/FilledDoc.vue
index d1bb5c132..f3e7c20e2 100644
--- a/doc/select/FilledDoc.vue
+++ b/doc/select/FilledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/FilterDoc.vue b/doc/select/FilterDoc.vue
index 7263b6806..77669b0f3 100644
--- a/doc/select/FilterDoc.vue
+++ b/doc/select/FilterDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Select provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -14,7 +14,7 @@
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -43,9 +43,9 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
     <template #value="slotProps">
-        <div v-if="slotProps.value" class="flex align-items-center">
+        <div v-if="slotProps.value" class="flex items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.value.name }}</div>
         </div>
@@ -54,7 +54,7 @@ export default {
         </span>
     </template>
     <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.option.name }}</div>
         </div>
@@ -63,10 +63,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -75,7 +75,7 @@ export default {
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -108,10 +108,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -120,7 +120,7 @@ export default {
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
diff --git a/doc/select/FloatLabelDoc.vue b/doc/select/FloatLabelDoc.vue
index c8a57f1b5..a97ee5002 100644
--- a/doc/select/FloatLabelDoc.vue
+++ b/doc/select/FloatLabelDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-56">
             <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
@@ -25,15 +25,15 @@ export default {
             ],
             code: {
                 basic: `
-<FloatLabel class="w-full md:w-14rem">
+<FloatLabel class="w-full md:w-56">
     <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
     <label for="dd-city">Select a City</label>
 </FloatLabel>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-56">
             <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
@@ -59,8 +59,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-56">
             <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
diff --git a/doc/select/GroupDoc.vue b/doc/select/GroupDoc.vue
index a6bf80e05..f5645f564 100644
--- a/doc/select/GroupDoc.vue
+++ b/doc/select/GroupDoc.vue
@@ -5,10 +5,10 @@
             of a group.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -57,9 +57,9 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
     <template #optiongroup="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.option.label }}</div>
         </div>
@@ -68,10 +68,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
@@ -124,10 +124,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
             <template #optiongroup="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
diff --git a/doc/select/InvalidDoc.vue b/doc/select/InvalidDoc.vue
index c7dbaa3fb..6e6d8c148 100644
--- a/doc/select/InvalidDoc.vue
+++ b/doc/select/InvalidDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-56" />
     </div>
 </template>
 
@@ -50,8 +50,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/select/LazyVirtualScrollDoc.vue b/doc/select/LazyVirtualScrollDoc.vue
index 42b0c9053..80fe0e33a 100644
--- a/doc/select/LazyVirtualScrollDoc.vue
+++ b/doc/select/LazyVirtualScrollDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Select
             v-model="selectedItem"
             :options="items"
@@ -8,7 +8,7 @@
             optionValue="value"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }"
             placeholder="Select Item"
-            class="w-full md:w-14rem"
+            class="w-full md:w-56"
         />
     </div>
     <DocSectionCode :code="code" />
@@ -23,13 +23,13 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
     :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
     </div>
 </template>
@@ -71,8 +71,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
     </div>
 </template>
diff --git a/doc/select/LoadingStateDoc.vue b/doc/select/LoadingStateDoc.vue
index 53da781b1..6a05914ba 100644
--- a/doc/select/LoadingStateDoc.vue
+++ b/doc/select/LoadingStateDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
+<Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
     </div>
 </template>
 
@@ -28,8 +28,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
+    <div class="card flex justify-center">
+        <Select placeholder="Loading..." loading class="w-full md:w-56"></Select>
     </div>
 </template>
 
diff --git a/doc/select/TemplateDoc.vue b/doc/select/TemplateDoc.vue
index ef9442245..2c05429ae 100644
--- a/doc/select/TemplateDoc.vue
+++ b/doc/select/TemplateDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Options and the selected option display support templating with <i>option</i> and <i>value</i> respectively.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -14,7 +14,7 @@
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -43,9 +43,9 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
     <template #value="slotProps">
-        <div v-if="slotProps.value" class="flex align-items-center">
+        <div v-if="slotProps.value" class="flex items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.value.name }}</div>
         </div>
@@ -54,7 +54,7 @@ export default {
         </span>
     </template>
     <template #option="slotProps">
-        <div class="flex align-items-center">
+        <div class="flex items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.option.name }}</div>
         </div>
@@ -63,10 +63,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -75,7 +75,7 @@ export default {
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
@@ -108,10 +108,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+    <div class="card flex justify-center">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
             <template #value="slotProps">
-                <div v-if="slotProps.value" class="flex align-items-center">
+                <div v-if="slotProps.value" class="flex items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.value.name }}</div>
                 </div>
@@ -120,7 +120,7 @@ export default {
                 </span>
             </template>
             <template #option="slotProps">
-                <div class="flex align-items-center">
+                <div class="flex items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.name }}</div>
                 </div>
diff --git a/doc/select/VirtualScrollDoc.vue b/doc/select/VirtualScrollDoc.vue
index 775ae0887..626174a00 100644
--- a/doc/select/VirtualScrollDoc.vue
+++ b/doc/select/VirtualScrollDoc.vue
@@ -5,8 +5,8 @@
             <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Select.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+    <div class="card flex justify-center">
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,13 +20,13 @@ export default {
             code: {
                 basic: `
 <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
     </div>
 </template>
 
@@ -43,9 +43,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+            :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />
     </div>
 </template>
 
diff --git a/doc/selectbutton/AccessibilityDoc.vue b/doc/selectbutton/AccessibilityDoc.vue
index 2682c68a1..35ad2cc66 100644
--- a/doc/selectbutton/AccessibilityDoc.vue
+++ b/doc/selectbutton/AccessibilityDoc.vue
@@ -23,7 +23,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">right arrow</i>
                                 <i>up arrow</i>
                             </span>
@@ -32,7 +32,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">left arrow</i>
                                 <i>down arrow</i>
                             </span>
diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index 408fa0de4..506b091bb 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -5,7 +5,7 @@
             Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
     <DocSectionCode :code="code" />
@@ -23,7 +23,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
 </template>
@@ -41,7 +41,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
 </template>
diff --git a/doc/selectbutton/DisabledDoc.vue b/doc/selectbutton/DisabledDoc.vue
index 88e009b26..19d9b1a8d 100644
--- a/doc/selectbutton/DisabledDoc.vue
+++ b/doc/selectbutton/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
         <SelectButton v-model="value" :options="options1" disabled />
         <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
     </div>
@@ -27,7 +27,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
     </div>
@@ -51,7 +51,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
+    <div class="card flex flex-wrap justify-center flex-wrap gap-4">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
     </div>
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index ebd5cb186..18c5c91f8 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>
@@ -38,7 +38,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>
diff --git a/doc/selectbutton/MultipleDoc.vue b/doc/selectbutton/MultipleDoc.vue
index 48449c1f1..4f15196da 100644
--- a/doc/selectbutton/MultipleDoc.vue
+++ b/doc/selectbutton/MultipleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
     <DocSectionCode :code="code" />
@@ -24,7 +24,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
 </template>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
 </template>
diff --git a/doc/selectbutton/TemplateDoc.vue b/doc/selectbutton/TemplateDoc.vue
index 69e28a862..61859eefb 100644
--- a/doc/selectbutton/TemplateDoc.vue
+++ b/doc/selectbutton/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
                 <i :class="slotProps.option.icon"></i>
@@ -33,7 +33,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
                 <i :class="slotProps.option.icon"></i>
@@ -60,7 +60,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
                 <i :class="slotProps.option.icon"></i>
diff --git a/doc/setup/GuidesDoc.vue b/doc/setup/GuidesDoc.vue
index 630e630ca..f087cc8d6 100644
--- a/doc/setup/GuidesDoc.vue
+++ b/doc/setup/GuidesDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="grid">
-        <div class="col-12 sm:col-4">
+    <div class="grid grid-cols-12 gap-4">
+        <div class="col-span-12 sm:col-span-4">
             <div class="card">
                 <NuxtLink to="/vite">
                     <span class="images">
@@ -57,7 +57,7 @@
                 </NuxtLink>
             </div>
         </div>
-        <div class="col-12 sm:col-4">
+        <div class="col-span-12 sm:col-span-4">
             <div class="card">
                 <NuxtLink to="/nuxt">
                     <span class="images">
@@ -81,7 +81,7 @@
                 </NuxtLink>
             </div>
         </div>
-        <div class="col-12 sm:col-4">
+        <div class="col-span-12 sm:col-span-4">
             <div class="card flex-1">
                 <NuxtLink to="/cdn">
                     <span class="images">
diff --git a/doc/skeleton/CardDoc.vue b/doc/skeleton/CardDoc.vue
index b299861ec..e2d8ce2a5 100644
--- a/doc/skeleton/CardDoc.vue
+++ b/doc/skeleton/CardDoc.vue
@@ -3,8 +3,8 @@
         <p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="border-round border-1 surface-border p-4 surface-card">
-            <div class="flex mb-3">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
                     <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -13,7 +13,7 @@
                 </div>
             </div>
             <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-content-between mt-3">
+            <div class="flex justify-between mt-4">
                 <Skeleton width="4rem" height="2rem"></Skeleton>
                 <Skeleton width="4rem" height="2rem"></Skeleton>
             </div>
@@ -28,8 +28,8 @@ export default {
         return {
             code: {
                 basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
-    <div class="flex mb-3">
+<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+    <div class="flex mb-4">
         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
         <div>
             <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -38,7 +38,7 @@ export default {
         </div>
     </div>
     <Skeleton width="100%" height="150px"></Skeleton>
-    <div class="flex justify-content-between mt-3">
+    <div class="flex justify-between mt-4">
         <Skeleton width="4rem" height="2rem"></Skeleton>
         <Skeleton width="4rem" height="2rem"></Skeleton>
     </div>
@@ -47,8 +47,8 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="border-round border-1 surface-border p-4 surface-card">
-            <div class="flex mb-3">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
                     <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -57,7 +57,7 @@ export default {
                 </div>
             </div>
             <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-content-between mt-3">
+            <div class="flex justify-between mt-4">
                 <Skeleton width="4rem" height="2rem"></Skeleton>
                 <Skeleton width="4rem" height="2rem"></Skeleton>
             </div>
@@ -71,8 +71,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="border-round border-1 surface-border p-4 surface-card">
-            <div class="flex mb-3">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+            <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
                     <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -81,7 +81,7 @@ export default {
                 </div>
             </div>
             <Skeleton width="100%" height="150px"></Skeleton>
-            <div class="flex justify-content-between mt-3">
+            <div class="flex justify-between mt-4">
                 <Skeleton width="4rem" height="2rem"></Skeleton>
                 <Skeleton width="4rem" height="2rem"></Skeleton>
             </div>
diff --git a/doc/skeleton/ListDoc.vue b/doc/skeleton/ListDoc.vue
index 44f965437..4574a9d72 100644
--- a/doc/skeleton/ListDoc.vue
+++ b/doc/skeleton/ListDoc.vue
@@ -3,30 +3,30 @@
         <p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="border-round border-1 surface-border p-4 surface-card">
+        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <ul class="m-0 p-0 list-none">
-                <li class="mb-3">
+                <li class="mb-4">
                     <div class="flex">
                         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="align-self-center" style="flex: 1">
+                        <div class="self-center" style="flex: 1">
                             <Skeleton width="100%" class="mb-2"></Skeleton>
                             <Skeleton width="75%"></Skeleton>
                         </div>
                     </div>
                 </li>
-                <li class="mb-3">
+                <li class="mb-4">
                     <div class="flex">
                         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="align-self-center" style="flex: 1">
+                        <div class="self-center" style="flex: 1">
                             <Skeleton width="100%" class="mb-2"></Skeleton>
                             <Skeleton width="75%"></Skeleton>
                         </div>
                     </div>
                 </li>
-                <li class="mb-3">
+                <li class="mb-4">
                     <div class="flex">
                         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="align-self-center" style="flex: 1">
+                        <div class="self-center" style="flex: 1">
                             <Skeleton width="100%" class="mb-2"></Skeleton>
                             <Skeleton width="75%"></Skeleton>
                         </div>
@@ -35,7 +35,7 @@
                 <li>
                     <div class="flex">
                         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                        <div class="align-self-center" style="flex: 1">
+                        <div class="self-center" style="flex: 1">
                             <Skeleton width="100%" class="mb-2"></Skeleton>
                             <Skeleton width="75%"></Skeleton>
                         </div>
@@ -53,30 +53,30 @@ export default {
         return {
             code: {
                 basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
+<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
     <ul class="m-0 p-0 list-none">
-        <li class="mb-3">
+        <li class="mb-4">
             <div class="flex">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="align-self-center" style="flex: 1">
+                <div class="self-center" style="flex: 1">
                     <Skeleton width="100%" class="mb-2"></Skeleton>
                     <Skeleton width="75%"></Skeleton>
                 </div>
             </div>
         </li>
-        <li class="mb-3">
+        <li class="mb-4">
             <div class="flex">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="align-self-center" style="flex: 1">
+                <div class="self-center" style="flex: 1">
                     <Skeleton width="100%" class="mb-2"></Skeleton>
                     <Skeleton width="75%"></Skeleton>
                 </div>
             </div>
         </li>
-        <li class="mb-3">
+        <li class="mb-4">
             <div class="flex">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="align-self-center" style="flex: 1">
+                <div class="self-center" style="flex: 1">
                     <Skeleton width="100%" class="mb-2"></Skeleton>
                     <Skeleton width="75%"></Skeleton>
                 </div>
@@ -85,7 +85,7 @@ export default {
         <li>
             <div class="flex">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <div class="align-self-center" style="flex: 1">
+                <div class="self-center" style="flex: 1">
                     <Skeleton width="100%" class="mb-2"></Skeleton>
                     <Skeleton width="75%"></Skeleton>
                 </div>
@@ -96,30 +96,30 @@ export default {
 `,
                 options: `
 <template>
-    <div class="border-round border-1 surface-border p-4 surface-card">
+    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
         <ul class="m-0 p-0 list-none">
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
                 </div>
             </li>
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
                 </div>
             </li>
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
@@ -128,7 +128,7 @@ export default {
             <li>
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
@@ -143,30 +143,30 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="border-round border-1 surface-border p-4 surface-card">
+    <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
         <ul class="m-0 p-0 list-none">
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
                 </div>
             </li>
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
                 </div>
             </li>
-            <li class="mb-3">
+            <li class="mb-4">
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
@@ -175,7 +175,7 @@ export default {
             <li>
                 <div class="flex">
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <div class="align-self-center" style="flex: 1">
+                    <div class="self-center" style="flex: 1">
                         <Skeleton width="100%" class="mb-2"></Skeleton>
                         <Skeleton width="75%"></Skeleton>
                     </div>
diff --git a/doc/skeleton/ShapesDoc.vue b/doc/skeleton/ShapesDoc.vue
index 45a951730..4f6572315 100644
--- a/doc/skeleton/ShapesDoc.vue
+++ b/doc/skeleton/ShapesDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -12,7 +12,7 @@
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -20,18 +20,18 @@
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Square</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
                     <Skeleton size="3rem" class="mr-2"></Skeleton>
                     <Skeleton size="4rem" class="mr-2"></Skeleton>
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Circle</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
@@ -63,13 +63,13 @@ export default {
 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
 
-<h5 class="mt-3">Square</h5>
+<h5 class="mt-4">Square</h5>
 <Skeleton size="2rem" class="mr-2"></Skeleton>
 <Skeleton size="3rem" class="mr-2"></Skeleton>
 <Skeleton size="4rem" class="mr-2"></Skeleton>
 <Skeleton size="5rem"></Skeleton>
 
-<h5 class="mt-3">Circle</h5>
+<h5 class="mt-4">Circle</h5>
 <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
@@ -79,7 +79,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -87,7 +87,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -95,18 +95,18 @@ export default {
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Square</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
                     <Skeleton size="3rem" class="mr-2"></Skeleton>
                     <Skeleton size="4rem" class="mr-2"></Skeleton>
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Circle</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
@@ -124,7 +124,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -132,7 +132,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
+            <div class="w-full xl:w-6/12 p-4">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -140,18 +140,18 @@ export default {
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Square</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Square</h5>
+                <div class="flex items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
                     <Skeleton size="3rem" class="mr-2"></Skeleton>
                     <Skeleton size="4rem" class="mr-2"></Skeleton>
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="w-full xl:w-6 p-3">
-                <h5 class="mt-3">Circle</h5>
-                <div class="flex align-items-end">
+            <div class="w-full xl:w-6/12 p-4">
+                <h5 class="mt-4">Circle</h5>
+                <div class="flex items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
                     <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index 8bdd89cb0..003d823cd 100644
--- a/doc/slider/AccessibilityDoc.vue
+++ b/doc/slider/AccessibilityDoc.vue
@@ -24,7 +24,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">left arrow</i>
                                 <i>up arrow</i>
                             </span>
@@ -33,7 +33,7 @@
                     </tr>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">right arrow</i>
                                 <i>down arrow</i>
                             </span>
diff --git a/doc/slider/BasicDoc.vue b/doc/slider/BasicDoc.vue
index 856540c31..e88b9e4be 100644
--- a/doc/slider/BasicDoc.vue
+++ b/doc/slider/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way binding is defined using the standard <i>v-model</i> directive.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Slider v-model="value" class="w-14rem" />
+<Slider v-model="value" class="w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
diff --git a/doc/slider/FilterDoc.vue b/doc/slider/FilterDoc.vue
index 67ae29876..5632c6426 100644
--- a/doc/slider/FilterDoc.vue
+++ b/doc/slider/FilterDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>Image filter implementation using multiple sliders.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
-            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
-            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -25,17 +25,17 @@ export default {
             ],
             code: {
                 basic: `
-<img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
-<Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
-            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
-            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
         </div>
     </div>
 </template>
@@ -65,11 +65,11 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column align-items-center">
-            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
-            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
-            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+    <div class="card flex justify-center">
+        <div class="flex flex-col items-center">
+            <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
+            <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
         </div>
     </div>
 </template>
diff --git a/doc/slider/InputDoc.vue b/doc/slider/InputDoc.vue
index 2b769c1cb..c4bb3413d 100644
--- a/doc/slider/InputDoc.vue
+++ b/doc/slider/InputDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Slider is connected to an input field using two-way binding.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full mb-3" />
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>
@@ -23,9 +23,9 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full mb-3" />
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>
@@ -43,9 +43,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full mb-3" />
+    <div class="card flex justify-center">
+        <div class="w-56">
+            <InputText v-model.number="value" class="w-full mb-4" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>
diff --git a/doc/slider/RangeDoc.vue b/doc/slider/RangeDoc.vue
index 44cf4fc33..2d9c9f012 100644
--- a/doc/slider/RangeDoc.vue
+++ b/doc/slider/RangeDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" range class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: [20, 80],
             code: {
                 basic: `
-<Slider v-model="value" range class="w-14rem" />
+<Slider v-model="value" range class="w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" range class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" range class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" range class="w-56" />
     </div>
 </template>
 
diff --git a/doc/slider/StepDoc.vue b/doc/slider/StepDoc.vue
index 95d3c8a35..0df6e00a4 100644
--- a/doc/slider/StepDoc.vue
+++ b/doc/slider/StepDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Size of each movement is defined with the <i>step</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" :step="20" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: 20,
             code: {
                 basic: `
-<Slider v-model="value" :step="20" class="w-14rem" />
+<Slider v-model="value" :step="20" class="w-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" :step="20" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" :step="20" class="w-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
 </template>
 
diff --git a/doc/slider/VerticalDoc.vue b/doc/slider/VerticalDoc.vue
index a4fb2f3f2..cfbddb1dc 100644
--- a/doc/slider/VerticalDoc.vue
+++ b/doc/slider/VerticalDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" orientation="vertical" class="h-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: 50,
             code: {
                 basic: `
-<Slider v-model="value" orientation="vertical" class="h-14rem" />
+<Slider v-model="value" orientation="vertical" class="h-56" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" orientation="vertical" class="h-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Slider v-model="value" orientation="vertical" class="h-14rem" />
+    <div class="card flex justify-center">
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
 </template>
 
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index 383a7d2a5..f709aa6fb 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -3,7 +3,7 @@
         <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
     </DocSectionText>
     <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
         </div>
     </div>
@@ -58,7 +58,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
@@ -114,7 +114,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+        <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index 84019bc20..4b42e2e40 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
     </DocSectionText>
-    <div class="card p-3">
+    <div class="card p-4">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
@@ -57,7 +57,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card p-3">
+    <div class="card p-4">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
@@ -112,7 +112,7 @@ data() {
 `,
                 composition: `
 <template>
-    <div class="card p-3">
+    <div class="card p-4">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
diff --git a/doc/speeddial/TemplateDoc.vue b/doc/speeddial/TemplateDoc.vue
index bfddeba86..c9dc33a3d 100644
--- a/doc/speeddial/TemplateDoc.vue
+++ b/doc/speeddial/TemplateDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card">
-        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
                     <Button outlined class="border-2" @click="toggleCallback">
@@ -23,7 +23,7 @@
                     </Button>
                 </template>
                 <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
                         <span :class="item.icon" />
                         <span>
                             {{ item.label }}
@@ -89,7 +89,7 @@ export default {
         </Button>
     </template>
     <template #item="{ item, toggleCallback }">
-        <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+        <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
             <span :class="item.icon" />
             <span>
                 {{ item.label }}
@@ -101,7 +101,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
                     <Button outlined class="border-2" @click="toggleCallback">
@@ -112,7 +112,7 @@ export default {
                     </Button>
                 </template>
                 <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
                         <span :class="item.icon" />
                         <span>
                             {{ item.label }}
@@ -174,7 +174,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
+        <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
                     <Button outlined class="border-2" @click="toggleCallback">
@@ -185,7 +185,7 @@ export default {
                     </Button>
                 </template>
                 <template #item="{ item, toggleCallback }">
-                    <div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
+                    <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
                         <span :class="item.icon" />
                         <span>
                             {{ item.label }}
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index f17b9c73d..841f2cec1 100644
--- a/doc/splitbutton/AccessibilityDoc.vue
+++ b/doc/splitbutton/AccessibilityDoc.vue
@@ -47,7 +47,7 @@
                 <tbody>
                     <tr>
                         <td>
-                            <span class="inline-flex flex-column">
+                            <span class="inline-flex flex-col">
                                 <i class="mb-1">enter</i>
                                 <i class="mb-1">space</i>
                                 <i class="mb-1">down arrow</i>
diff --git a/doc/splitbutton/BasicDoc.vue b/doc/splitbutton/BasicDoc.vue
index b61f88a0b..2fce74fed 100644
--- a/doc/splitbutton/BasicDoc.vue
+++ b/doc/splitbutton/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SplitButton label="Save" @click="save" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -39,7 +39,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" @click="save" :model="items" />
     </div>
@@ -82,7 +82,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" @click="save" :model="items" />
     </div>
diff --git a/doc/splitbutton/DisabledDoc.vue b/doc/splitbutton/DisabledDoc.vue
index 5e52a6843..8ab4deac8 100644
--- a/doc/splitbutton/DisabledDoc.vue
+++ b/doc/splitbutton/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -39,7 +39,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
@@ -81,7 +81,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" @click="save" :model="items" disabled />
     </div>
diff --git a/doc/splitbutton/IconsDoc.vue b/doc/splitbutton/IconsDoc.vue
index 755f58903..6b4f8bd3a 100644
--- a/doc/splitbutton/IconsDoc.vue
+++ b/doc/splitbutton/IconsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The buttons and menuitems have support to display icons.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -42,7 +42,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
     </div>
@@ -88,7 +88,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
     </div>
diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index d59256eef..d66143de3 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
@@ -53,7 +53,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
@@ -103,7 +103,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index c1de9c569..955540f7a 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
@@ -53,7 +53,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
@@ -103,7 +103,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index fabba384f..2df5f5b8c 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
@@ -51,7 +51,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
@@ -100,7 +100,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index f1a25c11e..797c27a73 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
@@ -53,7 +53,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
@@ -103,7 +103,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 9dcde5500..baa0c3f11 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
@@ -53,7 +53,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
@@ -103,7 +103,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index 01ef98b74..4f163d6db 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
     </DocSectionText>
-    <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
+    <div class="card flex items-center justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
@@ -46,7 +46,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
+    <div class="card flex items-center justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
@@ -94,7 +94,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
+    <div class="card flex items-center justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index 48f83e229..1493b44cd 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex align-items-center font-bold">
+            <span class="flex items-center font-bold">
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
                 <span>PrimeVue</span>
             </span>
@@ -44,7 +44,7 @@ export default {
             code: {
                 basic: `
 <SplitButton :model="items" @click="save" severity="contrast">
-    <span class="flex align-items-center font-bold">
+    <span class="flex items-center font-bold">
         <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
         <span>PrimeVue</span>
     </span>
@@ -52,10 +52,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex align-items-center font-bold">
+            <span class="flex items-center font-bold">
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
                 <span>PrimeVue</span>
             </span>
@@ -103,10 +103,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <SplitButton :model="items" @click="save" severity="contrast">
-            <span class="flex align-items-center font-bold">
+            <span class="flex items-center font-bold">
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
                 <span>PrimeVue</span>
             </span>
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index e39511a5c..2979f64f0 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
@@ -51,7 +51,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
@@ -100,7 +100,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center flex-wrap gap-3">
+    <div class="card flex justify-center flex-wrap gap-4">
         <Toast />
         <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
         <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue
index 5ced09d53..4833c4a50 100644
--- a/doc/splitter/HorizontalDoc.vue
+++ b/doc/splitter/HorizontalDoc.vue
@@ -3,9 +3,9 @@
         <p>Splitter requires two SplitterPanel components as children which are displayed horizontally by default.</p>
     </DocSectionText>
     <div class="card">
-        <Splitter style="height: 300px" class="mb-5">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
     <DocSectionCode :code="code" />
@@ -17,17 +17,17 @@ export default {
         return {
             code: {
                 basic: `
-<Splitter style="height: 300px" class="mb-5">
-    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+<Splitter style="height: 300px" class="mb-8">
+    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
 </Splitter>
 `,
                 options: `
 <template>
     <div class="card">
-        <Splitter style="height: 300px" class="mb-5">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
@@ -38,9 +38,9 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Splitter style="height: 300px" class="mb-5">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+        <Splitter style="height: 300px" class="mb-8">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
diff --git a/doc/splitter/NestedDoc.vue b/doc/splitter/NestedDoc.vue
index 796697c31..53bfa9e35 100644
--- a/doc/splitter/NestedDoc.vue
+++ b/doc/splitter/NestedDoc.vue
@@ -4,14 +4,14 @@
     </DocSectionText>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
             <SplitterPanel :size="80">
                 <Splitter layout="vertical">
-                    <SplitterPanel class="flex align-items-center justify-content-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
                     <SplitterPanel :size="85">
                         <Splitter>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="80"> Panel 4 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
                         </Splitter>
                     </SplitterPanel>
                 </Splitter>
@@ -28,14 +28,14 @@ export default {
             code: {
                 basic: `
 <Splitter style="height: 300px">
-    <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
     <SplitterPanel :size="80">
         <Splitter layout="vertical">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="15"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
             <SplitterPanel :size="85">
                 <Splitter>
-                    <SplitterPanel class="flex align-items-center justify-content-center" :size="20"> Panel 3 </SplitterPanel>
-                    <SplitterPanel class="flex align-items-center justify-content-center" :size="80"> Panel 4 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
                 </Splitter>
             </SplitterPanel>
         </Splitter>
@@ -46,14 +46,14 @@ export default {
 <template>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
             <SplitterPanel :size="80">
                 <Splitter layout="vertical">
-                    <SplitterPanel class="flex align-items-center justify-content-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
                     <SplitterPanel :size="85">
                         <Splitter>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="80"> Panel 4 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
                         </Splitter>
                     </SplitterPanel>
                 </Splitter>
@@ -69,14 +69,14 @@ export default {
 <template>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
             <SplitterPanel :size="80">
                 <Splitter layout="vertical">
-                    <SplitterPanel class="flex align-items-center justify-content-center" :size="15"> Panel 2 </SplitterPanel>
+                    <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
                     <SplitterPanel :size="85">
                         <Splitter>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="20"> Panel 3 </SplitterPanel>
-                            <SplitterPanel class="flex align-items-center justify-content-center" :size="80"> Panel 4 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
+                            <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
                         </Splitter>
                     </SplitterPanel>
                 </Splitter>
diff --git a/doc/splitter/SizeDoc.vue b/doc/splitter/SizeDoc.vue
index bc9857484..9e4c1e51e 100644
--- a/doc/splitter/SizeDoc.vue
+++ b/doc/splitter/SizeDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
     <DocSectionCode :code="code" />
@@ -18,16 +18,16 @@ export default {
             code: {
                 basic: `
 <Splitter style="height: 300px">
-    <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
 </Splitter>
 `,
                 options: `
 <template>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
@@ -39,8 +39,8 @@ export default {
 <template>
     <div class="card">
         <Splitter style="height: 300px">
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
diff --git a/doc/splitter/VerticalDoc.vue b/doc/splitter/VerticalDoc.vue
index f026f9658..874deaeb2 100644
--- a/doc/splitter/VerticalDoc.vue
+++ b/doc/splitter/VerticalDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
     <DocSectionCode :code="code" />
@@ -18,16 +18,16 @@ export default {
             code: {
                 basic: `
 <Splitter style="height: 300px" layout="vertical">
-    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
 </Splitter>
 `,
                 options: `
 <template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
@@ -39,8 +39,8 @@ export default {
 <template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index 620acaa40..f7fce72a7 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -5,24 +5,24 @@
             <i>nextCallback</i> events should be bound to your custom UI elements.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -30,10 +30,10 @@
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -52,20 +52,20 @@ export default {
 <Stepper>
     <StepperPanel header="Header I">
         <template #content="{ nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-end">
+            <div class="flex pt-6 justify-end">
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header II">
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-6 justify-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
@@ -73,10 +73,10 @@ export default {
     </StepperPanel>
     <StepperPanel header="Header III">
         <template #content="{ prevCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-start">
+            <div class="flex pt-6 justify-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
             </div>
         </template>
@@ -85,24 +85,24 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -110,10 +110,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -130,24 +130,24 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -155,10 +155,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index dedbff99d..7f45f269e 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -2,24 +2,24 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>linear</i> property is present, current step must be completed in order to move to the next step.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -27,10 +27,10 @@
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -49,20 +49,20 @@ export default {
 <Stepper linear>
     <StepperPanel header="Header I">
         <template #content="{ nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-end">
+            <div class="flex pt-6 justify-end">
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header II">
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-6 justify-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
@@ -70,10 +70,10 @@ export default {
     </StepperPanel>
     <StepperPanel header="Header III">
         <template #content="{ prevCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-start">
+            <div class="flex pt-6 justify-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
             </div>
         </template>
@@ -82,24 +82,24 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -107,10 +107,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -127,24 +127,24 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -152,10 +152,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index b0d98cd6b..f86e37418 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -2,19 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper provides various templating options to customize the default UI design.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-user" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -35,23 +35,23 @@
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-star" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-content-center gap-3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
                             <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
                             <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
                             <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
@@ -64,7 +64,7 @@
                             <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -72,20 +72,20 @@
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-id-card" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                         <div class="text-center">
                             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -118,15 +118,15 @@ export default {
 <Stepper v-model:activeStep="active">
     <StepperPanel>
         <template #header="{ index, clickCallback }">
-            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+            <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                     <i class="pi pi-user" />
                 </span>
             </button>
         </template>
         <template #content="{ nextCallback }">
-            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
                 <div class="field p-fluid">
                     <IconField>
                         <InputIcon>
@@ -147,23 +147,23 @@ export default {
                     <Password v-model="password" toggleMask placeholder="Password" />
                 </div>
             </div>
-            <div class="flex pt-4 justify-content-end">
+            <div class="flex pt-6 justify-end">
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel>
         <template #header="{ index, clickCallback }">
-            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+            <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                     <i class="pi pi-star" />
                 </span>
             </button>
         </template>
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
-                <div class="flex flex-wrap justify-content-center gap-3">
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                <div class="flex flex-wrap justify-center gap-4">
                     <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
                     <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
                     <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
@@ -176,7 +176,7 @@ export default {
                     <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                 </div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-6 justify-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                 <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
@@ -184,20 +184,20 @@ export default {
     </StepperPanel>
     <StepperPanel>
         <template #header="{ index, clickCallback }">
-            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+            <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                     <i class="pi pi-id-card" />
                 </span>
             </button>
         </template>
         <template #content="{ prevCallback }">
-            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                 <div class="text-center">
                     <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                 </div>
             </div>
-            <div class="flex pt-4 justify-content-start">
+            <div class="flex pt-6 justify-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
             </div>
         </template>
@@ -206,19 +206,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-user" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -239,23 +239,23 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-star" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-content-center gap-3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
                             <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
                             <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
                             <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
@@ -268,7 +268,7 @@ export default {
                             <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -276,20 +276,20 @@ export default {
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-id-card" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                         <div class="text-center">
                             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
@@ -330,19 +330,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-user" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -363,23 +363,23 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-end">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-star" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
-                        <div class="flex flex-wrap justify-content-center gap-3">
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
+                        <div class="flex flex-wrap justify-center gap-4">
                             <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
                             <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
                             <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
@@ -392,7 +392,7 @@ export default {
                             <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-6 justify-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                         <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
@@ -400,20 +400,20 @@ export default {
             </StepperPanel>
             <StepperPanel>
                 <template #header="{ index, clickCallback }">
-                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
-                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
                             <i class="pi pi-id-card" />
                         </span>
                     </button>
                 </template>
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
-                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                    <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                         <div class="text-center">
                             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-start">
+                    <div class="flex pt-6 justify-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
                     </div>
                 </template>
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index 2f2269f3b..40979d1be 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -6,20 +6,20 @@
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 gap-2">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                         <Button label="Next" @click="nextCallback" />
                     </div>
@@ -27,10 +27,10 @@
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
@@ -49,20 +49,20 @@ export default {
 <Stepper orientation="vertical">
     <StepperPanel header="Header I">
         <template #content="{ nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
             </div>
-            <div class="flex py-4">
+            <div class="flex py-6">
                 <Button label="Next" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header II">
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex py-4 gap-2">
+            <div class="flex py-6 gap-2">
                 <Button label="Back" severity="secondary" @click="prevCallback" />
                 <Button label="Next" @click="nextCallback" />
             </div>
@@ -70,10 +70,10 @@ export default {
     </StepperPanel>
     <StepperPanel header="Header III">
         <template #content="{ prevCallback }">
-            <div class="flex flex-column h-12rem">
-                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            <div class="flex flex-col h-48">
+                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex py-4">
+            <div class="flex py-6">
                 <Button label="Back" severity="secondary" @click="prevCallback" />
             </div>
         </template>
@@ -86,20 +86,20 @@ export default {
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 gap-2">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                         <Button label="Next" @click="nextCallback" />
                     </div>
@@ -107,10 +107,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
@@ -125,20 +125,20 @@ export default {
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
                 <template #content="{ nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header II">
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 gap-2">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                         <Button label="Next" @click="nextCallback" />
                     </div>
@@ -146,10 +146,10 @@ export default {
             </StepperPanel>
             <StepperPanel header="Header III">
                 <template #content="{ prevCallback }">
-                    <div class="flex flex-column h-12rem">
-                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4">
+                    <div class="flex py-6">
                         <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
diff --git a/doc/steps/ControlledDoc.vue b/doc/steps/ControlledDoc.vue
index c5a17d76f..70edc051c 100644
--- a/doc/steps/ControlledDoc.vue
+++ b/doc/steps/ControlledDoc.vue
@@ -3,10 +3,10 @@
         <p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex mb-5 gap-2 justify-content-end">
-            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-8 gap-2 justify-end">
+            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
         <Steps v-model:activeStep="active" :model="items" />
     </div>
@@ -31,20 +31,20 @@ export default {
             ],
             code: {
                 basic: `
-<div class="flex mb-2 gap-2 justify-content-end">
-    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+<div class="flex mb-2 gap-2 justify-end">
+    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
 </div>
 <Steps v-model:activeStep="active" :model="items" />
 `,
                 options: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
         <Steps v-model:activeStep="active" :model="items" />
     </div>
@@ -74,10 +74,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
         <Steps v-model:activeStep="active" :model="items" />
     </div>
diff --git a/doc/steps/TemplateDoc.vue b/doc/steps/TemplateDoc.vue
index 8df116b53..4ffde9ab6 100644
--- a/doc/steps/TemplateDoc.vue
+++ b/doc/steps/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Steps :model="items" class="custom-steps" :readonly="false">
             <template #item="{ item, active }">
-                <span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
+                <span :class="['inline-flex items-center justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
                     <i :class="[item.icon, 'text-xl']" />
                 </span>
             </template>
@@ -33,7 +33,7 @@ export default {
                 basic: `
 <Steps :model="items" class="custom-steps" :readonly="false">
     <template #item="{ item, active }">
-        <span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
+        <span :class="['inline-flex items-center justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
             <i :class="[item.icon, 'text-xl']" />
         </span>
     </template>
@@ -44,7 +44,7 @@ export default {
     <div class="card">
         <Steps :model="items" class="custom-steps" :readonly="false">
             <template #item="{ item, active }">
-                <span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
+                <span :class="['inline-flex items-center justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
                     <i :class="[item.icon, 'text-xl']" />
                 </span>
             </template>
@@ -86,7 +86,7 @@ export default {
     <div class="card">
         <Steps :model="items" class="custom-steps" :readonly="false">
             <template #item="{ item, active }">
-                <span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
+                <span :class="['inline-flex items-center justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
                     <i :class="[item.icon, 'text-xl']" />
                 </span>
             </template>
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index bfca9696d..ff960ef9e 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -5,13 +5,13 @@
             target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
         </p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center">
+    <div class="card flex flex-col items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="my-hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
+        <div class="my-hidden animate-duration-500 box">
+            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -25,19 +25,19 @@ export default {
                 basic: `
 <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
 <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
-<div class="my-hidden animation-duration-500 box">
-    <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
+<div class="my-hidden animate-duration-500 box">
+    <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center">
+    <div class="card flex flex-col items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="my-hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
+        <div class="my-hidden animate-duration-500 box">
+            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
         </div>
     </div>
 </template>
@@ -79,13 +79,13 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center">
+    <div class="card flex flex-col items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="my-hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
+        <div class="my-hidden animate-duration-500 box">
+            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
         </div>
     </div>
 </template>
diff --git a/doc/styleclass/ToggleClassDoc.vue b/doc/styleclass/ToggleClassDoc.vue
index 171dba46f..27234b26e 100644
--- a/doc/styleclass/ToggleClassDoc.vue
+++ b/doc/styleclass/ToggleClassDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
@@ -31,7 +31,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center gap-3">
+    <div class="card flex flex-col items-center gap-4">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index 0c5ed9845..9558e1fa2 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -3,10 +3,10 @@
         <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
 
         <TabMenu v-model:activeIndex="active" :model="items" />
@@ -27,10 +27,10 @@ export default {
             ],
             code: {
                 basic: `
-<div class="flex mb-2 gap-2 justify-content-end">
-    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+<div class="flex mb-2 gap-2 justify-end">
+    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
 </div>
 
 <TabMenu v-model:activeIndex="active" :model="items" />
@@ -38,10 +38,10 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
 
         <TabMenu v-model:activeIndex="active" :model="items" />
@@ -67,10 +67,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active.value = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
-            <Button @click="active.value = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
-            <Button @click="active.value = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
+            <Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
+            <Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
         </div>
 
         <TabMenu v-model:activeIndex="active" :model="items" />
diff --git a/doc/tabmenu/TemplateDoc.vue b/doc/tabmenu/TemplateDoc.vue
index 06e060e9b..d7bd86671 100644
--- a/doc/tabmenu/TemplateDoc.vue
+++ b/doc/tabmenu/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <TabMenu :model="items">
             <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
                     <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
                     <span class="font-bold">{{ item.name }}</span>
                 </a>
@@ -28,7 +28,7 @@ export default {
                 basic: `
 <TabMenu :model="items">
     <template #item="{ item, props }">
-        <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+        <a v-ripple v-bind="props.action" class="flex items-center gap-2">
             <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
             <span class="font-bold">{{ item.name }}</span>
         </a>
@@ -40,7 +40,7 @@ export default {
     <div class="card">
         <TabMenu :model="items">
             <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
                     <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
                     <span class="font-bold">{{ item.name }}</span>
                 </a>
@@ -68,7 +68,7 @@ export default {
     <div class="card">
         <TabMenu :model="items">
             <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
                     <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
                     <span class="font-bold">{{ item.name }}</span>
                 </a>
diff --git a/doc/tabs/ControlledDoc.vue b/doc/tabs/ControlledDoc.vue
index 7e93bab99..b734c005f 100644
--- a/doc/tabs/ControlledDoc.vue
+++ b/doc/tabs/ControlledDoc.vue
@@ -3,10 +3,10 @@
         <p>Tabs can be controlled programmatically using <i>value</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
         </div>
 
         <Tabs v-model:value="value">
@@ -47,10 +47,10 @@ export default {
             value: '0',
             code: {
                 basic: `
-<div class="flex mb-2 gap-2 justify-content-end">
-    <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
-    <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
-    <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+<div class="flex mb-2 gap-2 justify-end">
+    <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+    <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+    <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
 </div>
 
 <Tabs v-model:value="value">
@@ -84,10 +84,10 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
         </div>
 
         <Tabs v-model:value="value">
@@ -133,10 +133,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="value = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="value !== '0'" />
-            <Button @click="value = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="value !== '1'" />
-            <Button @click="value = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="value !== '2'" />
+        <div class="flex mb-2 gap-2 justify-end">
+            <Button @click="value = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="value !== '0'" />
+            <Button @click="value = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="value !== '1'" />
+            <Button @click="value = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="value !== '2'" />
         </div>
 
         <Tabs v-model:value="value">
diff --git a/doc/tabs/TemplateDoc.vue b/doc/tabs/TemplateDoc.vue
index 9de1da241..86920e840 100644
--- a/doc/tabs/TemplateDoc.vue
+++ b/doc/tabs/TemplateDoc.vue
@@ -5,18 +5,18 @@
     <div class="card">
         <Tabs value="0">
             <TabList>
-                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                <Tab value="0" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                <Tab value="1" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                 </Tab>
                 <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />
                     </div>
                 </Tab>
@@ -52,18 +52,18 @@ export default {
                 basic: `
 <Tabs value="0">
     <TabList>
-        <Tab value="0" as="div" class="flex align-items-center gap-2">
+        <Tab value="0" as="div" class="flex items-center gap-2">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold white-space-nowrap">Amy Elsner</span>
+            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
         </Tab>
-        <Tab value="1" as="div" class="flex align-items-center gap-2">
+        <Tab value="1" as="div" class="flex items-center gap-2">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-            <span class="font-bold white-space-nowrap">Onyama Limba</span>
+            <span class="font-bold whitespace-nowrap">Onyama Limba</span>
         </Tab>
         <Tab v-slot="slotProps" value="2" asChild>
-            <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+            <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                 <Badge value="2" />
             </div>
         </Tab>
@@ -93,18 +93,18 @@ export default {
     <div class="card">
         <Tabs value="0">
             <TabList>
-                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                <Tab value="0" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                <Tab value="1" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                 </Tab>
                 <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />
                     </div>
                 </Tab>
@@ -139,18 +139,18 @@ export default {
     <div class="card">
         <Tabs value="0">
             <TabList>
-                <Tab value="0" as="div" class="flex align-items-center gap-2">
+                <Tab value="0" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                    <span class="font-bold whitespace-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                <Tab value="1" as="div" class="flex items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                    <span class="font-bold whitespace-nowrap">Onyama Limba</span>
                 </Tab>
                 <Tab v-slot="slotProps" value="2" asChild>
-                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
+                    <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />
                     </div>
                 </Tab>
diff --git a/doc/tag/BasicDoc.vue b/doc/tag/BasicDoc.vue
index 256f7c7bf..81305d50b 100644
--- a/doc/tag/BasicDoc.vue
+++ b/doc/tag/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Label of the tag is defined with the <i>value</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag value="New"></Tag>
     </div>
     <DocSectionCode :code="code" />
@@ -18,7 +18,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag value="New"></Tag>
     </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag value="New"></Tag>
     </div>
 </template>
diff --git a/doc/tag/IconDoc.vue b/doc/tag/IconDoc.vue
index 384468162..4a7fa14f3 100644
--- a/doc/tag/IconDoc.vue
+++ b/doc/tag/IconDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A font icon next to the value can be displayed with the <i>icon</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
         <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
diff --git a/doc/tag/PillDoc.vue b/doc/tag/PillDoc.vue
index 3878b6f81..ea8e67f49 100644
--- a/doc/tag/PillDoc.vue
+++ b/doc/tag/PillDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="secondary" value="Secondary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="secondary" value="Secondary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
         <Tag severity="secondary" value="Secondary" rounded></Tag>
diff --git a/doc/tag/SeverityDoc.vue b/doc/tag/SeverityDoc.vue
index 816441dc4..8650d4cdf 100644
--- a/doc/tag/SeverityDoc.vue
+++ b/doc/tag/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Severity defines the variant of a tag.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="secondary" value="Secondary"></Tag>
         <Tag severity="success" value="Success"></Tag>
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="flex flex-wrap justify-content-center gap-2">
+    <div class="flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="secondary" value="Secondary"></Tag>
         <Tag severity="success" value="Success"></Tag>
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex flex-wrap justify-content-center gap-2">
+    <div class="flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="secondary" value="Secondary"></Tag>
         <Tag severity="success" value="Success"></Tag>
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index bdb291f57..ebaf00656 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Children of the component are passed as the content for templating.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex align-items-center gap-2 px-1">
+            <div class="flex items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
             </div>
@@ -20,7 +20,7 @@ export default {
             code: {
                 basic: `
 <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-    <div class="flex align-items-center gap-2 px-1">
+    <div class="flex items-center gap-2 px-1">
         <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
         <span class="text-base">Italy</span>
     </div>
@@ -28,9 +28,9 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex align-items-center gap-2 px-1">
+            <div class="flex items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
             </div>
@@ -43,9 +43,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
-            <div class="flex align-items-center gap-2 px-1">
+            <div class="flex items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
             </div>
diff --git a/doc/textarea/AutoResizeDoc.vue b/doc/textarea/AutoResizeDoc.vue
index f4c2065cf..1ed5dcaed 100644
--- a/doc/textarea/AutoResizeDoc.vue
+++ b/doc/textarea/AutoResizeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
 </template>
diff --git a/doc/textarea/BasicDoc.vue b/doc/textarea/BasicDoc.vue
index 15c33fe83..013ec2b98 100644
--- a/doc/textarea/BasicDoc.vue
+++ b/doc/textarea/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A model can be bound using the standard <i>v-model</i> directive.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
 </template>
diff --git a/doc/textarea/DisabledDoc.vue b/doc/textarea/DisabledDoc.vue
index 8dde93eaf..fc9c83222 100644
--- a/doc/textarea/DisabledDoc.vue
+++ b/doc/textarea/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" disabled style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
 </template>
diff --git a/doc/textarea/FilledDoc.vue b/doc/textarea/FilledDoc.vue
index d54270538..160760b69 100644
--- a/doc/textarea/FilledDoc.vue
+++ b/doc/textarea/FilledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" variant="filled" rows="5" cols="30" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" variant="filled" rows="5" cols="30" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" variant="filled" rows="5" cols="30" />
     </div>
 </template>
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index 1e541dfe6..ff9071b77 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
             <label>Username</label>
@@ -25,7 +25,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" />
             <label>Username</label>
@@ -45,7 +45,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" />
             <label>Username</label>
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index 94e67ea61..092ab481d 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" invalid style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" invalid />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30"   invalid />
     </div>
 </template>
diff --git a/doc/theming/styled/ArchitectureDoc.vue b/doc/theming/styled/ArchitectureDoc.vue
index 61edc5bb4..8b13e00b9 100644
--- a/doc/theming/styled/ArchitectureDoc.vue
+++ b/doc/theming/styled/ArchitectureDoc.vue
@@ -5,7 +5,7 @@
             <i>base</i> and <i>preset</i>. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different
             presets, currently Aura is the only preset and in upcoming version more presets will be available.
         </p>
-        <img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/primevue-v4-styled-architecture.png" class="w-full mb-3" />
+        <img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/primevue-v4-styled-architecture.png" class="w-full mb-4" />
         <p>The core of the styled mode architecture is based on a concept named <i>design token</i>, a preset defines the token configuration in 3 tiers; <i>primitive</i>, <i>semantic</i> and <i>component</i>.</p>
         <h3>Primitive Tokens</h3>
         <p>
diff --git a/doc/theming/styled/CSSModulesDoc.vue b/doc/theming/styled/CSSModulesDoc.vue
index f120b76b7..511a49f20 100644
--- a/doc/theming/styled/CSSModulesDoc.vue
+++ b/doc/theming/styled/CSSModulesDoc.vue
@@ -4,7 +4,7 @@
             <a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your SFC. Use the <i>$style</i> keyword to apply classes to a PrimeVue component. It is
             recommend to enable <i>cssLayer</i> when using CSS modules so that the PrimeVue styles have low CSS specificity.
         </p>
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <InputText :class="$style.myinput" placeholder="Search" />
         </div>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
diff --git a/doc/theming/styled/ColorsDoc.vue b/doc/theming/styled/ColorsDoc.vue
index e39d1f4c9..c76884e3c 100644
--- a/doc/theming/styled/ColorsDoc.vue
+++ b/doc/theming/styled/ColorsDoc.vue
@@ -7,12 +7,12 @@
     <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
     <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     <div class="card">
-        <ul class="p-0 m-0 list-none flex sm:flex-column gap-3 flex-wrap sm:flex-nowrap">
+        <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
             <li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
                 <span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
-                <div class="flex gap-3 flex-auto flex-column sm:flex-row">
-                    <div v-for="(shade, j) of shades" :key="shade" class="flex flex-column align-items-center gap-1 flex-1">
-                        <div class="border-round h-2rem w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
+                <div class="flex gap-4 flex-auto flex-col sm:flex-row">
+                    <div v-for="(shade, j) of shades" :key="shade" class="flex flex-col items-center gap-1 flex-1">
+                        <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
                         <span class="text-sm text-secondary font-medium">{{ shades[j] }}</span>
                     </div>
                 </div>
diff --git a/doc/theming/styled/ScopedTokensDoc.vue b/doc/theming/styled/ScopedTokensDoc.vue
index 2d3d45b7f..5411fb615 100644
--- a/doc/theming/styled/ScopedTokensDoc.vue
+++ b/doc/theming/styled/ScopedTokensDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center gap-3">
+    <div class="card flex justify-center gap-4">
         <ToggleSwitch v-model="checked1" />
         <ToggleSwitch v-model="checked2" :dt="amberSwitch" />
     </div>
diff --git a/doc/theming/styled/csslayer/SpecificityDoc.vue b/doc/theming/styled/csslayer/SpecificityDoc.vue
index 5adf9f6ba..43152ba13 100644
--- a/doc/theming/styled/csslayer/SpecificityDoc.vue
+++ b/doc/theming/styled/csslayer/SpecificityDoc.vue
@@ -11,7 +11,7 @@
             the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
             Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
         </p>
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
         </div>
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
diff --git a/doc/theming/styled/utils/DTDoc.vue b/doc/theming/styled/utils/DTDoc.vue
index 3e35c342c..e7f3b13c8 100644
--- a/doc/theming/styled/utils/DTDoc.vue
+++ b/doc/theming/styled/utils/DTDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <div class="notification mb-3">This is a proposed api for beta.2, and not yet available in beta.1.</div>
+        <div class="notification mb-4">This is a proposed api for beta.2, and not yet available in beta.1.</div>
         <p>The <i>$dt</i> function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
diff --git a/doc/theming/unstyled/ExampleDoc.vue b/doc/theming/unstyled/ExampleDoc.vue
index bdf980848..e4465f637 100644
--- a/doc/theming/unstyled/ExampleDoc.vue
+++ b/doc/theming/unstyled/ExampleDoc.vue
@@ -4,13 +4,13 @@
             Here is a sample that provides a style using PrimeFlex CSS library. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be
             using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
         </p>
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Button
                 label="Check"
                 icon="pi pi-check"
                 unstyled
                 :pt="{
-                    root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                    root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
                     label: { class: 'text-white font-bold text-xl' },
                     icon: 'text-white text-2xl'
                 }"
@@ -28,7 +28,7 @@ export default {
                 basic: `
 <Button label="Check" icon="pi pi-check" unstyled
     :pt="{
-        root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+        root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
         label: { class: 'text-white font-bold text-xl' },
         icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
     }"
@@ -39,7 +39,7 @@ export default {
     <div class="card">
         <Button label="Check" icon="pi pi-check" unstyled
             :pt="{
-                root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
                 label: { class: 'text-white font-bold text-xl' },
                 icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
             }"
@@ -54,7 +54,7 @@ export default {
 <template>
     <Button label="Check" icon="pi pi-check" unstyled
         :pt="{
-            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
             label: { class: 'text-white font-bold text-xl' },
             icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
         }"
diff --git a/doc/theming/unstyled/SetupDoc.vue b/doc/theming/unstyled/SetupDoc.vue
index c03070630..404ac41f4 100644
--- a/doc/theming/unstyled/SetupDoc.vue
+++ b/doc/theming/unstyled/SetupDoc.vue
@@ -3,7 +3,7 @@
         <p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Button label="Check" icon="pi pi-check" unstyled />
         </div>
         <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
diff --git a/doc/theming/unstyled/ThemeDoc.vue b/doc/theming/unstyled/ThemeDoc.vue
index ce667f186..be09ecf6a 100644
--- a/doc/theming/unstyled/ThemeDoc.vue
+++ b/doc/theming/unstyled/ThemeDoc.vue
@@ -22,15 +22,15 @@ const app = createApp(App);
 app.use(PrimeVue, {
     pt: {
         button: {
-            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
             label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
             icon: 'text-white text-2xl'
         },
         panel: {
-            header: 'bg-primary border-primary',
+            header: 'bg-primary text-primary-contrast border-primary',
             content: 'border-primary text-lg text-primary-700',
-            title: 'bg-primary text-xl',
-            toggler: 'bg-primary hover:bg-primary-reverse'
+            title: 'bg-primary text-primary-contrast text-xl',
+            toggler: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
         }
     }
 });
diff --git a/doc/tieredmenu/BasicDoc.vue b/doc/tieredmenu/BasicDoc.vue
index 645ca7695..7673bb460 100644
--- a/doc/tieredmenu/BasicDoc.vue
+++ b/doc/tieredmenu/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>TieredMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -87,7 +87,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
 </template>
@@ -172,7 +172,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
 </template>
diff --git a/doc/tieredmenu/CommandDoc.vue b/doc/tieredmenu/CommandDoc.vue
index 61fd5a5b1..4d6a755a0 100644
--- a/doc/tieredmenu/CommandDoc.vue
+++ b/doc/tieredmenu/CommandDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -71,7 +71,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
         <Toast />
     </div>
@@ -140,7 +140,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items" />
         <Toast />
     </div>
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index c16c8ed90..855059c43 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
     </div>
@@ -89,7 +89,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
     </div>
@@ -180,7 +180,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
     </div>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 12208a8ee..d4c99a84e 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -83,7 +83,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -150,7 +150,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
diff --git a/doc/tieredmenu/TemplateDoc.vue b/doc/tieredmenu/TemplateDoc.vue
index 8f864ba87..a61d434c3 100644
--- a/doc/tieredmenu/TemplateDoc.vue
+++ b/doc/tieredmenu/TemplateDoc.vue
@@ -2,14 +2,14 @@
     <DocSectionText v-bind="$attrs">
         <p>TieredMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -105,11 +105,11 @@ export default {
                 basic: `
 <TieredMenu :model="items">
     <template #item="{ item, props, hasSubmenu }">
-        <a v-ripple class="flex align-items-center" v-bind="props.action">
+        <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
@@ -117,14 +117,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -222,14 +222,14 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <TieredMenu :model="items">
             <template #item="{ item, props, hasSubmenu }">
-                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
diff --git a/doc/timeline/AlignmentDoc.vue b/doc/timeline/AlignmentDoc.vue
index 583910720..c27ba3d73 100644
--- a/doc/timeline/AlignmentDoc.vue
+++ b/doc/timeline/AlignmentDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Content location relative the line is defined with the <i>align</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-6">
-        <Timeline :value="events" class="w-full md:w-20rem">
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="right" class="w-full md:w-20rem">
+        <Timeline :value="events" align="right" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="alternate" class="w-full md:w-20rem">
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
@@ -36,19 +36,19 @@ export default {
             ],
             code: {
                 basic: `
-<Timeline :value="events" class="w-full md:w-20rem">
+<Timeline :value="events" class="w-full md:w-80">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
 </Timeline>
 
-<Timeline :value="events" align="right" class="w-full md:w-20rem">
+<Timeline :value="events" align="right" class="w-full md:w-80">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
 </Timeline>
 
-<Timeline :value="events" align="alternate" class="w-full md:w-20rem">
+<Timeline :value="events" align="alternate" class="w-full md:w-80">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
@@ -56,20 +56,20 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-6">
-        <Timeline :value="events" class="w-full md:w-20rem">
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="right" class="w-full md:w-20rem">
+        <Timeline :value="events" align="right" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="alternate" class="w-full md:w-20rem">
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
@@ -94,20 +94,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-6">
-        <Timeline :value="events" class="w-full md:w-20rem">
+    <div class="card flex flex-wrap gap-12">
+        <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="right" class="w-full md:w-20rem">
+        <Timeline :value="events" align="right" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
         </Timeline>
 
-        <Timeline :value="events" align="alternate" class="w-full md:w-20rem">
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
             <template #content="slotProps">
                 {{ slotProps.item.status }}
             </template>
diff --git a/doc/timeline/HorizontalDoc.vue b/doc/timeline/HorizontalDoc.vue
index 7520dc27c..530ec6419 100644
--- a/doc/timeline/HorizontalDoc.vue
+++ b/doc/timeline/HorizontalDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>TimeLine orientation is controlled with the <i>layout</i> property, default is <i>vertical</i> having <i>horizontal</i> as the alternative.</p>
     </DocSectionText>
-    <div class="card flex flex-column gap-3">
+    <div class="card flex flex-col gap-4">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
                 {{ slotProps.item }}
@@ -53,7 +53,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column gap-3">
+    <div class="card flex flex-col gap-4">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
                 {{ slotProps.item }}
@@ -87,7 +87,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column gap-3">
+    <div class="card flex flex-col gap-4">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
                 {{ slotProps.item }}
diff --git a/doc/timeline/OppositeDoc.vue b/doc/timeline/OppositeDoc.vue
index 4c78351b0..b3af07467 100644
--- a/doc/timeline/OppositeDoc.vue
+++ b/doc/timeline/OppositeDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="text-color-secondary">{{ slotProps.item.date }}</small>
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
             </template>
             <template #content="slotProps">
                 {{ slotProps.item.status }}
@@ -29,7 +29,7 @@ export default {
                 basic: `
 <Timeline :value="events">
     <template #opposite="slotProps">
-        <small class="text-color-secondary">{{slotProps.item.date}}</small>
+        <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
     </template>
     <template #content="slotProps">
         {{slotProps.item.status}}
@@ -41,7 +41,7 @@ export default {
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="text-color-secondary">{{slotProps.item.date}}</small>
+                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
             </template>
             <template #content="slotProps">
                 {{slotProps.item.status}}
@@ -70,7 +70,7 @@ export default {
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="text-color-secondary">{{slotProps.item.date}}</small>
+                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
             </template>
             <template #content="slotProps">
                 {{slotProps.item.status}}
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index cc2d501e8..fdbcaf4b6 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -5,12 +5,12 @@
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
-                <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
             <template #content="slotProps">
-                <Card class="mt-3">
+                <Card class="mt-4">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -18,7 +18,7 @@
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-1" />
+                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
@@ -46,12 +46,12 @@ export default {
                 basic: `
 <Timeline :value="events" align="alternate" class="customized-timeline">
     <template #marker="slotProps">
-        <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
+        <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
             <i :class="slotProps.item.icon"></i>
         </span>
     </template>
     <template #content="slotProps">
-        <Card class="mt-3">
+        <Card class="mt-4">
             <template #title>
                 {{ slotProps.item.status }}
             </template>
@@ -59,7 +59,7 @@ export default {
                 {{ slotProps.item.date }}
             </template>
             <template #content>
-                <img v-if="slotProps.item.image" :src="\`/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-1" />
+                <img v-if="slotProps.item.image" :src="\`/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                     neque quas!
@@ -75,12 +75,12 @@ export default {
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
-                <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
             <template #content="slotProps">
-                <Card class="mt-3">
+                <Card class="mt-4">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -88,7 +88,7 @@ export default {
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-1" />
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
@@ -139,12 +139,12 @@ export default {
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
-                <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
             <template #content="slotProps">
-                <Card class="mt-3">
+                <Card class="mt-4">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -152,7 +152,7 @@ export default {
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-1" />
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index fcb43a85a..c9176531e 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -5,7 +5,7 @@
             detail.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" @click="show()" />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Button label="Show" @click="show()" />
     </div>
@@ -40,7 +40,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Button label="Show" @click="show()" />
     </div>
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index de348c785..da5875c3b 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -2,19 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire toast UI instead of the default elements.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
+                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-                    <div class="flex flex-column gap-3 w-full">
+                    <div class="flex flex-col gap-4 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
-                        <div class="flex flex-column gap-2">
+                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
+                        <div class="flex flex-col gap-2">
                             <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
-                        <div class="flex gap-3 mb-3">
+                        <div class="flex gap-4 mb-4">
                             <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
                             <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
@@ -38,16 +38,16 @@ export default {
                 basic: `
 <Toast position="top-center" group="headless" @close="visible = false">
     <template #container="{ message, closeCallback }">
-        <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
+        <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
             <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-            <div class="flex flex-column gap-3 w-full">
+            <div class="flex flex-col gap-4 w-full">
                 <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                <p class="m-0 text-base text-700">{{ message.detail }}</p>
-                <div class="flex flex-column gap-2">
+                <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
+                <div class="flex flex-col gap-2">
                     <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                     <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                 </div>
-                <div class="flex gap-3 mb-3">
+                <div class="flex gap-4 mb-4">
                     <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
                     <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                 </div>
@@ -59,19 +59,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
+                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-                    <div class="flex flex-column gap-3 w-full">
+                    <div class="flex flex-col gap-4 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
-                        <div class="flex flex-column gap-2">
+                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
+                        <div class="flex flex-col gap-2">
                             <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
-                        <div class="flex gap-3 mb-3">
+                        <div class="flex gap-4 mb-4">
                             <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
                             <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
@@ -126,19 +126,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
+                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-                    <div class="flex flex-column gap-3 w-full">
+                    <div class="flex flex-col gap-4 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
-                        <div class="flex flex-column gap-2">
+                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
+                        <div class="flex flex-col gap-2">
                             <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
-                        <div class="flex gap-3 mb-3">
+                        <div class="flex gap-4 mb-4">
                             <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
                             <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index 22b3ecfa9..8042facae 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Multiple" severity="warn" @click="showMultiple()" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Button label="Multiple" severity="warn" @click="showMultiple()" />
     </div>
@@ -40,7 +40,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Button label="Multiple" severity="warn" @click="showMultiple()" />
     </div>
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 77aaa44c4..2d20b8978 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A message can be targeted to a certain Toast component by matching the <i>group</i> keys whereas location is customized with the <i>position</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" @click="showTopLeft" />
             <Button label="Bottom Left" severity="warn" @click="showBottomLeft" />
@@ -28,7 +28,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
@@ -59,7 +59,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index 4284c5f9d..13db6d749 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>severity</i> option specifies the type of the message.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <div class="flex flex-wrap gap-2">
             <Button label="Success" severity="success" @click="showSuccess" />
             <Button label="Info" severity="info" @click="showInfo" />
@@ -31,7 +31,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button label="Success" severity="success" @click="showSuccess" />
@@ -71,7 +71,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button label="Success" severity="success" @click="showSuccess" />
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index e593233f0..fb149ac5c 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A message disappears after the number of milliseconds defined in the <i>life</i> option. Omit the <i>life</i> option to make the message sticky.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <div class="flex flex-wrap gap-2">
             <Button @click="showSticky" label="Sticky" />
             <Button label="Clear" severity="secondary" @click="clear()" />
@@ -23,7 +23,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button @click="showSticky" label="Sticky" />
@@ -47,7 +47,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button @click="showSticky" label="Sticky" />
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index d81242418..0b6b4eab0 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -2,15 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content inside a message is defined with the <i>content</i> template.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-start" style="flex: 1">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-col items-start" style="flex: 1">
+                    <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-900">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
@@ -29,12 +29,12 @@ export default {
                 basic: `
 <Toast position="bottom-center" group="bc" @close="onClose">
     <template #message="slotProps">
-        <div class="flex flex-column align-items-start" style="flex: 1">
-            <div class="flex align-items-center gap-2">
+        <div class="flex flex-col items-start" style="flex: 1">
+            <div class="flex items-center gap-2">
                 <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-900">Amy Elsner</span>
+                <span class="font-bold text-surface-900">Amy Elsner</span>
             </div>
-            <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+            <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
             <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
         </div>
     </template>
@@ -43,15 +43,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-start" style="flex: 1">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-col items-start" style="flex: 1">
+                    <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-900">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
@@ -87,15 +87,15 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-start" style="flex: 1">
-                    <div class="flex align-items-center gap-2">
+                <div class="flex flex-col items-start" style="flex: 1">
+                    <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-900">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
diff --git a/doc/togglebutton/BasicDoc.vue b/doc/togglebutton/BasicDoc.vue
index e25bf906c..b4846df3a 100644
--- a/doc/togglebutton/BasicDoc.vue
+++ b/doc/togglebutton/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,8 +19,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
     </div>
 </template>
 
diff --git a/doc/togglebutton/CustomizedDoc.vue b/doc/togglebutton/CustomizedDoc.vue
index dc74311af..662ff9d55 100644
--- a/doc/togglebutton/CustomizedDoc.vue
+++ b/doc/togglebutton/CustomizedDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,13 +16,13 @@ export default {
             code: {
                 basic: `
 <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-    offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
+    offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-            offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
+            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
     </div>
 </template>
 
@@ -38,9 +38,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
-            offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
+            offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
     </div>
 </template>
 
diff --git a/doc/togglebutton/DisabledDoc.vue b/doc/togglebutton/DisabledDoc.vue
index f65d8675b..c048aaa45 100644
--- a/doc/togglebutton/DisabledDoc.vue
+++ b/doc/togglebutton/DisabledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,13 +16,13 @@ export default {
             code: {
                 basic: `
 <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-    class="w-full sm:w-10rem" aria-label="Confirmation" />
+    class="w-full sm:w-40" aria-label="Confirmation" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-            class="w-full sm:w-10rem" aria-label="Confirmation" />
+            class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
 </template>
 
@@ -38,9 +38,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-            class="w-full sm:w-10rem" aria-label="Confirmation" />
+            class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
 </template>
 
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index e8b35371a..bf9744584 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
+<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
 </template>
 
@@ -36,8 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
     </div>
 </template>
 
diff --git a/doc/toggleswitch/BasicDoc.vue b/doc/toggleswitch/BasicDoc.vue
index 4104280b5..c310d436a 100644
--- a/doc/toggleswitch/BasicDoc.vue
+++ b/doc/toggleswitch/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Two-way value binding is defined using v-model.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
 </template>
diff --git a/doc/toggleswitch/DisabledDoc.vue b/doc/toggleswitch/DisabledDoc.vue
index 8bbcd6f3e..eaecb5be0 100644
--- a/doc/toggleswitch/DisabledDoc.vue
+++ b/doc/toggleswitch/DisabledDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" disabled />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" disabled />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" disabled />
     </div>
 </template>
diff --git a/doc/toggleswitch/InvalidDoc.vue b/doc/toggleswitch/InvalidDoc.vue
index 384ccc06a..da4519acd 100644
--- a/doc/toggleswitch/InvalidDoc.vue
+++ b/doc/toggleswitch/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" invalid />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" invalid />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" invalid />
     </div>
 </template>
diff --git a/doc/toggleswitch/PreselectionDoc.vue b/doc/toggleswitch/PreselectionDoc.vue
index f60777ac8..1c3412d02 100644
--- a/doc/toggleswitch/PreselectionDoc.vue
+++ b/doc/toggleswitch/PreselectionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Enabling <i>checked</i> property displays the component as active initially.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
 </template>
@@ -36,7 +36,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
     </div>
 </template>
diff --git a/doc/toolbar/CustomDoc.vue b/doc/toolbar/CustomDoc.vue
index 51d1a15d6..1b74a563c 100644
--- a/doc/toolbar/CustomDoc.vue
+++ b/doc/toolbar/CustomDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
             <template #start>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -23,7 +23,7 @@
             </template>
 
             <template #end>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Button label="Share" severity="contrast" size="small" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
                 </div>
@@ -41,7 +41,7 @@ export default {
                 basic: `
 <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
     <template #start>
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="..." fill="var(--text-color)" />
                 <path d="..." fill="transparent" />
@@ -53,7 +53,7 @@ export default {
     </template>
 
     <template #end>
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
             <Button label="Share" severity="contrast" size="small" />
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
         </div>
@@ -65,7 +65,7 @@ export default {
     <div class="card">
         <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
             <template #start>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -83,7 +83,7 @@ export default {
             </template>
 
             <template #end>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Button label="Share" severity="contrast" size="small" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
                 </div>
@@ -100,7 +100,7 @@ export default {
     <div class="card">
         <Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
             <template #start>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -118,7 +118,7 @@ export default {
             </template>
 
             <template #end>
-                <div class="flex align-items-center gap-2">
+                <div class="flex items-center gap-2">
                     <Button label="Share" severity="contrast" size="small" />
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
                 </div>
diff --git a/doc/tooltip/AutoHideDoc.vue b/doc/tooltip/AutoHideDoc.vue
index 3116c951c..134d88567 100644
--- a/doc/tooltip/AutoHideDoc.vue
+++ b/doc/tooltip/AutoHideDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
@@ -20,7 +20,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
@@ -28,7 +28,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
diff --git a/doc/tooltip/CustomDoc.vue b/doc/tooltip/CustomDoc.vue
index 45d34dabd..e17b8f9a7 100644
--- a/doc/tooltip/CustomDoc.vue
+++ b/doc/tooltip/CustomDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A tooltip sample with a custom style and content.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button
             v-tooltip.bottom="{
                 value: 'PrimeVue Rocks',
@@ -12,7 +12,7 @@
                             borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
-                    text: 'bg-primary font-medium'
+                    text: 'bg-primary text-primary-contrast font-medium'
                 }
             }"
             severity="secondary"
@@ -37,7 +37,7 @@ export default {
                     borderBottomColor: 'var(--p-primary-color)'
                 }
             },
-            text: 'bg-primary font-medium'
+            text: 'bg-primary text-primary-contrast font-medium'
         }
     }"
     label="Button"
@@ -45,7 +45,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button
             v-tooltip.bottom="{
                 value: 'PrimeVue Rocks',
@@ -55,7 +55,7 @@ export default {
                             borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
-                    text: 'bg-primary font-medium'
+                    text: 'bg-primary text-primary-contrast font-medium'
                 }
             }"
             severity="secondary"
@@ -66,7 +66,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button
             v-tooltip.bottom="{
                 value: 'PrimeVue Rocks',
@@ -76,7 +76,7 @@ export default {
                             borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
-                    text: 'bg-primary font-medium'
+                    text: 'bg-primary text-primary-contrast font-medium'
                 }
             }"
             severity="secondary"
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index 6e207fa46..cc13d4218 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Dlays to the enter and leave events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,14 +18,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
     </div>
 </template>
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index 6bf6a42c7..7a90e5555 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Event to display the tooltip is defined as a modifier, default event is hover.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
     <DocSectionCode :code="code" />
@@ -18,14 +18,14 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
 </template>
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center">
+    <div class="card flex flex-wrap justify-center">
         <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
     </div>
 </template>
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 3efa14b79..ff97c21d0 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
         <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
@@ -24,7 +24,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
         <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
@@ -34,7 +34,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
         <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
diff --git a/doc/tree/BasicDoc.vue b/doc/tree/BasicDoc.vue
index 8947ab1a3..488b538e3 100644
--- a/doc/tree/BasicDoc.vue
+++ b/doc/tree/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -16,12 +16,12 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<Tree :value="nodes" class="w-full md:w-30rem"></Tree>
+<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/ControlledDoc.vue b/doc/tree/ControlledDoc.vue
index 75ab3f36d..55a4fab7e 100644
--- a/doc/tree/ControlledDoc.vue
+++ b/doc/tree/ControlledDoc.vue
@@ -5,12 +5,12 @@
             <i>expandedKeys</i> also supports two-way binding with the v-model directive.
         </p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center">
-        <div class="flex flex-wrap gap-2 mb-4">
+    <div class="card flex flex-col items-center">
+        <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
         </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -25,20 +25,20 @@ export default {
             expandedKeys: {},
             code: {
                 basic: `
-<div class="flex flex-wrap gap-2 mb-4">
+<div class="flex flex-wrap gap-2 mb-6">
     <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
     <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
 </div>
-<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-cente">
-        <div class="flex flex-wrap gap-2 mb-4">
+    <div class="card flex flex-col align-items-cente">
+        <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
         </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -81,12 +81,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-cente">
-        <div class="flex flex-wrap gap-2 mb-4">
+    <div class="card flex flex-col align-items-cente">
+        <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
         </div>
-        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/EventsDoc.vue b/doc/tree/EventsDoc.vue
index 5e74b7e15..253f8f9a6 100644
--- a/doc/tree/EventsDoc.vue
+++ b/doc/tree/EventsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Tree
             v-model:selectionKeys="selectedKey"
             :value="nodes"
@@ -12,7 +12,7 @@
             @nodeUnselect="onNodeUnselect"
             @nodeExpand="onNodeExpand"
             @nodeCollapse="onNodeCollapse"
-            class="w-full md:w-30rem"
+            class="w-full md:w-[30rem]"
         ></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -27,15 +27,15 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-30rem"
-    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-[30rem]"
+    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>
+            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -70,10 +70,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>
+            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/FilterDoc.vue b/doc/tree/FilterDoc.vue
index d90c20fd1..c8a2bf8d4 100644
--- a/doc/tree/FilterDoc.vue
+++ b/doc/tree/FilterDoc.vue
@@ -6,9 +6,9 @@
             the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
         </p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-5">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -22,14 +22,14 @@ export default {
             expandedKeys: {},
             code: {
                 basic: `
-<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
-<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
+<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -71,9 +71,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
-        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
-        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
+    <div class="card flex flex-wrap justify-center gap-8">
+        <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
+        <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index 7e5e9f6a3..6d06cacc7 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -5,14 +5,14 @@
             <i>icon</i> is available.
         </p>
     </DocSectionText>
-    <div class="card flex flex-wrap p-fluid gap-3">
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+    <div class="card flex flex-wrap p-fluid gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
         </div>
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -27,19 +27,19 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
-<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
+<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
+<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap p-fluid gap-3">
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+    <div class="card flex flex-wrap p-fluid gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
         </div>
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
         </div>
     </div>
 </template>
@@ -159,14 +159,14 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap p-fluid gap-3">
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+    <div class="card flex flex-wrap p-fluid gap-4">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
-            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
         </div>
-        <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
+        <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Icon Mode</label>
-            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
+            <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>
         </div>
     </div>
 </template>
diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index cfba2e0ec..b13c3cc2b 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -2,13 +2,13 @@
     <DocSectionText v-bind="$attrs">
         <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -43,7 +43,7 @@ export default {
             ],
             code: {
                 basic: `
-<Tree :value="nodes" class="w-full md:w-30rem">
+<Tree :value="nodes" class="w-full md:w-[30rem]">
     <template #default="slotProps">
         <b>{{ slotProps.node.label }}</b>
     </template>
@@ -54,13 +54,13 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -99,13 +99,13 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Tree :value="nodes" class="w-full md:w-30rem">
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
diff --git a/doc/tree/selection/CheckboxDoc.vue b/doc/tree/selection/CheckboxDoc.vue
index bfe357017..2467abd00 100644
--- a/doc/tree/selection/CheckboxDoc.vue
+++ b/doc/tree/selection/CheckboxDoc.vue
@@ -6,8 +6,8 @@
             selection.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
+    <div class="card flex justify-center">
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -22,13 +22,13 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -57,9 +57,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/selection/MultipleDoc.vue b/doc/tree/selection/MultipleDoc.vue
index 2a5227ce2..764e4c582 100644
--- a/doc/tree/selection/MultipleDoc.vue
+++ b/doc/tree/selection/MultipleDoc.vue
@@ -6,12 +6,12 @@
         </p>
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center justify-content-center">
-        <div class="flex align-items-center mb-4 gap-2">
+    <div class="card flex flex-col items-center justify-center">
+        <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -27,17 +27,17 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem"
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-[30rem]"
     selectionMode="multiple" :metaKeySelection="checked"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-column align-items-center justify-content-center">
-        <div class="flex align-items-center mb-4 gap-2">
+    <div class="card flex flex-col items-center justify-center">
+        <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
     </div>
 </template>
 
@@ -60,12 +60,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column align-items-center justify-content-center">
-        <div class="flex align-items-center mb-4 gap-2">
+    <div class="card flex flex-col items-center justify-center">
+        <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
     </div>
 </template>
 
diff --git a/doc/tree/selection/SingleDoc.vue b/doc/tree/selection/SingleDoc.vue
index 8e40069f1..9a001ae90 100644
--- a/doc/tree/selection/SingleDoc.vue
+++ b/doc/tree/selection/SingleDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
+    <div class="card flex justify-center">
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -17,13 +17,13 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -52,9 +52,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Toast />
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/doc/treeselect/BasicDoc.vue b/doc/treeselect/BasicDoc.vue
index 5c9c39df3..3fd32e411 100644
--- a/doc/treeselect/BasicDoc.vue
+++ b/doc/treeselect/BasicDoc.vue
@@ -6,8 +6,8 @@
         </p>
         <p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -22,12 +22,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
@@ -49,8 +49,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index 1e80925ef..cc6582f61 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -7,8 +7,8 @@
         </p>
     </DocSectionText>
     <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Items" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Items" class="md:w-80 w-full" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -33,12 +33,12 @@ export default {
             },
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
@@ -60,8 +60,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
diff --git a/doc/treeselect/DisabledDoc.vue b/doc/treeselect/DisabledDoc.vue
index 1052a8cd2..449283924 100644
--- a/doc/treeselect/DisabledDoc.vue
+++ b/doc/treeselect/DisabledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -17,12 +17,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
@@ -44,8 +44,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
diff --git a/doc/treeselect/FilledDoc.vue b/doc/treeselect/FilledDoc.vue
index b7832ec46..40f92741d 100644
--- a/doc/treeselect/FilledDoc.vue
+++ b/doc/treeselect/FilledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -18,12 +18,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
@@ -45,8 +45,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index 805124229..f6509dff7 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </FloatLabel>
@@ -21,15 +21,15 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<FloatLabel class="w-full md:w-20rem">
+<FloatLabel class="w-full md:w-80">
     <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
     <label>Tree Select</label>
 </FloatLabel>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </FloatLabel>
@@ -54,8 +54,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <FloatLabel class="w-full md:w-20rem">
+    <div class="card flex justify-center">
+        <FloatLabel class="w-full md:w-80">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </FloatLabel>
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 1b76fb0f9..9c0bac58b 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" invalid class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -18,12 +18,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue" invalid class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" invalid class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
@@ -45,8 +45,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" invalid class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index c0634902f..76ef1fbc5 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -7,8 +7,8 @@
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
     <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Items" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Items" class="md:w-80 w-full" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -30,12 +30,12 @@ export default {
             },
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
@@ -57,8 +57,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-20rem w-full" />
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
     </div>
 </template>
 
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index 8b6dcc8c9..52b85d73b 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -7,7 +7,7 @@
             <TreeTable :value="nodes" tableStyle="min-width: 50rem">
                 <template #header>
                     <div style="text-align: left">
-                        <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip" />
+                        <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip" />
                     </div>
                 </template>
                 <Column field="name" header="Name" :expander="true"></Column>
@@ -32,7 +32,7 @@ export default {
 <TreeTable :value="nodes" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align:left">
-            <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
+            <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
         </div>
     </template>
     <Column field="name" header="Name" :expander="true"></Column>
@@ -45,7 +45,7 @@ export default {
         <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
+                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
                 </div>
             </template>
             <Column field="name" header="Name" :expander="true"></Column>
@@ -90,7 +90,7 @@ export default {
         <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div style="text-align:left">
-                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
+                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-64" display="chip"/>
                 </div>
             </template>
             <Column field="name" header="Name" :expander="true"></Column>
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index 71f865423..68bf18bf4 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -5,7 +5,7 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Button @click="toggleApplications" label="Toggle Applications" />
-            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" expander style="width: 34%"></Column>
                 <Column field="size" header="Size" style="width: 33%"></Column>
                 <Column field="type" header="Type" style="width: 33%"></Column>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <Button @click="toggleApplications" label="Toggle Applications" />
-<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
     <Column field="name" header="Name" expander style="width: 34%"></Column>
     <Column field="size" header="Size" style="width: 33%"></Column>
     <Column field="type" header="Type" style="width: 33%"></Column>
@@ -36,7 +36,7 @@ export default {
 <template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander style="width: 34%"></Column>
             <Column field="size" header="Size" style="width: 33%"></Column>
             <Column field="type" header="Type" style="width: 33%"></Column>
@@ -74,7 +74,7 @@ export default {
 <template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-6" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander style="width: 34%"></Column>
             <Column field="size" header="Size" style="width: 33%"></Column>
             <Column field="type" header="Type" style="width: 33%"></Column>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index ceb25f31a..8790dc508 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -8,12 +8,12 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center mb-4">
+            <div class="flex justify-center mb-6">
                 <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
             </div>
             <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
                 <template #header>
-                    <div class="flex justify-content-end">
+                    <div class="flex justify-end">
                         <IconField>
                             <InputIcon class="pi pi-search" />
                             <InputText v-model="filters['global']" placeholder="Global Search" />
@@ -59,7 +59,7 @@ export default {
 <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
 <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
     <template #header>
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
             <IconField>
                 <InputIcon class="pi pi-search" />
                 <InputText v-model="filters['global']" placeholder="Global Search" />
@@ -86,12 +86,12 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center mb-4">
+        <div class="flex justify-center mb-6">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
         </div>
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <IconField>
                         <InputIcon class="pi pi-search" />
                         <InputText v-model="filters['global']" placeholder="Global Search" />
@@ -141,12 +141,12 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center mb-4">
+        <div class="flex justify-center mb-6">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
         </div>
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
-                <div class="flex justify-content-end">
+                <div class="flex justify-end">
                     <IconField>
                         <InputIcon class="pi pi-search" />
                         <InputText v-model="filters['global']" placeholder="Global Search" />
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index ba354dee1..f496ab229 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center mb-4">
+            <div class="flex justify-center mb-6">
                 <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
             </div>
             <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 60a6d7019..484e6999c 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -20,7 +20,7 @@
                     </template>
                 </Column>
                 <template #footer>
-                    <div class="flex justify-content-start">
+                    <div class="flex justify-start">
                         <Button icon="pi pi-refresh" label="Reload" severity="warn" />
                     </div>
                 </template>
@@ -55,7 +55,7 @@ export default {
         </template>
     </Column>
     <template #footer>
-        <div class="flex justify-content-start">
+        <div class="flex justify-start">
             <Button icon="pi pi-refresh" label="Reload" severity="warn" />
         </div>
     </template>
@@ -80,7 +80,7 @@ export default {
                 </template>
             </Column>
             <template #footer>
-                <div class="flex justify-content-start">
+                <div class="flex justify-start">
                     <Button icon="pi pi-refresh" label="Reload" severity="warn" />
                 </div>
             </template>
@@ -122,7 +122,7 @@ export default {
                 </template>
             </Column>
             <template #footer>
-                <div class="flex justify-content-start">
+                <div class="flex justify-start">
                     <Button icon="pi pi-refresh" label="Reload" severity="warn" />
                 </div>
             </template>
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index 5af540ae5..cc9d82a96 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card flex justify-content-center">
+        <div class="card flex justify-center">
             <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
             <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
@@ -48,7 +48,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
             <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
@@ -81,7 +81,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
             <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index 9f54d30c9..f76e9876b 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -8,7 +8,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+            <div class="flex justify-center items-center mb-6 gap-2">
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
@@ -44,7 +44,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
@@ -76,7 +76,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index 0c7c3d93b..7a0f7d700 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -8,7 +8,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+            <div class="flex justify-center items-center mb-6 gap-2">
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
@@ -44,7 +44,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
@@ -76,7 +76,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
+        <div class="flex justify-center items-center mb-6 gap-2">
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
diff --git a/doc/virtualscroller/BasicDoc.vue b/doc/virtualscroller/BasicDoc.vue
index 46bccc8f6..029e4fbe1 100644
--- a/doc/virtualscroller/BasicDoc.vue
+++ b/doc/virtualscroller/BasicDoc.vue
@@ -5,10 +5,10 @@
             to display. Size of the viewport is configured using <i>scrollWidth</i>, <i>scrollHeight</i> properties directly or with CSS <i>width</i> and <i>height</i> styles.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -22,18 +22,18 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -54,10 +54,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/DelayDoc.vue b/doc/virtualscroller/DelayDoc.vue
index bde7c14a0..1cefb11e1 100644
--- a/doc/virtualscroller/DelayDoc.vue
+++ b/doc/virtualscroller/DelayDoc.vue
@@ -2,28 +2,28 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>delay</i> property adds a threshold to wait in milliseconds during scrolling for render optimization.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -38,48 +38,48 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
-<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
-<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -101,28 +101,28 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
-            <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">150ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">500ms</span>
-            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
diff --git a/doc/virtualscroller/GridDoc.vue b/doc/virtualscroller/GridDoc.vue
index 35c01f10f..c1dea1d48 100644
--- a/doc/virtualscroller/GridDoc.vue
+++ b/doc/virtualscroller/GridDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Scrolling can be enabled vertically and horizontally when <i>orientation</i> is set as <i>both</i>. In this mode, <i>itemSize</i> should be an array where first value is the height of an item and second is the width.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
@@ -23,9 +23,9 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
             <template v-for="(el, index) of item" :key="index">
                 <div style="width: 100px">{{ el }}</div>
             </template>
@@ -35,10 +35,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
@@ -63,10 +63,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index 2cc11daa5..a2a46dbf2 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -19,18 +19,18 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -51,10 +51,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/LazyDoc.vue b/doc/virtualscroller/LazyDoc.vue
index 6dbf7a00b..e3c3df15d 100644
--- a/doc/virtualscroller/LazyDoc.vue
+++ b/doc/virtualscroller/LazyDoc.vue
@@ -5,10 +5,10 @@
             data.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -24,18 +24,18 @@ export default {
             loadLazyTimeout: null,
             code: {
                 basic: `
-<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -81,10 +81,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/LoadingDoc.vue b/doc/virtualscroller/LoadingDoc.vue
index 5159cda4a..16b5e87e4 100644
--- a/doc/virtualscroller/LoadingDoc.vue
+++ b/doc/virtualscroller/LoadingDoc.vue
@@ -5,23 +5,23 @@
             <PrimeVueNuxtLink to="/skeleton">Skeleton</PrimeVueNuxtLink>.
         </p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
@@ -38,18 +38,18 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
-<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
     <template v-slot:loader="{ options }">
-        <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
             <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
         </div>
     </template>
@@ -57,23 +57,23 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
@@ -97,23 +97,23 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-5">
+    <div class="card flex flex-wrap justify-center gap-8">
         <div>
             <span class="font-bold block mb-2">Modal</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
         <div>
             <span class="font-bold block mb-2">Skeleton</span>
-            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
diff --git a/doc/vite/UsageDoc.vue b/doc/vite/UsageDoc.vue
index 689d913ff..e4024da13 100644
--- a/doc/vite/UsageDoc.vue
+++ b/doc/vite/UsageDoc.vue
@@ -5,7 +5,7 @@
             <NuxtLink to="/autoimport">auto imports</NuxtLink> via the unplugin-vue-components plugin.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
     <DocSectionCode :code="code" importCode />
@@ -24,7 +24,7 @@ app.component('Button', Button);
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
 </template>
@@ -34,7 +34,7 @@ app.component('Button', Button);
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
 </template>