From f2446d232b977c44f9e7304598531b19c1d52042 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Fri, 20 Feb 2026 08:17:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Upgrade=20to=20tailwind=20css=20?=
 =?UTF-8?q?4.2.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  5 ++--
 postcss.config.js                             |  2 +-
 src/common/Base.tsx                           |  4 ++--
 src/common/Button.tsx                         |  6 ++---
 src/common/Grid.tsx                           |  4 ++--
 src/common/Popover.tsx                        |  2 +-
 src/common/card/NitroCardHeaderView.tsx       |  2 +-
 src/common/card/NitroCardView.tsx             |  2 +-
 .../card/tabs/NitroCardTabsItemView.tsx       |  4 ++--
 src/common/card/tabs/NitroCardTabsView.tsx    |  2 +-
 src/common/layout/LayoutAvatarImageView.tsx   |  2 +-
 src/common/layout/LayoutBadgeImageView.tsx    |  2 +-
 src/common/layout/LayoutCounterTimeView.tsx   |  2 +-
 src/common/layout/LayoutGiftTagView.tsx       |  4 ++--
 src/common/layout/LayoutGridItem.tsx          |  2 +-
 src/common/layout/LayoutItemCountView.tsx     |  2 +-
 .../layout/LayoutNotificationBubbleView.tsx   |  2 +-
 src/common/layout/LayoutProgressBar.tsx       |  6 ++---
 src/common/layout/LayoutRoomThumbnailView.tsx |  2 +-
 src/common/layout/UserProfileIconView.tsx     |  2 +-
 .../achievements/AchievementsView.tsx         |  4 ++--
 .../avatar-editor/AvatarEditorView.tsx        |  2 +-
 .../AvatarEditorWardrobeView.tsx              |  2 +-
 .../AvatarEditorFigureSetItemView.tsx         |  4 ++--
 .../AvatarEditorPaletteSetItemView.tsx        |  2 +-
 .../backgrounds/BackgroundsView.tsx           |  2 +-
 .../camera/views/CameraWidgetCaptureView.tsx  | 14 +++++------
 .../navigation/CatalogNavigationItemView.tsx  |  4 ++--
 .../navigation/CatalogNavigationView.tsx      |  2 +-
 .../layout/CatalogLayoutBadgeDisplayView.tsx  |  4 ++--
 .../layout/CatalogLayoutColorGroupingView.tsx |  8 +++----
 .../page/layout/CatalogLayoutDefaultView.tsx  |  2 +-
 .../CatalogLayoutGuildCustomFurniView.tsx     |  4 ++--
 .../layout/CatalogLayoutGuildForumView.tsx    |  2 +-
 .../layout/CatalogLayoutRoomBundleView.tsx    |  4 ++--
 .../layout/CatalogLayoutSingleBundleView.tsx  |  4 ++--
 .../layout/CatalogLayoutSoundMachineView.tsx  |  2 +-
 .../page/layout/CatalogLayoutTrophiesView.tsx |  2 +-
 .../page/layout/pets/CatalogLayoutPetView.tsx |  4 ++--
 .../page/widgets/CatalogSpinnerWidgetView.tsx |  2 +-
 .../views/friends-bar/FriendBarItemView.tsx   |  4 ++--
 .../views/friends-bar/FriendsBarView.tsx      |  4 ++--
 .../FriendsMessengerThreadGroup.tsx           |  4 ++--
 src/components/game-center/GameCenterView.tsx |  2 +-
 .../groups/views/GroupBadgeCreatorView.tsx    |  4 ++--
 .../groups/views/GroupCreatorView.tsx         |  8 +++----
 .../groups/views/GroupRoomInformationView.tsx |  2 +-
 .../groups/views/tabs/GroupTabColorsView.tsx  |  4 ++--
 .../guide-tool/views/GuideToolOngoingView.tsx |  4 ++--
 src/components/hc-center/HcCenterView.tsx     |  6 ++---
 src/components/help/views/HelpIndexView.tsx   |  2 +-
 .../views/badge/InventoryBadgeView.tsx        |  2 +-
 .../InventoryFurnitureDeleteView.tsx          |  4 ++--
 .../furniture/InventoryFurnitureView.tsx      |  6 ++---
 .../views/furniture/InventoryTradeView.tsx    |  6 ++---
 .../inventory/views/pet/InventoryPetView.tsx  |  2 +-
 src/components/mod-tools/ModToolsView.tsx     |  8 +++----
 .../views/NavigatorRoomCreatorView.tsx        |  6 ++---
 .../navigator/views/NavigatorRoomInfoView.tsx |  2 +-
 .../NavigatorSearchResultItemInfoView.tsx     | 12 +++++-----
 .../search/NavigatorSearchResultItemView.tsx  |  6 ++---
 .../search/NavigatorSearchResultView.tsx      |  2 +-
 .../NotificationDefaultAlertView.tsx          |  2 +-
 .../NotificationClubGiftBubbleView.tsx        |  2 +-
 src/components/right-side/RightSideView.tsx   |  2 +-
 .../infostand/InfoStandWidgetFurniView.tsx    | 24 +++++++++----------
 .../infostand/InfoStandWidgetPetView.tsx      |  4 ++--
 .../infostand/InfoStandWidgetUserView.tsx     | 14 +++++------
 .../chat-input/ChatInputStyleSelectorView.tsx |  4 ++--
 .../widgets/chat/ChatWidgetMessageView.tsx    |  6 ++---
 .../room/widgets/chat/ChatWidgetView.tsx      |  2 +-
 .../widgets/choosers/ChooserWidgetView.tsx    |  2 +-
 .../context-menu/ContextMenuListItemView.tsx  |  2 +-
 .../widgets/context-menu/ContextMenuView.tsx  |  4 ++--
 .../furniture/FurnitureCraftingView.tsx       |  2 +-
 .../furniture/FurnitureExchangeCreditView.tsx |  2 +-
 .../furniture/FurnitureMannequinView.tsx      |  4 ++--
 .../FurnitureMysteryTrophyOpenDialogView.tsx  |  4 ++--
 .../furniture/FurnitureSpamWallPostItView.tsx |  2 +-
 .../furniture/FurnitureStickieView.tsx        |  2 +-
 .../playlist-editor/DiskInventoryView.tsx     |  2 +-
 .../mysterybox/MysteryBoxExtensionView.tsx    |  6 ++---
 .../pet-package/PetPackageWidgetView.tsx      |  4 ++--
 .../room-promotes/RoomPromotesWidgetView.tsx  |  2 +-
 src/components/toolbar/ToolbarMeView.tsx      |  2 +-
 src/components/toolbar/ToolbarView.tsx        |  2 +-
 .../user-profile/GroupsContainerView.tsx      |  2 +-
 .../RelationshipsContainerView.tsx            |  4 ++--
 src/css/index.css                             | 24 +++++++++----------
 src/css/widgets/ChooserWidgets.css            |  1 -
 src/layout/InfiniteGrid.tsx                   |  2 +-
 src/layout/NitroCard.tsx                      |  6 ++---
 src/layout/NitroItemCountBadge.tsx            |  2 +-
 93 files changed, 188 insertions(+), 188 deletions(-)

diff --git a/package.json b/package.json
index 0999631..b389d84 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/postcss": "^4.2.0",
         "@types/node": "^25.3.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -40,10 +41,10 @@
         "postcss": "^8.5.6",
         "postcss-nested": "^7.0.2",
         "sass": "^1.97.3",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.2.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.56.0",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^6.1.1"
     }
-}
\ No newline at end of file
+}
diff --git a/postcss.config.js b/postcss.config.js
index 9855208..f16a034 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,7 +2,7 @@
 
 module.exports = {
     plugins: {
-        tailwindcss: {},
+        '@tailwindcss/postcss': {},
         autoprefixer: {}
     }
 }
diff --git a/src/common/Base.tsx b/src/common/Base.tsx
index a2747c6..1e18c0c 100644
--- a/src/common/Base.tsx
+++ b/src/common/Base.tsx
@@ -37,9 +37,9 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 
         if(fitV) newClassNames.push('vw-full', 'vh-full');
 
-        if(grow) newClassNames.push('!flex-grow');
+        if(grow) newClassNames.push('grow!');
 
-        if(shrink) newClassNames.push('!flex-shrink-0');
+        if(shrink) newClassNames.push('shrink-0!');
 
         if(overflow) newClassNames.push('overflow-' + overflow);
 
diff --git a/src/common/Button.tsx b/src/common/Button.tsx
index 5caca6c..6b7d454 100644
--- a/src/common/Button.tsx
+++ b/src/common/Button.tsx
@@ -19,7 +19,7 @@ export const Button: FC<ButtonProps> = props =>
 
         // fucked up method i know (i dont have a clue what im doing because im a ninja)
 
-        const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] border-[transparent] px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,_background-color_.15s_ease-in-out,_border-color_.15s_ease-in-out,_box-shadow_.15s_ease-in-out]' ];
+        const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ];
 
         if(variant)
         {
@@ -40,7 +40,7 @@ export const Button: FC<ButtonProps> = props =>
                 newClassNames.push('text-white  bg-[#000] border-[#000] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white  hover:bg-[#000] hover:border-[#000]');
 
             if(variant == 'secondary')
-                newClassNames.push('text-white  bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,_inset_0_-2px_#0000001a,_0_1px_#0000001a]  hover:text-white hover:bg-[#144f67] hover:border-[#134a61]');
+                newClassNames.push('text-white  bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a]  hover:text-white hover:bg-[#144f67] hover:border-[#134a61]');
 
             if(variant == 'dark')
                 newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]');
@@ -54,7 +54,7 @@ export const Button: FC<ButtonProps> = props =>
         {
             if(size == 'sm')
             {
-                newClassNames.push('!px-[.5rem] !py-[.25rem] !text-[.7875rem] !rounded-[.2rem] !min-h-[28px]');
+                newClassNames.push('px-[.5rem]! py-[.25rem]! text-[.7875rem]! rounded-[.2rem]! min-h-[28px]!');
             }
         }
 
diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx
index 441db8a..9bf81b0 100644
--- a/src/common/Grid.tsx
+++ b/src/common/Grid.tsx
@@ -25,12 +25,12 @@ export const Grid: FC<GridProps> = props =>
 
 
         if(inline) newClassNames.push('inline-grid');
-        else newClassNames.push('grid grid-rows-[repeat(var(--bs-rows,_1),_1fr)] grid-cols-[repeat(var(--bs-columns,_12),_1fr)]');
+        else newClassNames.push('grid grid-rows-[repeat(var(--bs-rows,1),1fr)] grid-cols-[repeat(var(--bs-columns,12),1fr)]');
 
         if(gap) newClassNames.push('gap-' + gap);
         else if(gap === 0) newClassNames.push('gap-0');
 
-        if(maxContent) newClassNames.push('[flex-basis:max-content]');
+        if(maxContent) newClassNames.push('basis-[max-content]');
 
         if(alignSelf) newClassNames.push('self-' + alignSelf);
 
diff --git a/src/common/Popover.tsx b/src/common/Popover.tsx
index 5a7c5c8..c6a1b7c 100644
--- a/src/common/Popover.tsx
+++ b/src/common/Popover.tsx
@@ -43,7 +43,7 @@ export const ReactPopover: FC<PropsWithChildren<{
                 { children }
             </div>
             <div
-                className="min-w-fit w-[200px] h-fit absolute bottom-[100%] z-50 transition-all"
+                className="min-w-fit w-[200px] h-fit absolute bottom-full z-50 transition-all"
                 hidden={ !show }>
                 <div className="rounded bg-white p-3 shadow-[10px_30px_150px_rgba(46,38,92,0.25)] mb-[10px]">
                     { content }
diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx
index 2cfd638..5734567 100644
--- a/src/common/card/NitroCardHeaderView.tsx
+++ b/src/common/card/NitroCardHeaderView.tsx
@@ -28,7 +28,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
             <Flex center fullWidth>
                 <span className="text-xl text-white drop-shadow-lg">{ headerText }</span>
                 { isGalleryPhoto &&
-                    <Base className="end-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
+                    <Base className="inset-e-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
                         <FaFlag className="fa-icon" />
                     </Base>
                 }
diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx
index 9018cac..2735f61 100644
--- a/src/common/card/NitroCardView.tsx
+++ b/src/common/card/NitroCardView.tsx
@@ -18,7 +18,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         const newClassNames: string[] = [ 'resize', 'rounded', 'shadow', ];
 
         // Card Theme Changer
-        newClassNames.push('border-[1px] border-[#283F5D]');
+        newClassNames.push('border border-[#283F5D]');
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/card/tabs/NitroCardTabsItemView.tsx b/src/common/card/tabs/NitroCardTabsItemView.tsx
index 2f0b014..2f6b823 100644
--- a/src/common/card/tabs/NitroCardTabsItemView.tsx
+++ b/src/common/card/tabs/NitroCardTabsItemView.tsx
@@ -14,8 +14,8 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-[1] border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-[1] before:bg-[#C2C9D1]',
-            isActive && 'bg-card-tab-item-active -mb-[1px] before:bg-white' ];
+        const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
+            isActive && 'bg-card-tab-item-active -mb-px before:bg-white' ];
 
         //if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');
 
diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx
index 8e5d118..5e14506 100644
--- a/src/common/card/tabs/NitroCardTabsView.tsx
+++ b/src/common/card/tabs/NitroCardTabsView.tsx
@@ -7,7 +7,7 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-[1px]' ];
+        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/LayoutAvatarImageView.tsx b/src/common/layout/LayoutAvatarImageView.tsx
index 86d589e..26e3d55 100644
--- a/src/common/layout/LayoutAvatarImageView.tsx
+++ b/src/common/layout/LayoutAvatarImageView.tsx
@@ -22,7 +22,7 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat bg-[center_-8px] pointer-events-none' ];
+        const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat bg-position-[center_-8px] pointer-events-none' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/LayoutBadgeImageView.tsx b/src/common/layout/LayoutBadgeImageView.tsx
index bac40bc..f1639c4 100644
--- a/src/common/layout/LayoutBadgeImageView.tsx
+++ b/src/common/layout/LayoutBadgeImageView.tsx
@@ -99,7 +99,7 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
     return (
         <Base className="group" classNames={ getClassNames } style={ getStyle } { ...rest }>
             { (showInfo && GetConfigurationValue<boolean>('badge.descriptions.enabled', true)) &&
-                <Base className="hidden group-hover:block  before:absolute before:content-['_'] before:w-[0] before:h-[0] before:!border-l-[10px] before:!border-b-[10px] before:!border-t-[10px] before:top-[10px] before:-right-[10px] before:[border-left-color:white] before:[border-top-color:transparent] before:[border-bottom-color:transparent] z-50 absolute pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] -left-[220px] text-black py-1 px-2 small">
+                <Base className="hidden group-hover:block  before:absolute before:content-['_'] before:w-0 before:h-0 before:border-l-10! before:border-b-10! before:border-t-10! before:top-[10px] before:-right-[10px] before:border-l-[white] before:border-t-transparent before:border-b-transparent z-50 absolute pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] -left-[220px] text-black py-1 px-2 small">
                     <div className="font-bold mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</div>
                     <div>{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }</div>
                 </Base> }
diff --git a/src/common/layout/LayoutCounterTimeView.tsx b/src/common/layout/LayoutCounterTimeView.tsx
index 9b37095..9a0e748 100644
--- a/src/common/layout/LayoutCounterTimeView.tsx
+++ b/src/common/layout/LayoutCounterTimeView.tsx
@@ -24,7 +24,7 @@ export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
     }, [ classNames ]);
 
     return (
-        <div className="flex gap-1 top-2 end-2">
+        <div className="flex gap-1 top-2 inset-e-2">
             <Base classNames={ getClassNames } { ...rest }>
                 <div>{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
             </Base>
diff --git a/src/common/layout/LayoutGiftTagView.tsx b/src/common/layout/LayoutGiftTagView.tsx
index 75004ec..5b240b0 100644
--- a/src/common/layout/LayoutGiftTagView.tsx
+++ b/src/common/layout/LayoutGiftTagView.tsx
@@ -20,14 +20,14 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
 
     return (
         <Flex className="nitro-gift-card text-black" overflow="hidden">
-            <div className="flex items-center justify-center gift-face flex-shrink-0">
+            <div className="flex items-center justify-center gift-face shrink-0">
                 { !userName && <div className="gift-incognito"></div> }
                 { figure && <div className="gift-avatar">
                     <LayoutAvatarImageView direction={ 2 } figure={ figure } headOnly={ true } />
                 </div> }
             </div>
             <Flex className="w-full pt-4 pb-4 pe-4 ps-3" overflow="hidden">
-                <Column className="!flex-grow" justifyContent="between" overflow="auto">
+                <Column className="grow!" justifyContent="between" overflow="auto">
                     { !editable &&
                         <Text textBreak className="gift-message">{ message }</Text> }
                     { editable && (onChange !== null) &&
diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx
index 5bf73ea..1c719bd 100644
--- a/src/common/layout/LayoutGridItem.tsx
+++ b/src/common/layout/LayoutGridItem.tsx
@@ -27,7 +27,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
         const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-muted', 'rounded' ];
 
 
-        if(itemActive) newClassNames.push('!bg-[#ececec] !border-[#fff]');
+        if(itemActive) newClassNames.push('bg-[#ececec]! border-[#fff]!');
 
         if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
 
diff --git a/src/common/layout/LayoutItemCountView.tsx b/src/common/layout/LayoutItemCountView.tsx
index 5b14ed5..96c70e8 100644
--- a/src/common/layout/LayoutItemCountView.tsx
+++ b/src/common/layout/LayoutItemCountView.tsx
@@ -12,7 +12,7 @@ export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem]', '!border-[1px] !border-[solid] !border-[#283F5D]', 'border-black', 'bg-danger', 'px-1', 'top-[2px] right-[2px] text-[9.5px] px-[3px] py-[2px]        ' ];
+        const newClassNames: string[] = [ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem]', 'border! border-[solid]! border-[#283F5D]!', 'border-black', 'bg-danger', 'px-1', 'top-[2px] right-[2px] text-[9.5px] px-[3px] py-[2px]        ' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/LayoutNotificationBubbleView.tsx b/src/common/layout/LayoutNotificationBubbleView.tsx
index 0b62a84..b502b3b 100644
--- a/src/common/layout/LayoutNotificationBubbleView.tsx
+++ b/src/common/layout/LayoutNotificationBubbleView.tsx
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] ', 'rounded' ];
+        const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/LayoutProgressBar.tsx b/src/common/layout/LayoutProgressBar.tsx
index dbbd8f9..e538657 100644
--- a/src/common/layout/LayoutProgressBar.tsx
+++ b/src/common/layout/LayoutProgressBar.tsx
@@ -14,7 +14,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'border-[1px] border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295]        ', 'text-white' ];
+        const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295]        ', 'text-white' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
@@ -24,8 +24,8 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
     return (
         <Column classNames={ getClassNames } justifyContent={ justifyContent } position={ position } { ...rest }>
             { text && (text.length > 0) &&
-                <Flex center fit className="[text-shadow:0px_4px_4px_rgba(0,_0,_0,_.25)] z-20" position="absolute">{ text }</Flex> }
-            <Base className="h-full z-10 [transition:all_1s] rounded-[.125rem] bg-[repeating-linear-gradient(#2DABC2,_#2DABC2_50%,_#2B91A7_50%,_#2B91A7_100%)]" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
+                <Flex center fit className="[text-shadow:0px_4px_4px_rgba(0,0,0,.25)] z-20" position="absolute">{ text }</Flex> }
+            <Base className="h-full z-10 [transition:all_1s] rounded-[.125rem] bg-[repeating-linear-gradient(#2DABC2,#2DABC2_50%,#2B91A7_50%,#2B91A7_100%)]" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
             { children }
         </Column>
     );
diff --git a/src/common/layout/LayoutRoomThumbnailView.tsx b/src/common/layout/LayoutRoomThumbnailView.tsx
index d6626ff..d85daea 100644
--- a/src/common/layout/LayoutRoomThumbnailView.tsx
+++ b/src/common/layout/LayoutRoomThumbnailView.tsx
@@ -14,7 +14,7 @@ export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded', '!border-[1px] !border-[solid] !border-[#283F5D]' ];
+        const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded', 'border! border-[solid]! border-[#283F5D]!' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/UserProfileIconView.tsx b/src/common/layout/UserProfileIconView.tsx
index 8898c70..a0b6cf4 100644
--- a/src/common/layout/UserProfileIconView.tsx
+++ b/src/common/layout/UserProfileIconView.tsx
@@ -14,7 +14,7 @@ export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'bg-[url("@/assets/images/friends/friends-spritesheet.png")]', 'w-[13px] h-[11px] bg-[-51px_-91px]' ];
+        const newClassNames: string[] = [ 'bg-[url("@/assets/images/friends/friends-spritesheet.png")]', 'w-[13px] h-[11px] bg-position-[-51px_-91px]' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/components/achievements/AchievementsView.tsx b/src/components/achievements/AchievementsView.tsx
index bdb80ae..1ed3973 100644
--- a/src/components/achievements/AchievementsView.tsx
+++ b/src/components/achievements/AchievementsView.tsx
@@ -69,7 +69,7 @@ export const AchievementsView: FC<{}> = (props) =>
                         className="bg-[url('@/assets/images/achievements/back-arrow.png')] bg-center no-repeat w-[33px] h-[34px]"
                         onClick={(event) => setSelectedCategoryCode(null)}
                     />
-                    <Column className="!flex-grow" gap={0}>
+                    <Column className="grow!" gap={0}>
                         <Text
                             className="text-small"
                             fontSize={4}
@@ -110,7 +110,7 @@ export const AchievementsView: FC<{}> = (props) =>
                             setSelectedCategoryCode={setSelectedCategoryCode}
                         />
                         <div
-                            className="flex flex-col justify-end flex-grow gap-1"
+                            className="flex flex-col justify-end grow gap-1"
                         >
                             <Text center small>
                                 {LocalizeText(
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 5dea113..0e97dbe 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -98,7 +98,7 @@ export const AvatarEditorView: FC<{}> = props =>
                     </div>
                     <div className="flex flex-col col-span-3 overflow-hidden gap-1">
                         <AvatarEditorFigurePreviewView />
-                        <div className="flex flex-col !flex-grow gap-1">
+                        <div className="flex flex-col grow! gap-1">
                             <div className="relative inline-flex align-middle">
                                 <Button className="flex-auto " variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                     <FaRedo className="fa-icon" />
diff --git a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
index 6981bd5..8b7875a 100644
--- a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
@@ -48,7 +48,7 @@ export const AvatarEditorWardrobeView: FC<{}> = props =>
                     { figureContainer &&
                     <LayoutAvatarImageView direction={ 2 } figure={ figureContainer.getFigureString() } gender={ gender } /> }
                     <div className="avatar-shadow" />
-                    { !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="absolute top-1 start-1" type="hc" /> }
+                    { !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="absolute top-1 inset-s-1" type="hc" /> }
                     <div className="flex gap-1 button-container">
                         <Button fullWidth variant="link" onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
                         { figureContainer &&
diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
index 4126fa3..f2d5a74 100644
--- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -48,9 +48,9 @@ export const AvatarEditorFigureSetItemView: FC<{
 
     return (
         <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
-            { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
+            { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
             { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="end-1 bottom-1 absolute" icon="sellable" /> }
+            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
         </InfiniteGrid.Item>
     );
 };
diff --git a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
index 8a520bc..87dd5f5 100644
--- a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
+++ b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
@@ -19,7 +19,7 @@ export const AvatarEditorPaletteSetItem: FC<{
 
     return (
         <InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
-            { isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
+            { isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
         </InfiniteGrid.Item>
     );
 };
diff --git a/src/components/backgrounds/BackgroundsView.tsx b/src/components/backgrounds/BackgroundsView.tsx
index 4813b47..9782dd6 100644
--- a/src/components/backgrounds/BackgroundsView.tsx
+++ b/src/components/backgrounds/BackgroundsView.tsx
@@ -82,7 +82,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
             className={item.selectable ? '' : 'non-selectable'}
         >
             <Base className={`profile-${type} ${type}-${item.id}`} />
-            {item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 end-1" type="hc" />}
+            {item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" />}
         </Flex>
     ), [handleSelection]);
 
diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx
index 89fe25e..4249d49 100644
--- a/src/components/camera/views/CameraWidgetCaptureView.tsx
+++ b/src/components/camera/views/CameraWidgetCaptureView.tsx
@@ -61,27 +61,27 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
         <DraggableWindow uniqueKey="nitro-camera-capture">
             <Column center className="relative" gap={ 0 }>
                 { selectedPicture && <img alt="" className="absolute top-[37px] left-[10px] w-[320px] h-[320px]" src={ selectedPicture.imageUrl } /> }
-                <div className="relative w-[340px] h-[462px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-1px_-1px] drag-handler">
-                    <div className="absolute top-[8px] right-[8px] rounded-[.25rem] [box-shadow:0_0_0_1.5px_#fff] border-[2px] border-[solid] border-[#921911] bg-[repeating-linear-gradient(rgb(245,_80,_65),_rgb(245,_80,_65)_50%,_rgb(194,_48,_39)_50%,_rgb(194,_48,_39)_100%)] cursor-pointer leading-none px-[3px] py-px" onClick={ onClose }>
+                <div className="relative w-[340px] h-[462px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-1px_-1px] drag-handler">
+                    <div className="absolute top-[8px] right-[8px] rounded-[.25rem] [box-shadow:0_0_0_1.5px_#fff] border-2 border-[solid] border-[#921911] bg-[repeating-linear-gradient(rgb(245,80,65),rgb(245,80,65)_50%,rgb(194,48,39)_50%,rgb(194,48,39)_100%)] cursor-pointer leading-none px-[3px] py-px" onClick={ onClose }>
                         <FaTimes className="fa-icon" />
                     </div>
-                    { !selectedPicture && <div ref={ elementRef } className="absolute top-[37px] left-[10px] w-[320px] h-[320px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-343px_-1px]" /> }
+                    { !selectedPicture && <div ref={ elementRef } className="absolute top-[37px] left-[10px] w-[320px] h-[320px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-343px_-1px]" /> }
                     { selectedPicture &&
                         <div className="absolute top-[37px] left-[10px] w-[320px] h-[320px] ">
-                            <div className="bg-[rgba(0,_0,_0,_0.5)] w-full absolute bottom-0 py-2 text-center inline-flex justify-center">
+                            <div className="bg-[rgba(0,0,0,0.5)] w-full absolute bottom-0 py-2 text-center inline-flex justify-center">
                                 <Button className="me-3" title={ LocalizeText('camera.editor.button.tooltip') } variant="success" onClick={ onEdit }>{ LocalizeText('camera.editor.button.text') }</Button>
                                 <Button variant="danger" onClick={ onDelete }>{ LocalizeText('camera.delete.button.text') }</Button>
                             </div>
                         </div> }
                     <div className="flex justify-center">
-                        <div className="w-[94px] h-[94px] cursor-pointer mt-[362px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-343px_-321px]" title={ LocalizeText('camera.take.photo.button.tooltip') } onClick={ takePicture } />
+                        <div className="w-[94px] h-[94px] cursor-pointer mt-[362px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-343px_-321px]" title={ LocalizeText('camera.take.photo.button.tooltip') } onClick={ takePicture } />
                     </div>
                 </div>
                 { (cameraRoll.length > 0) &&
-                    <div className="w-[330px] bg-[#bab8b4] rounded-bl-[10px] rounded-br-[10px] border-[1px] border-[solid] border-[black] [box-shadow:inset_1px_0px_white,_inset_-1px_-1px_white] flex justify-center py-2">
+                    <div className="w-[330px] bg-[#bab8b4] rounded-bl-[10px] rounded-br-[10px] border border-[solid] border-[black] [box-shadow:inset_1px_0px_white,inset_-1px_-1px_white] flex justify-center py-2">
                         { cameraRoll.map((picture, index) =>
                         {
-                            return <img key={ index } alt="" className="w-[56px] h-[56px] border-[1px] border-[solid] border-[black] object-contain [image-rendering:initial]" src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
+                            return <img key={ index } alt="" className="w-[56px] h-[56px] border border-[solid] border-[black] object-contain [image-rendering:initial]" src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
                         }) }
                     </div> }
             </Column>
diff --git a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
index 1bb4373..48ea04e 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
@@ -19,9 +19,9 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
 
     return (
         <div className={ child ? 'pl-[5px] border-s-2 border-[#b6bec5]' : '' }>
-            <LayoutGridItem className={ ' !h-[23px] bg-[#cdd3d9] !border-[0] px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
+            <LayoutGridItem className={ ' h-[23px]! bg-[#cdd3d9] border-0! px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
                 <CatalogIconView icon={ node.iconId } />
-                <Text truncate className="!flex-grow">{ node.localization }</Text>
+                <Text truncate className="grow!">{ node.localization }</Text>
                 { node.isBranch &&
                     <>
                         { node.isOpen && <FaCaretUp className="fa-icon" /> }
diff --git a/src/components/catalog/views/navigation/CatalogNavigationView.tsx b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
index da5c850..10e2a2f 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
@@ -19,7 +19,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     return (
         <>
             <CatalogSearchView />
-            <Column fullHeight className="!border-[#b6bec5] bg-[#cdd3d9] border-[2px] border-[solid] rounded p-1" overflow="hidden">
+            <Column fullHeight className="border-[#b6bec5]! bg-[#cdd3d9] border-2 border-[solid] rounded p-1" overflow="hidden">
                 <AutoGrid columnCount={ 1 } gap={ 1 } id="nitro-catalog-main-navigation">
                     { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
                     {
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index 224946e..f2bd6f3 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -38,9 +38,9 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                             <div className="relative overflow-hidden">
                                 <CatalogViewProductWidgetView />
                             </div>
-                            <Column className="!flex-grow" gap={ 1 }>
+                            <Column className="grow!" gap={ 1 }>
                                 <CatalogLimitedItemWidgetView />
-                                <Text truncate className="!flex-grow">{ currentOffer.localizationName }</Text>
+                                <Text truncate className="grow!">{ currentOffer.localizationName }</Text>
                                 <div className="flex justify-end">
                                     <CatalogTotalPriceWidget alignItems="end" />
                                 </div>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
index 41d2014..47e0dc6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
@@ -152,15 +152,15 @@ export const CatalogLayoutColorGroupingView: FC<CatalogLayoutColorGroupViewProps
                     <>
                         <div className="relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
+                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" position="absolute" />
                             { currentOffer.product.furnitureData.hasIndexedColor &&
-                                <Button className="bottom-1 start-1" position="absolute" onClick={ event => setColorsShowing(prev => !prev) }>
+                                <Button className="bottom-1 inset-s-1" position="absolute" onClick={ event => setColorsShowing(prev => !prev) }>
                                     <FaFillDrip className="fa-icon" />
                                 </Button> }
                         </div>
-                        <Column className="!flex-grow" gap={ 1 }>
+                        <Column className="grow!" gap={ 1 }>
                             <CatalogLimitedItemWidgetView />
-                            <Text truncate className="!flex-grow">{ currentOffer.localizationName }</Text>
+                            <Text truncate className="grow!">{ currentOffer.localizationName }</Text>
                             <div className="flex justify-between">
                                 <div className="flex flex-col gap-1">
                                     <CatalogSpinnerWidgetView />
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index 4b86622..50b2955 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -38,7 +38,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                                 { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                                     <>
                                         <CatalogViewProductWidgetView />
-                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
+                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" />
                                     </> }
                                 { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                             </Flex>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
index 20805ba..f94bd0e 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
@@ -29,11 +29,11 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
                     <>
                         <div className="relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogGuildBadgeWidgetView className="bottom-1 end-1" position="absolute" />
+                            <CatalogGuildBadgeWidgetView className="bottom-1 inset-e-1" position="absolute" />
                         </div>
                         <Column grow gap={ 1 }>
                             <Text truncate>{ currentOffer.localizationName }</Text>
-                            <div className="!flex-grow">
+                            <div className="grow!">
                                 <CatalogGuildSelectorWidgetView />
                             </div>
                             <div className="flex justify-end">
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
index ed87f49..c21b204 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
@@ -33,7 +33,7 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
                         <>
                             <Column grow gap={ 1 }>
                                 <Text truncate>{ currentOffer.localizationName }</Text>
-                                <div className="!flex-grow">
+                                <div className="grow!">
                                     <CatalogGuildSelectorWidgetView />
                                 </div>
                                 <div className="flex justify-end">
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
index 29fe154..54df095 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
@@ -27,8 +27,8 @@ export const CatalogLayoutRoomBundleView: FC<CatalogLayoutProps> = props =>
                         <Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
                     <Column grow gap={ 0 } overflow="hidden" position="relative">
                         { !!page.localization.getImage(1) &&
-                            <img alt="" className="!flex-grow" src={ page.localization.getImage(1) } /> }
-                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
+                            <img alt="" className="grow!" src={ page.localization.getImage(1) } /> }
+                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 inset-s-0" position="absolute" />
                         <CatalogSimplePriceWidgetView />
                     </Column>
                     <div className="flex flex-col gap-1">
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
index 616375d..99357a8 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
@@ -27,8 +27,8 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutProps> = props =>
                         <Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
                     <Column grow gap={ 0 } overflow="hidden" position="relative">
                         { !!page.localization.getImage(1) &&
-                            <img alt="" className="!flex-grow" src={ page.localization.getImage(1) } /> }
-                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
+                            <img alt="" className="grow!" src={ page.localization.getImage(1) } /> }
+                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 inset-s-0" position="absolute" />
                         <CatalogSimplePriceWidgetView />
                     </Column>
                     <div className="flex flex-col gap-1">
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
index 9b64fbd..0df267d 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
@@ -88,7 +88,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
                                 { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                                     <>
                                         <CatalogViewProductWidgetView />
-                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
+                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" />
                                     </> }
                                 { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                             </div>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index d228cfb..bcea3d6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -31,7 +31,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
         <Grid>
             <Column overflow="hidden" size={ 7 }>
                 <CatalogItemGridWidgetView />
-                <textarea className="!flex-grow form-control w-full" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
+                <textarea className="grow! form-control w-full" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
             </Column>
             <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index 7e60d96..4ae852e 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -218,9 +218,9 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
                     <>
                         <div className="relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
+                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" position="absolute" />
                             { ((petIndex > -1) && (petIndex <= 7)) &&
-                                <Button className="bottom-1 start-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
+                                <Button className="bottom-1 inset-s-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
                                     <FaFillDrip className="fa-icon" />
                                 </Button> }
                         </div>
diff --git a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
index bf41629..d0116c1 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
@@ -38,7 +38,7 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
             <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
             <div className="flex items-center gap-1">
                 <FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
-                <input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-[0] text-right  rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
+                <input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-0 text-right  rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
                 <FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
             </div>
         </>
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index ccc46ad..7e4a5a4 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
         return (
-            <Button className="border w-[130px] mx-[3px] my-[0] z-0 relative pl-[37px] text-left friend-bar-search" justifyContent="start" size="md">
+            <Button className="border w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left friend-bar-search" justifyContent="start" size="md">
                 <div className="absolute -top-[3px] left-[5px] w-[31px] h-[34px] bg-[url('@/assets/images/toolbar/friend-search.png')]" />
                 <div className="truncate">{ LocalizeText('friend.bar.find.title') }</div>
             </Button>
@@ -41,7 +41,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     }
 
     return (
-        <Button className={ ' block w-[130px] mx-[3px] my-[0] z-0 relative pl-[37px] text-left' + (isVisible ? 'mb-[21px]' : '') } justifyContent="start" size="md" variant={ 'success' } onClick={ event => setVisible(prevValue => !prevValue) }>
+        <Button className={ ' block w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left' + (isVisible ? 'mb-[21px]' : '') } justifyContent="start" size="md" variant={ 'success' } onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={ `friend-bar-item-head absolute ${ friend.id > 0 ? '-top-[30px] -left-[30px]' : '-top-[5px] -left-[3.5px]' }` }>
                 { (friend.id > 0) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
                 { (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index 663f2f0..18b19ad 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -14,11 +14,11 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
 
     return (
         <div ref={ elementRef } className="flex items-center       ">
-            <Button className="z-[2] cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
+            <Button className="z-2 cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <FaChevronLeft className="fa-icon" />
             </Button>
             { Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[indexOffset + i] || null) } />) }
-            <Button className="z-[2] cursor-pointer" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
+            <Button className="z-2 cursor-pointer" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <FaChevronRight className="fa-icon" />
             </Button>
         </div>
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
index a6c35b4..6827fb1 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
@@ -33,12 +33,12 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
                             <Base className="w-full text-break">
                                 { (chat.type === MessengerThreadChat.SECURITY_NOTIFICATION) &&
                                     <Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-muted" gap={ 2 }>
-                                        <Base className="nitro-friends-spritesheet icon-warning flex-shrink-0" />
+                                        <Base className="nitro-friends-spritesheet icon-warning shrink-0" />
                                         <Base>{ chat.message }</Base>
                                     </Flex> }
                                 { (chat.type === MessengerThreadChat.ROOM_INVITE) &&
                                     <Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-black" gap={ 2 }>
-                                        <Base className="messenger-notification-icon flex-shrink-0" />
+                                        <Base className="messenger-notification-icon shrink-0" />
                                         <Base>{ (LocalizeText('messenger.invitation') + ' ') }{ chat.message }</Base>
                                     </Flex> }
                             </Base>
diff --git a/src/components/game-center/GameCenterView.tsx b/src/components/game-center/GameCenterView.tsx
index 3b398d5..27b6055 100644
--- a/src/components/game-center/GameCenterView.tsx
+++ b/src/components/game-center/GameCenterView.tsx
@@ -39,7 +39,7 @@ export const GameCenterView = () =>
 
     if(!isVisible || !games || !accountStatus) return;
 
-    return <Flex className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center" position="absolute">
+    return <Flex className="top-0 bottom-0 inset-s-0 inset-e-0 bg-black" justifyContent="center" position="absolute">
         <Flex column className="game-center-main">
             <GameView/>
             <GameListView />
diff --git a/src/components/groups/views/GroupBadgeCreatorView.tsx b/src/components/groups/views/GroupBadgeCreatorView.tsx
index 3f2e905..afb00e7 100644
--- a/src/components/groups/views/GroupBadgeCreatorView.tsx
+++ b/src/components/groups/views/GroupBadgeCreatorView.tsx
@@ -49,13 +49,13 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                             <Grid columnCount={ 3 } gap={ 1 }>
                                 { POSITIONS.map((position, posIndex) =>
                                 {
-                                    return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
+                                    return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
                                 }) }
                             </Grid> }
                         <Grid columnCount={ 8 } gap={ 1 }>
                             { (groupCustomize.badgePartColors.length > 0) && groupCustomize.badgePartColors.map((item, colorIndex) =>
                             {
-                                return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
+                                return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
                             }) }
                         </Grid>
                     </Flex>
diff --git a/src/components/groups/views/GroupCreatorView.tsx b/src/components/groups/views/GroupCreatorView.tsx
index ee113ea..5bdc086 100644
--- a/src/components/groups/views/GroupCreatorView.tsx
+++ b/src/components/groups/views/GroupCreatorView.tsx
@@ -118,14 +118,14 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
     if(!groupData) return null;
 
     return (
-        <NitroCardView className="h-[355px] w-[390px] border-[1px] border-[solid] border-[#283F5D]        " theme="primary-slim">
+        <NitroCardView className="h-[355px] w-[390px] border border-[solid] border-[#283F5D]        " theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onCloseClose } />
             <NitroCardContentView>
                 <div className="flex items-center justify-center creator-tabs">
                     { TABS.map((tab, index) =>
                     {
                         return (
-                            <Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-[0px_-104px]' : 'w-[83px] h-[24px] bg-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
+                            <Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-position-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-position-[0px_-104px]' : 'w-[83px] h-[24px] bg-position-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
                                 <Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
                             </Flex>
                         );
@@ -133,8 +133,8 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
                 </div>
                 <Column overflow="hidden">
                     <div className="flex items-center gap-2">
-                        <div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-[0px_0px] !w-[99px] !h-[50px]' } 
-                        ${ currentTab == 2 && '!bg-[-99px_0px] !w-[98px] !h-[62px]' }  ${ currentTab === 3 && '!bg-[0px_-50px] !w-[96px] !h-[45px]' } ${ currentTab === 4 || currentTab === 5 && '!bg-[0px_-95px] !w-[114px] !h-[61px]' }  ` } />
+                        <div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-position-[0px_0px] w-[99px]! h-[50px]!' } 
+                        ${ currentTab == 2 && 'bg-position-[-99px_0px]! w-[98px]! h-[62px]!' }  ${ currentTab === 3 && 'bg-position-[0px_-50px]! w-[96px]! h-[45px]!' } ${ currentTab === 4 || currentTab === 5 && 'bg-position-[0px_-95px]! w-[114px]! h-[61px]!' }  ` } />
                         <Column grow gap={ 0 }>
                             <Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
                             <Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index 7be8a92..045d523 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@@ -105,7 +105,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
     if(!groupInformation) return null;
 
     return (
-        <div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
+        <div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
             <div className="flex flex-col gap-2">
                 <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
diff --git a/src/components/groups/views/tabs/GroupTabColorsView.tsx b/src/components/groups/views/tabs/GroupTabColorsView.tsx
index 37a7fbf..256171c 100644
--- a/src/components/groups/views/tabs/GroupTabColorsView.tsx
+++ b/src/components/groups/views/tabs/GroupTabColorsView.tsx
@@ -110,7 +110,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
                 <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
                     { groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
                     {
-                        return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
+                        return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
                     }) }
                 </AutoGrid>
             </Column>
@@ -119,7 +119,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
                 <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
                     { groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
                     {
-                        return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
+                        return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
                     }) }
                 </AutoGrid>
             </Column>
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index 299e368..9d0a4be 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -92,7 +92,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                     {
                         return (
                             <Flex key={ index } fullWidth gap={ 2 } justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' }>
-                                <div className="flex-shrink-0 message-avatar">
+                                <div className="shrink-0 message-avatar">
                                     { (!isOwnChat(group.userId)) &&
                                         <LayoutAvatarImageView direction={ 2 } figure={ userFigure } /> }
                                 </div>
@@ -104,7 +104,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                     { group.messages.map((chat, index) => <div key={ index } className={ classNames(chat.roomId ? 'text-break text-underline' : 'text-break', 'chat.roomId' && 'cursor-pointer') } onClick={ () => chat.roomId ? TryVisitRoom(chat.roomId) : null }>{ chat.message }</div>) }
                                 </div>
                                 { (isOwnChat(group.userId)) &&
-                                    <div className="flex-shrink-0 message-avatar">
+                                    <div className="shrink-0 message-avatar">
                                         <LayoutAvatarImageView direction={ 4 } figure={ GetSessionDataManager().figure } />
                                     </div> }
                             </Flex>
diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 206994e..79bc0aa 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -137,13 +137,13 @@ export const HcCenterView: FC<{}> = props =>
                         </Button>
                     </Flex>
                 </div>
-                <div className="end-0 p-4 top-0 habbo-avatar absolute">
+                <div className="inset-e-0 p-4 top-0 habbo-avatar absolute">
                     <LayoutAvatarImageView direction={ 4 } figure={ userFigure } scale={ 2 } />
                 </div>
             </Flex>
             <NitroCardContentView>
                 <div className="flex gap-2">
-                    <LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center flex-shrink-0 me-1" />
+                    <LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center shrink-0 me-1" />
                     <Column className="streak-info" gap={ 0 } size={ 5 }>
                         <Text>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
                         <Text dangerouslySetInnerHTML={ { __html: getInfoText() } } />
@@ -157,7 +157,7 @@ export const HcCenterView: FC<{}> = props =>
                             <div>{ LocalizeText('hccenter.special.info') }</div>
                             <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={ () => CreateLinkEvent('habbopages/' + GetConfigurationValue('hc.center')['payday.habbopage']) }>{ LocalizeText('hccenter.special.infolink') }</div>
                         </Column>
-                        <div className="payday flex-shrink-0 p-2">
+                        <div className="payday shrink-0 p-2">
                             <h5 className="mb-2 ms-2">{ LocalizeText('hccenter.special.time.title') }</h5>
                             <div className="flex flex-row mb-2">
                                 <div className="clock me-2" />
diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index 4fec18a..339993a 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/src/components/help/views/HelpIndexView.tsx
@@ -22,7 +22,7 @@ export const HelpIndexView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-col justify-center alignp-items-enter !flex-grow gap-1">
+            <div className="flex flex-col justify-center alignp-items-enter grow! gap-1">
                 <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
                 <Text>{ LocalizeText('help.main.self.description') }</Text>
             </div>
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 8af4fd7..c1b589f 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -86,7 +86,7 @@ export const InventoryBadgeView: FC<{ filteredBadgeCodes?: string[] }> = props =
                                 { LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }
                             </NitroButton>
                             { !isWearingBadge(selectedBadgeCode) &&
-                                <NitroButton className="!bg-danger hover:!bg-danger/80 p-1" onClick={ attemptDeleteBadge }>
+                                <NitroButton className="bg-danger! hover:bg-danger/80! p-1" onClick={ attemptDeleteBadge }>
                                     <FaTrashAlt className="fa-icon" />
                                 </NitroButton> }
                         </div>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx
index d66ba03..5fc7d15 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx
@@ -84,7 +84,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
                                 className="cursor-pointer text-black fa-icon shrink-0"
                                 onClick={ () => updateAmount((amount - 1).toString()) } />
                             <NitroInput
-                                className="quantity-input text-center !py-0.5"
+                                className="quantity-input text-center py-0.5!"
                                 type="number"
                                 min={ 1 }
                                 max={ maxAmount }
@@ -98,7 +98,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
                             </NitroButton>
                         </div>
                         <NitroButton
-                            className="!bg-danger hover:!bg-danger/80 w-full"
+                            className="bg-danger! hover:bg-danger/80! w-full"
                             disabled={ amount > maxAmount }
                             onClick={ deleteItem }>
                             { LocalizeText('inventory.delete.confirm_delete.button') }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index a2fdd83..1fe708f 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -131,14 +131,14 @@ export const InventoryFurnitureView: FC<{
                     <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                     { selectedItem &&
                         <NitroButton
-                            className="!bg-danger hover:!bg-danger/80 absolute bottom-2 end-2 p-1"
+                            className="bg-danger! hover:bg-danger/80! absolute bottom-2 inset-e-2 p-1"
                             onClick={ () => attemptDeleteItem(selectedItem) }>
                             <FaTrashAlt className="fa-icon" />
                         </NitroButton> }
                     { selectedItem && selectedItem.stuffData.isUnique &&
-                        <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
+                        <LayoutLimitedEditionCompactPlateView className="top-2 inset-e-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
                     { (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
-                        <LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
+                        <LayoutRarityLevelView className="top-2 inset-e-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
                 </div>
                 { selectedItem &&
                     <div className="flex flex-col justify-between gap-2 grow">
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index 56861ce..7efba12 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -189,7 +189,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             return (
                                 <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === item) } itemCount={ count } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
                                     { ((count > 0) && (groupItem === item)) &&
-                                        <Button className="trade-button bottom-1 end-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
+                                        <Button className="trade-button bottom-1 inset-e-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
                                             <FaChevronRight className="fa-icon" />
                                         </Button>
                                     }
@@ -229,7 +229,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 return (
                                     <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
                                         { (ownGroupItem === item) &&
-                                            <Button className="trade-button bottom-1 start-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
+                                            <Button className="trade-button bottom-1 inset-s-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
                                                 <FaChevronLeft className="fa-icon" />
                                             </Button> }
                                     </LayoutGridItem>
@@ -260,7 +260,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                         </div>
                     </Column>
                 </Grid>
-                <div className="flex !flex-grow justify-between">
+                <div className="flex grow! justify-between">
                     <Button variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</Button>
                     { (tradeState === TradeState.TRADING_STATE_READY) &&
                         <Button disabled={ (!ownUser.itemCount && !otherUser.itemCount) } variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
diff --git a/src/components/inventory/views/pet/InventoryPetView.tsx b/src/components/inventory/views/pet/InventoryPetView.tsx
index 043fdd9..4af1c78 100644
--- a/src/components/inventory/views/pet/InventoryPetView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetView.tsx
@@ -92,7 +92,7 @@ export const InventoryPetView: FC<{
                     <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                     { selectedPet &&
                         <NitroButton
-                            className="!bg-danger hover:!bg-danger/80 absolute bottom-2 end-2 p-1"
+                            className="bg-danger! hover:bg-danger/80! absolute bottom-2 inset-e-2 p-1"
                             onClick={ attemptDeletePet }>
                             <FaTrashAlt className="fa-icon" />
                         </NitroButton> }
diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx
index ea0dc98..2d7c5c0 100644
--- a/src/components/mod-tools/ModToolsView.tsx
+++ b/src/components/mod-tools/ModToolsView.tsx
@@ -124,16 +124,16 @@ export const ModToolsView: FC<{}> = props =>
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black" gap={ 1 }>
                         <Button className="relative" disabled={ (currentRoomId <= 0) } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
-                            <div className="nitro-icon icon-small-room absolute start-1" /> Room Tool
+                            <div className="nitro-icon icon-small-room absolute inset-s-1" /> Room Tool
                         </Button>
                         <Button className="relative" disabled={ (currentRoomId <= 0) } gap={ 1 } innerRef={ elementRef } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
-                            <div className="nitro-icon icon-chat-history absolute start-1" /> Chatlog Tool
+                            <div className="nitro-icon icon-chat-history absolute inset-s-1" /> Chatlog Tool
                         </Button>
                         <Button className="relative" disabled={ !selectedUser } gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
-                            <div className="nitro-icon icon-user absolute start-1" /> User: { selectedUser ? selectedUser.username : '' }
+                            <div className="nitro-icon icon-user absolute inset-s-1" /> User: { selectedUser ? selectedUser.username : '' }
                         </Button>
                         <Button className="relative" gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
-                            <div className="nitro-icon icon-tickets absolute start-1" /> Report Tool
+                            <div className="nitro-icon icon-tickets absolute inset-s-1" /> Report Tool
                         </Button>
                     </NitroCardContentView>
                 </NitroCardView> }
diff --git a/src/components/navigator/views/NavigatorRoomCreatorView.tsx b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
index 8469af3..0b4adf4 100644
--- a/src/components/navigator/views/NavigatorRoomCreatorView.tsx
+++ b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
@@ -71,9 +71,9 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                         <Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
                         <NitroInput maxLength={ 60 } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } type="text" onChange={ event => setName(event.target.value) } />
                     </div>
-                    <div className="flex flex-col !flex-grow gap-1">
+                    <div className="flex flex-col grow! gap-1">
                         <Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
-                        <textarea className="!flex-grow form-control form-control-sm w-full" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
+                        <textarea className="grow! form-control form-control-sm w-full" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
                     </div>
                     <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('navigator.category') }</Text>
@@ -111,7 +111,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                                     <img alt="" src={ getRoomModelImage(model.name) } />
                                 </Flex>
                                 <Text bold>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
-                                { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="top-1 end-1" position="absolute" type="hc" /> }
+                                { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="top-1 inset-e-1" position="absolute" type="hc" /> }
                             </LayoutGridItem>);
                         })
                     }
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index ebefa74..35101a9 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -131,7 +131,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props => {
                                             </div> }
                                     </Column>
                                     <Column alignItems="center" gap={ 1 }>
-										<i className={ classNames('flex-shrink-0 nitro-icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
+										<i className={ classNames('shrink-0 nitro-icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
                                         { hasPermission('settings') &&
                                             <i className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
                                         <FaLink className="cursor-pointer fa-icon" title={ LocalizeText('navigator.embed.caption') } onClick={ event => processAction('toggle_room_link') } />
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index 33ea73c..5c52c8b 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
@@ -48,7 +48,7 @@ export const NavigatorSearchResultItemInfoView: FC<{
 
             <Popover
                 ref={ elementRef } // if you'd like a ref to your popover's child, you can grab one here
-                containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline [text-shadow:none] normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border-[1px] border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
+                containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
                 content={ ({ position, childRect, popoverRect }) => (
                     <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
                         arrowColor={ 'black' }
@@ -63,12 +63,12 @@ export const NavigatorSearchResultItemInfoView: FC<{
                             <Flex gap={ 2 } overflow="hidden">
                                 <LayoutRoomThumbnailView className="flex flex-col items-center mb-1 justify-content-end" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
                                     { roomData.habboGroupId > 0 && (
-                                        <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 start-0 m-1 ' } isGroup={ true } />) }
+                                        <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 inset-s-0 m-1 ' } isGroup={ true } />) }
                                     { roomData.doorMode !== RoomDataParser.OPEN_STATE && (
-                                        <i className={ 'absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') } />) }
+                                        <i className={ 'absolute inset-e-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') } />) }
                                 </LayoutRoomThumbnailView>
                                 <div className="flex flex-col gap-1">
-                                    <Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
+                                    <Text bold truncate className="grow" style={ { maxHeight: 13 } }>
                                         { roomData.roomName }
                                     </Text>
                                     <div className="flex gap-2">
@@ -80,10 +80,10 @@ export const NavigatorSearchResultItemInfoView: FC<{
                                             <Text italics>{ roomData.ownerName }</Text>
                                         </div>
                                     </div>
-                                    <Text className="flex-grow-1">
+                                    <Text className="grow">
                                         { roomData.description }
                                     </Text>
-                                    <Flex className={ 'badge p-1 absolute m-1 bottom-0 end-0 m-2 ' + getUserCounterColor() } gap={ 1 }>
+                                    <Flex className={ 'badge p-1 absolute m-1 bottom-0 inset-e-0 m-2 ' + getUserCounterColor() } gap={ 1 }>
                                         <FaUser className="fa-icon" />
                                         { roomData.userCount }
                                     </Flex>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
index bbb8bc1..2213f45 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
@@ -83,16 +83,16 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     if(thumbnail) return (
         <Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
             <LayoutRoomThumbnailView className="flex flex-col items-center justify-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
-                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 start-0 m-1' } isGroup={ true } /> }
+                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 inset-s-0 m-1' } isGroup={ true } /> }
                 <Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
                     <FaUser className="fa-icon" />
                     { roomData.userCount }
                 </Flex>
                 { (roomData.doorMode !== RoomDataParser.OPEN_STATE) &&
-                    <i className={ ('absolute end-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
+                    <i className={ ('absolute inset-e-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
             </LayoutRoomThumbnailView>
             <Flex className="w-full">
-                <Text truncate className="!flex-grow">{ roomData.roomName }</Text>
+                <Text truncate className="grow!">{ roomData.roomName }</Text>
                 <Flex reverse alignItems="center" gap={ 1 }>
                     <NavigatorSearchResultItemInfoView roomData={ roomData } />
                 </Flex>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultView.tsx b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
index 7348bbb..d7cd752 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
@@ -88,7 +88,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
         //     <div className="flex flex-col">
         //         <div className="flex items-center px-2 py-1 text-black">
         //             <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
-        //             <div className="ms-2 !flex-grow">{ LocalizeText(getResultTitle()) }</div>
+        //             <div className="ms-2 grow!">{ LocalizeText(getResultTitle()) }</div>
         //             <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
         //         </div>
         //         { isExtended &&
diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index e481b3e..d9905e6 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
@@ -24,7 +24,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
     return (
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
             <Flex fullHeight gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 } overflow="auto">
-                { hasFrank && !item.imageUrl && <div className="notification-frank flex-shrink-0" /> }
+                { hasFrank && !item.imageUrl && <div className="notification-frank shrink-0" /> }
                 { item.imageUrl && !imageFailed && <img alt={ item.title } className="align-self-baseline" src={ item.imageUrl } onError={ () =>
                 {
                     setImageFailed(true);
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
index 9170ebf..76fbac3 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
@@ -14,7 +14,7 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
     return (
         <LayoutNotificationBubbleView className="flex-col nitro-notification-bubble" fadesOut={ false } onClose={ onClose } { ...rest }>
             <div className="flex items-center gap-2 mb-2">
-                <LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
+                <LayoutCurrencyIcon className="shrink-0" type="hc" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
             </div>
             <div className="flex items-center justify-end gap-2">
diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx
index 5a36b76..454e366 100644
--- a/src/components/right-side/RightSideView.tsx
+++ b/src/components/right-side/RightSideView.tsx
@@ -10,7 +10,7 @@ import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromot
 export const RightSideView: FC<{}> = props =>
 {
     return (
-        <div className="absolute top-[0] right-[10px] min-w-[200px] max-w-[200px] h-[calc(100%-55px)] pointer-events-none">
+        <div className="absolute top-0 right-[10px] min-w-[200px] max-w-[200px] h-[calc(100%-55px)] pointer-events-none">
             <Column gap={ 1 } position="relative">
                 <PurseView />
                 <GroupRoomInformationView />
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
index a98fef6..3cda98e 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
@@ -329,34 +329,34 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
 
     return (
         <Column alignItems="end" gap={ 1 }>
-            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,_28,_32,_.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] rounded">
+            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
                 <Column className="h-full p-[8px] overflow-auto" gap={ 1 } overflow="visible">
                     <div className="flex flex-col gap-1">
                         <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
-                        <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                        <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                     </div>
                     <div className="flex flex-col gap-1">
                         <Flex gap={ 1 } position="relative">
                             { avatarInfo.stuffData.isUnique &&
-                                <div className="absolute end-0">
+                                <div className="absolute inset-e-0">
                                     <LayoutLimitedEditionCompactPlateView uniqueNumber={ avatarInfo.stuffData.uniqueNumber } uniqueSeries={ avatarInfo.stuffData.uniqueSeries } />
                                 </div> }
                             { (avatarInfo.stuffData.rarityLevel > -1) &&
-                                <div className="absolute end-0">
+                                <div className="absolute inset-e-0">
                                     <LayoutRarityLevelView level={ avatarInfo.stuffData.rarityLevel } />
                                 </div> }
                             <Flex center fullWidth>
                                 <LayoutRoomObjectImageView category={ avatarInfo.category } objectId={ avatarInfo.id } roomId={ roomSession.roomId } />
                             </Flex>
                         </Flex>
-                        <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                        <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                     </div>
                     <div className="flex flex-col gap-1">
                         <Text fullWidth small textBreak wrap variant="white">{ avatarInfo.description }</Text>
-                        <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                        <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                     </div>
                     <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1">
@@ -374,7 +374,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                     </div>
                     { (isJukeBox || isSongDisk) &&
                         <div className="flex flex-col gap-1">
-                            <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                            <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                             { (songId === -1) &&
                                 <Text small wrap variant="white">
                                     { LocalizeText('infostand.jukebox.text.not.playing') }
@@ -397,12 +397,12 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                     <div className="flex flex-col gap-1">
                         { isCrackable &&
                             <>
-                                <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                                 <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
                             </> }
                         { avatarInfo.groupId > 0 &&
                             <>
-                                <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                                 <Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(avatarInfo.groupId) }>
                                     <LayoutBadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
                                     <Text underline variant="white">{ groupName }</Text>
@@ -410,11 +410,11 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                             </> }
                         { godMode &&
                             <>
-                                <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                                 { canSeeFurniId && <Text small wrap variant="white">ID: { avatarInfo.id }</Text> }
                                 { (furniKeys.length > 0) &&
                                     <>
-                                        <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                                        <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                                         <div className="flex flex-col gap-1">
                                             { furniKeys.map((key, index) =>
                                             {
@@ -429,7 +429,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                             </> }
                         { (customKeys.length > 0) &&
                             <>
-                                <hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
+                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
                                 <div className="flex flex-col gap-1">
                                     { customKeys.map((key, index) =>
                                     {
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index 1882d92..7941c2d 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
@@ -102,7 +102,7 @@ const MonsterplantStats: FC<{
             {LocalizeText('infostand.pet.text.growth')}
           </Text>
           <LayoutCounterTimeView
-            className="top-2 end-2"
+            className="top-2 inset-e-2"
             day={ConvertSeconds(remainingGrowTime).split(':')[0]}
             hour={ConvertSeconds(remainingGrowTime).split(':')[1]}
             minutes={ConvertSeconds(remainingGrowTime).split(':')[2]}
@@ -114,7 +114,7 @@ const MonsterplantStats: FC<{
         <Text small truncate variant="white">
           {LocalizeText('infostand.pet.text.raritylevel', ['level'], [LocalizeText(`infostand.pet.raritylevel.${avatarInfo.rarityLevel}`)])}
         </Text>
-        <LayoutRarityLevelView className="top-2 end-2" level={avatarInfo.rarityLevel} />
+        <LayoutRarityLevelView className="top-2 inset-e-2" level={avatarInfo.rarityLevel} />
       </Column>
       <hr className="m-0" />
     </div>
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
index 0ddef1e..ca47ebf 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
@@ -126,7 +126,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
   return (
     <>
-      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] rounded">
+      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
         <Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
           <div className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
@@ -136,13 +136,13 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
               </div>
               <FaTimes className="cursor-pointer fa-icon" onClick={onClose} />
             </div>
-            <hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
+            <hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
           </div>
           <div className="flex flex-col gap-1">
             <div className="flex gap-1">
               <Column
                 fullWidth
-                className={`flex items-center w-full max-w-[68px] rounded-[0.25rem] profile-background ${infostandBackgroundClass}`}
+                className={`flex items-center w-full max-w-[68px] rounded-sm profile-background ${infostandBackgroundClass}`}
                 onClick={handleProfileClick}
               >
                 <Base position="absolute" className={`profile-stand ${infostandStandClass}`} />
@@ -185,7 +185,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 </Flex>
               </Column>
             </div>
-            <hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
+            <hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
           </div>
           <div className="flex flex-col gap-1">
             <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
@@ -206,7 +206,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     {isEditingMotto && (
                       <input
                         autoFocus={true}
-                        className="w-full h-full text-[12px] p-0 outline-[0] border-[0] text-[#fff] relative bg-transparent resize-none focus:italic border-transparent focus:border-transparent focus:ring-0"
+                        className="w-full h-full text-[12px] p-0 outline-0 border-0 text-[#fff] relative bg-transparent resize-none focus:italic border-transparent focus:border-transparent focus:ring-0"
                         maxLength={GetConfigurationValue<number>('motto.max.length', 38)}
                         type="text"
                         value={motto}
@@ -219,7 +219,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 </Flex>
               )}
             </Flex>
-            <hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
+            <hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
           </div>
           <div className="flex flex-col gap-1">
             <Text small wrap variant="white">
@@ -227,7 +227,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
             </Text>
             {avatarInfo.carryItem > 0 && (
               <>
-                <hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
+                <hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
                 <Text small wrap variant="white">
                   {LocalizeText('infostand.text.handitem', ['item'], [LocalizeText('handitem' + avatarInfo.carryItem)])}
                 </Text>
diff --git a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index f0d3ce9..b344404 100644
--- a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -46,7 +46,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
         <>
 
             <Popover
-                containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline [text-shadow:none] normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border-[1px] border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
+                containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
                 content={ ({ position, childRect, popoverRect }) => (
                     <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
                         arrowColor={ 'black' }
@@ -56,7 +56,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
                         popoverRect={ popoverRect }
                         position={ position }
                     >
-                        <NitroCardContentView className="bg-transparent !max-h-[200px]" overflow="hidden">
+                        <NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden">
                             <Grid columnCount={ 3 } overflow="auto">
                                 { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                                 {
diff --git a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
index 48c0564..16e97c4 100644
--- a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
+++ b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
@@ -79,16 +79,16 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
         <div ref={ elementRef } className={ `bubble-container newbubblehe ${ isVisible ? 'visible' : 'invisible' } w-max absolute select-none pointer-events-auto` }
             onClick={ () => GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }>
             { chat.styleId === 0 && (
-                <div className="absolute top-[-1px] left-[1px] w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-[1]" style={ { backgroundColor: chat.color } } />
+                <div className="absolute -top-px left-px w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-1" style={ { backgroundColor: chat.color } } />
             ) }
-            <div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-[1] break-words min-h-[26px] text-[14px] max-w-[350px]` }
+            <div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-1 wrap-break-word min-h-[26px] text-[14px] max-w-[350px]` }
                 style={ { maxWidth: getBubbleWidth } }>
                 <div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden">
                     { chat.imageUrl && chat.imageUrl.length > 0 && (
                         <div className="user-image absolute top-[-15px] left-[-9.25px] w-[45px] h-[65px] bg-no-repeat bg-center scale-50" style={ { backgroundImage: `url(${ chat.imageUrl })` } } />
                     ) }
                 </div>
-                <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-[1] min-h-[25px]">
+                <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
                     <b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
                     <span className="message" dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } />
                 </div>
diff --git a/src/components/room/widgets/chat/ChatWidgetView.tsx b/src/components/room/widgets/chat/ChatWidgetView.tsx
index bdbe59f..46cb7ea 100644
--- a/src/components/room/widgets/chat/ChatWidgetView.tsx
+++ b/src/components/room/widgets/chat/ChatWidgetView.tsx
@@ -155,7 +155,7 @@ export const ChatWidgetView: FC<{}> = props =>
     }, [ getScrollSpeed, removeHiddenChats, setChatMessages ]);
 
     return (
-        <div ref={ elementRef } className="absolute flex justify-center items-center w-full top-0 min-h-[1px] z-[var(--chat-zindex)] bg-transparent roundehidden shadow-none pointer-events-none">
+        <div ref={ elementRef } className="absolute flex justify-center items-center w-full top-0 min-h-px z-(--chat-zindex) bg-transparent roundehidden shadow-none pointer-events-none">
             { chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } bubbleWidth={ chatSettings.weight } chat={ chat } makeRoom={ makeRoom } />) }
         </div>
     );
diff --git a/src/components/room/widgets/choosers/ChooserWidgetView.tsx b/src/components/room/widgets/choosers/ChooserWidgetView.tsx
index d59d6e0..9cd7162 100644
--- a/src/components/room/widgets/choosers/ChooserWidgetView.tsx
+++ b/src/components/room/widgets/choosers/ChooserWidgetView.tsx
@@ -73,7 +73,7 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props => {
                     <Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ () => setSelectedItem(row) }>
                         { pickallFurni && (
                             <input 
-                                className="flex-shrink-0 mx-1 form-check-input" 
+                                className="shrink-0 mx-1 form-check-input" 
                                 type="checkbox" 
                                 checked={ isChecked(row.id) } 
                                 onChange={ () => checkedId(row.id) }
diff --git a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
index 91f93d9..0a1eacc 100644
--- a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,_#131e25_50%,_#0d171d_50%,_#0d171d_100%)] cursor-pointer' ];
+        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ];
 
         if(disabled) newClassNames.push('disabled');
 
diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx
index 8df3914..1ca3e83 100644
--- a/src/components/room/widgets/context-menu/ContextMenuView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx
@@ -75,9 +75,9 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
 
   const getClassNames = useMemo(() => {
     const classes = [
-      '!p-[2px]',
+      'p-[2px]!',
       'bg-[#1c323f]',
-      'border-[2px]',
+      'border-2',
       'border-[solid]',
       'border-[rgba(255,255,255,.5)]',
       'rounded-[.25rem]',
diff --git a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
index 580fb1d..67b8055 100644
--- a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
@@ -55,7 +55,7 @@ export const FurnitureCraftingView: FC<{}> = props =>
         <NitroCardView className="nitro-widget-crafting" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('crafting.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <div className="flex !flex-grow gap-2 overflow-hidden">
+                <div className="flex grow! gap-2 overflow-hidden">
                     <div className="flex flex-col w-full gap-2">
                         <Column fullHeight overflow="hidden">
                             <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.products') }</div>
diff --git a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx b/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
index a7ac6cf..c12575f 100644
--- a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
@@ -17,7 +17,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
                     <div className="flex flex-col items-center justify-conent-center">
                         <div className="exchange-image" />
                     </div>
-                    <div className="flex flex-col justify-between overflow-hidden !flex-grow">
+                    <div className="flex flex-col justify-between overflow-hidden grow!">
                         <Column gap={ 1 } overflow="auto">
                             <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
                             <Text>{ LocalizeText('creditfurni.prompt') }</Text>
diff --git a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
index 6c493b0..13a29f8 100644
--- a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
@@ -90,7 +90,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                         <div className="relative mannequin-preview">
                             <LayoutAvatarImageView direction={ 2 } figure={ renderedFigure } position="absolute" />
                             { (clubLevel > 0) &&
-                                <LayoutCurrencyIcon className="absolute end-2 bottom-2" type="hc" /> }
+                                <LayoutCurrencyIcon className="absolute inset-e-2 bottom-2" type="hc" /> }
                         </div>
                     </div>
                     <Column grow justifyContent="between" overflow="auto">
@@ -132,7 +132,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                                 </Button>
                             </> }
                         { (mode === MODE_NO_CLUB) &&
-                            <div className="flex justify-center items-center !flex-grow">
+                            <div className="flex justify-center items-center grow!">
                                 <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text>
                             </div> }
                         { (mode === MODE_WRONG_GENDER) &&
diff --git a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx b/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
index a270192..dc9535c 100644
--- a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
@@ -27,7 +27,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
             <NitroCardHeaderView center headerText={ LocalizeText('mysterytrophy.header.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <div className="flex mysterytrophy-dialog-top p-3">
-                    <div className="mysterytrophy-image flex-shrink-0"></div>
+                    <div className="mysterytrophy-image shrink-0"></div>
                     <div className="m-2">
                         <Text className="mysterytrophy-text-big" variant="white">{ LocalizeText('mysterytrophy.header.description') }</Text>
                     </div>
@@ -36,7 +36,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
                     <div className="flex flex-col gap-1">
                         <div className="flex items-center bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
                             <textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
-                            <div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>
+                            <div className="mysterytrophy-pencil-image shrink-0 small fa-icon"></div>
                         </div>
                         <div className="flex items-center mt-2 gap-5 justify-center">
                             <Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
diff --git a/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx b/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
index 813a6dc..6cd121c 100644
--- a/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
@@ -25,7 +25,7 @@ export const FurnitureSpamWallPostItView: FC<{}> = props =>
         <DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <div className={ 'nitro-stickie nitro-stickie-image stickie-' + getStickieColorName(color) }>
                 <div className="flex items-center stickie-header drag-handler">
-                    <div className="flex items-center !flex-grow h-full">
+                    <div className="flex items-center grow! h-full">
                         { canModify &&
                             <>
                                 <div className="nitro-stickie-image stickie-trash header-trash" onClick={ onClose }></div>
diff --git a/src/components/room/widgets/furniture/FurnitureStickieView.tsx b/src/components/room/widgets/furniture/FurnitureStickieView.tsx
index fec4845..b12f1c2 100644
--- a/src/components/room/widgets/furniture/FurnitureStickieView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureStickieView.tsx
@@ -42,7 +42,7 @@ export const FurnitureStickieView: FC<{}> = props =>
         <DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <div className={ 'nitro-stickie nitro-stickie-image stickie-' + (type == 'post_it' ? getStickieColorName(color) : getStickieTypeName(type)) }>
                 <div className="flex items-center stickie-header drag-handler">
-                    <div className="flex items-center !flex-grow h-full">
+                    <div className="flex items-center grow! h-full">
                         { canModify &&
                             <>
                                 <div className="nitro-stickie-image stickie-trash header-trash" onClick={ trash }></div>
diff --git a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
index 7550af9..a081ce1 100644
--- a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
@@ -66,7 +66,7 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
 
                     return (
                         <LayoutGridItem key={ index } classNames={ [ 'text-black' ] } itemActive={ (selectedItem === index) } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
-                            <div className="flex-shrink-0 disk-image mb-n2" style={ { backgroundColor: GetDiskColor(songInfo?.songData) } }>
+                            <div className="shrink-0 disk-image mb-n2" style={ { backgroundColor: GetDiskColor(songInfo?.songData) } }>
                             </div>
                             <Text fullWidth truncate className="text-center">{ songInfo?.name }</Text>
                             { (selectedItem === index) &&
diff --git a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
index 1e18286..35bcaaf 100644
--- a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
+++ b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
@@ -38,7 +38,7 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
     if(keyColor === '' && boxColor === '') return null;
 
     return (
-        <div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599]  text-sm bg-[#1c1c20f2] rounded mysterybox-extension">
+        <div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599]  text-sm bg-[#1c1c20f2] rounded mysterybox-extension">
             <div className="flex flex-col">
                 <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
@@ -50,12 +50,12 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
                         <Text variant="white">{ LocalizeText('mysterybox.tracker.description') }</Text>
                         <div className="flex items-center gap-2 justify-center">
                             <LayoutGridItem className="mysterybox-container">
-                                <div className="box-image flex-shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
+                                <div className="box-image shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
                                     <div className="chain-overlay-image" />
                                 </div>
                             </LayoutGridItem>
                             <LayoutGridItem className="mysterybox-container">
-                                <div className="key-image flex-shrink-0" style={ { backgroundColor: getRgbColor(keyColor) } }>
+                                <div className="key-image shrink-0" style={ { backgroundColor: getRgbColor(keyColor) } }>
                                     <div className="key-overlay-image" />
                                 </div>
                             </LayoutGridItem>
diff --git a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
index 9b4ff4a..66738f0 100644
--- a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
+++ b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
@@ -14,7 +14,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
                     <NitroCardHeaderView center headerText={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage.open') } onCloseClick={ () => onClose() } />
                     <NitroCardContentView>
                         <div className="flex pet-package-container-top p-3">
-                            <div className={ `package-image-${ objectType } flex-shrink-0` }></div>
+                            <div className={ `package-image-${ objectType } shrink-0` }></div>
                             <div className="m-2">
                                 <Text className="package-text-big" variant="white">{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }</Text>
                             </div>
@@ -23,7 +23,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
                             <div className="flex flex-col gap-1">
                                 <div className="flex items-center bg-white rounded py-1 px-2 input-pet-package-container">
                                     <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => onChangePetName(event.target.value) } />
-                                    <div className="package-pencil-image flex-shrink-0 small fa-icon"></div>
+                                    <div className="package-pencil-image shrink-0 small fa-icon"></div>
                                 </div>
                                 { (errorResult.length > 0) &&
                                     <div className="invalid-feedback d-block m-0">{ errorResult }</div> }
diff --git a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
index 07cf841..191f429 100644
--- a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
@@ -21,7 +21,7 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
     return (
         <>
             { promoteInformation.data.adId !== -1 &&
-                <div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] text-sm  bg-[#1c1c20f2] rounded">
+                <div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] text-sm  bg-[#1c1c20f2] rounded">
                     <div className="flex flex-col">
                         <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                             <Text overflow="hidden" variant="white">{ promoteInformation.data.eventName }</Text>
diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx
index c420fce..f45a4c3 100644
--- a/src/components/toolbar/ToolbarMeView.tsx
+++ b/src/components/toolbar/ToolbarMeView.tsx
@@ -32,7 +32,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
     }, [ setMeExpanded ]);
 
     return (
-        <Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
+        <Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
             { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
                 <div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
             <div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 27e6a4a..7d6743a 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -69,7 +69,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 					<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
 				</motion.div> )}
 			</AnimatePresence>
-            <Flex alignItems="center" className="absolute bottom-[0] left-[0] w-full h-[55px] bg-[rgba(28,_28,_32,_.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
+            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
                 <Flex alignItems="center" gap={ 2 }>
                     <Flex alignItems="center" gap={ 2 }>
                         <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
diff --git a/src/components/user-profile/GroupsContainerView.tsx b/src/components/user-profile/GroupsContainerView.tsx
index 3ffd787..3358f60 100644
--- a/src/components/user-profile/GroupsContainerView.tsx
+++ b/src/components/user-profile/GroupsContainerView.tsx
@@ -74,7 +74,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
                         return (
                             <LayoutGridItem key={ index } className="p-1" itemActive={ (selectedGroupId === group.groupId) } overflow="unset" onClick={ () => setSelectedGroupId(group.groupId) }>
                                 { itsMe &&
-                                    <i className={ 'absolute end-0 top-0 z-20 nitro-icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => ToggleFavoriteGroup(group) } /> }
+                                    <i className={ 'absolute inset-e-0 top-0 z-20 nitro-icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => ToggleFavoriteGroup(group) } /> }
                                 <LayoutBadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
                             </LayoutGridItem>
                         );
diff --git a/src/components/user-profile/RelationshipsContainerView.tsx b/src/components/user-profile/RelationshipsContainerView.tsx
index 7bdca66..0c2a231 100644
--- a/src/components/user-profile/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/RelationshipsContainerView.tsx
@@ -27,7 +27,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
                 <Flex center className="h-[25px]">
                     <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
                 </Flex>
-                <div className="flex flex-col flex-grow gap-0">
+                <div className="flex flex-col grow gap-0">
                     <div className="flex items-center justify-between bg-white rounded px-2 py-1 h-[25px]">
                         <p className="text-sm underline pointer" onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
                             { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
@@ -40,7 +40,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
                                 <LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
                             </div> }
                     </div>
-                    <p className="italics text-sm mt-[2px] ml-[5px] !text-[#939392]">
+                    <p className="italics text-sm mt-[2px] ml-[5px] text-[#939392]!">
                         { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
                             LocalizeText('extendedprofile.no.friends.in.this.category') }
                         { (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
diff --git a/src/css/index.css b/src/css/index.css
index e44cbcd..fac5340 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,12 +1,12 @@
+@import 'tailwindcss';
+
+@config "../../tailwind.config.js";
+
 @font-face {
     font-family: Ubuntu;
     src: url("@/assets/webfonts/Ubuntu-C.ttf");
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 html,
 body {
     padding: 0;
@@ -175,35 +175,35 @@ body {
     }
 
     .avatar-image {
-        @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
+        @apply pointer-events-none relative h-[130px] w-[90px] bg-position-[center_-8px] bg-no-repeat;
     }
 
     .ubuntu-close-button {
-        @apply inline-block h-[20px] w-[19px] bg-transparent bg-[0px_0px] bg-no-repeat outline-0;
+        @apply inline-block h-[20px] w-[19px] bg-transparent bg-position-[0px_0px] bg-no-repeat outline-0;
         background-image: url("@/assets/images/ui/ubuntu-close-buttons.png");
 
         &:hover {
-            @apply bg-[-38px];
+            @apply bg-position-[-38px];
         }
 
         &:active {
-            @apply bg-[-19px];
+            @apply bg-position-[-19px];
         }
     }
 }
 
 .unique-item {
     .unique-bg-override {
-        @apply z-[2] bg-center bg-no-repeat;
+        @apply z-2 bg-center bg-no-repeat;
     }
 
     &:before {
-        @apply absolute z-[1] size-full bg-center bg-no-repeat [content:""];
+        @apply absolute z-1 size-full bg-center bg-no-repeat [content:""];
         background-image: url("@/assets/images/unique/grid-bg.png");
     }
 
     &:after {
-        @apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""];
+        @apply absolute bottom-0 z-4 size-full bg-center bg-no-repeat [content:""];
         background-image: url("@/assets/images/unique/grid-bg-glass.png");
     }
 
@@ -215,7 +215,7 @@ body {
 
     .unique-item-counter {
         background-image: url("@/assets/images/unique/grid-count-bg.png");
-        @apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
+        @apply bottom-px z-3 mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
     }
 }
 
diff --git a/src/css/widgets/ChooserWidgets.css b/src/css/widgets/ChooserWidgets.css
index 56a6051..e69de29 100644
--- a/src/css/widgets/ChooserWidgets.css
+++ b/src/css/widgets/ChooserWidgets.css
@@ -1 +0,0 @@
-1
\ No newline at end of file
diff --git a/src/layout/InfiniteGrid.tsx b/src/layout/InfiniteGrid.tsx
index 0937c1c..534baef 100644
--- a/src/layout/InfiniteGrid.tsx
+++ b/src/layout/InfiniteGrid.tsx
@@ -161,7 +161,7 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
             ) }
             { ...rest }>
             { (itemCount > itemCountMinimum) &&
-                <div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-[1] leading-[8px]">{ itemCount }</div> }
+                <div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-1 leading-[8px]">{ itemCount }</div> }
             { (itemUniqueNumber > 0) &&
                 <>
                     <div
diff --git a/src/layout/NitroCard.tsx b/src/layout/NitroCard.tsx
index f665e69..ab024f5 100644
--- a/src/layout/NitroCard.tsx
+++ b/src/layout/NitroCard.tsx
@@ -80,7 +80,7 @@ const NitroCardTabs = forwardRef<HTMLDivElement, {
         <div
             ref={ ref }
             className={ classNames(
-                'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-[1px]',
+                'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px',
                 className)
             }
             { ...rest } />
@@ -100,8 +100,8 @@ const NitroCardTabItem = forwardRef<HTMLDivElement, {
         <div
             ref={ ref }
             className={ classNames(
-                'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-[1] border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-[1] before:bg-[#C2C9D1]',
-                isActive && 'bg-card-tab-item-active -mb-[1px] before:bg-white',
+                'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
+                isActive && 'bg-card-tab-item-active -mb-px before:bg-white',
                 className)
             }
             { ...rest }>
diff --git a/src/layout/NitroItemCountBadge.tsx b/src/layout/NitroItemCountBadge.tsx
index f8b0782..1b01397 100644
--- a/src/layout/NitroItemCountBadge.tsx
+++ b/src/layout/NitroItemCountBadge.tsx
@@ -2,7 +2,7 @@ import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from
 import { classNames } from './classNames';
 
 const classes = {
-    base: 'text-[white] font-bold leading-none text-[9.5px] absolute right-0 top-0    py-0.5 px-[3px] z-[1] rounded border',
+    base: 'text-[white] font-bold leading-none text-[9.5px] absolute right-0 top-0    py-0.5 px-[3px] z-1 rounded border',
     themes: {
         'primary': 'border-black bg-red-700'
     }