diff --git a/packages/koenig-lexical/.eslintrc.cjs b/packages/koenig-lexical/.eslintrc.cjs
index 104ce552f..832623903 100644
--- a/packages/koenig-lexical/.eslintrc.cjs
+++ b/packages/koenig-lexical/.eslintrc.cjs
@@ -47,4 +47,4 @@ module.exports = {
             'react/prop-types': 2
         }
     }]
-};
\ No newline at end of file
+};
diff --git a/packages/koenig-lexical/demo/DemoApp.jsx b/packages/koenig-lexical/demo/DemoApp.jsx
index f249efb52..83fed71b5 100644
--- a/packages/koenig-lexical/demo/DemoApp.jsx
+++ b/packages/koenig-lexical/demo/DemoApp.jsx
@@ -240,7 +240,7 @@ function DemoComposer({editorType, isMultiplayer, setWordCount}) {
                 }
                 <DarkModeToggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
                 <div ref={containerRef} className="h-full overflow-auto overflow-x-hidden" onClick={focusEditor}>
-                    <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                    <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                         {showTitle
                             ? <TitleTextBox ref={titleRef} editorAPI={editorAPI} setTitle={setTitle} title={title} />
                             : null
diff --git a/packages/koenig-lexical/demo/HtmlOutputDemo.jsx b/packages/koenig-lexical/demo/HtmlOutputDemo.jsx
index daed9d96f..370a2a034 100644
--- a/packages/koenig-lexical/demo/HtmlOutputDemo.jsx
+++ b/packages/koenig-lexical/demo/HtmlOutputDemo.jsx
@@ -89,7 +89,7 @@ function HtmlOutputDemo() {
                 >
                     <div className="relative h-full grow">
                         <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                            <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                            <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                                 <KoenigComposableEditor
                                     cursorDidExitAtTop={focusTitle}
                                     registerAPI={setEditorAPI}
diff --git a/packages/koenig-lexical/demo/RestrictedContentDemo.jsx b/packages/koenig-lexical/demo/RestrictedContentDemo.jsx
index c31ffd793..5528a8262 100644
--- a/packages/koenig-lexical/demo/RestrictedContentDemo.jsx
+++ b/packages/koenig-lexical/demo/RestrictedContentDemo.jsx
@@ -95,7 +95,7 @@ function RestrictedContentDemo() {
             >
                 <div className="relative h-full grow">
                     <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                        <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                        <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                             <KoenigComposableEditor
                                 cursorDidExitAtTop={focusTitle}
                                 registerAPI={setEditorAPI}
diff --git a/packages/koenig-lexical/demo/components/FloatingButton.jsx b/packages/koenig-lexical/demo/components/FloatingButton.jsx
index 5cb70254e..c82d66a7a 100644
--- a/packages/koenig-lexical/demo/components/FloatingButton.jsx
+++ b/packages/koenig-lexical/demo/components/FloatingButton.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const FloatingButton = ({isOpen, ...props}) => {
     return (
-        <div className={`fixed bottom-4 right-6 z-20 rounded py-1 px-2 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
+        <div className={`fixed bottom-4 right-6 z-20 rounded px-2 py-1 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
             <button className="cursor-pointer" type="button" onClick={() => props.onClick('json')}>
                 JSON output
             </button>
diff --git a/packages/koenig-lexical/demo/components/InitialContentToggle.jsx b/packages/koenig-lexical/demo/components/InitialContentToggle.jsx
index 83dd54f46..1cda3dcbe 100644
--- a/packages/koenig-lexical/demo/components/InitialContentToggle.jsx
+++ b/packages/koenig-lexical/demo/components/InitialContentToggle.jsx
@@ -33,9 +33,9 @@ const InitialContentToggle = ({defaultContent, setTitle, searchParams, setSearch
 
     return (
         <>
-            <button className="absolute top-4 right-6 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
-                <EyeOpenIcon className="absolute top-[5px] left-[6px] h-3 w-3 text-white" />
-                <EyeClosedIcon className="absolute top-[5px] right-[6px] h-3 w-3 text-white" />
+            <button className="absolute right-6 top-4 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
+                <EyeOpenIcon className="absolute left-[6px] top-[5px] h-3 w-3 text-white" />
+                <EyeClosedIcon className="absolute right-[6px] top-[5px] h-3 w-3 text-white" />
                 <div className={`absolute top-[2px] h-[18px] w-[18px] rounded-full bg-white transition-all ease-in-out ${isOn ? 'left-[22px]' : 'left-[2px]'}`}></div>
             </button>
         </>
diff --git a/packages/koenig-lexical/demo/components/Watermark.jsx b/packages/koenig-lexical/demo/components/Watermark.jsx
index bdd9535db..889fc675e 100644
--- a/packages/koenig-lexical/demo/components/Watermark.jsx
+++ b/packages/koenig-lexical/demo/components/Watermark.jsx
@@ -13,7 +13,7 @@ function EditorLink({editorType}) {
 const Watermark = ({editorType}) => {
     if (!editorType) {
         return (
-            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
+            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
             editor
@@ -40,7 +40,7 @@ const Watermark = ({editorType}) => {
 
     return (
         <>
-            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black">
+            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
                 <span className="group-hover:font-bold">{editorType}
diff --git a/packages/koenig-lexical/demo/components/WordCount.jsx b/packages/koenig-lexical/demo/components/WordCount.jsx
index 85ec53610..f18b20f03 100644
--- a/packages/koenig-lexical/demo/components/WordCount.jsx
+++ b/packages/koenig-lexical/demo/components/WordCount.jsx
@@ -1,6 +1,6 @@
 const WordCount = ({wordCount}) => {
     return (
-        <div className="absolute top-4 left-6 z-20 block cursor-pointer rounded bg-white py-1 px-2 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
+        <div className="absolute left-6 top-4 z-20 block cursor-pointer rounded bg-white px-2 py-1 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
             <span data-testid="word-count">{wordCount}</span> words
         </div>
     );
diff --git a/packages/koenig-lexical/package.json b/packages/koenig-lexical/package.json
index 807baef36..91c83a75d 100644
--- a/packages/koenig-lexical/package.json
+++ b/packages/koenig-lexical/package.json
@@ -120,7 +120,7 @@
     "react-router-dom": "6.15.0",
     "storybook": "^7.0.12",
     "stylelint": "^15.6.1",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
     "vite": "4.3.8",
     "vite-plugin-svgr": "^3.2.0",
diff --git a/packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx b/packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx
index b722b34a0..498744c94 100644
--- a/packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx
+++ b/packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx
@@ -7,7 +7,7 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 const Placeholder = ({text = 'Type here'}) => {
     return (
-        <div className="pointer-events-none absolute top-0 left-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
+        <div className="pointer-events-none absolute left-0 top-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
             {text}
         </div>
     );
diff --git a/packages/koenig-lexical/src/components/KoenigNestedEditor.jsx b/packages/koenig-lexical/src/components/KoenigNestedEditor.jsx
index 08e2c4f74..ea70d38fa 100644
--- a/packages/koenig-lexical/src/components/KoenigNestedEditor.jsx
+++ b/packages/koenig-lexical/src/components/KoenigNestedEditor.jsx
@@ -6,7 +6,7 @@ const Placeholder = ({text = 'Type here', className = ''}) => {
     // Note: we use line-clamp-1, instead of truncate because truncate adds 'white-space: nowrap', which often breaks overflows of parents in some cards
     return (
         <div className={`placeholder not-kg-prose pointer-events-none h-0 cursor-text overflow-visible`}>
-            <div className={`translate-y-[-100%] line-clamp-1 ${className}`}>{text}</div>
+            <div className={`line-clamp-1 translate-y-[-100%] ${className}`}>{text}</div>
         </div>
     );
 };
diff --git a/packages/koenig-lexical/src/components/ui/ActionToolbar.jsx b/packages/koenig-lexical/src/components/ui/ActionToolbar.jsx
index 20f670188..b7f101cae 100644
--- a/packages/koenig-lexical/src/components/ui/ActionToolbar.jsx
+++ b/packages/koenig-lexical/src/components/ui/ActionToolbar.jsx
@@ -6,7 +6,7 @@ export function ActionToolbar({isVisible, children, ...props}) {
 
     if (isVisible && !isDragging) {
         return (
-            <div className="not-kg-prose absolute top-[-44px] left-1/2 z-[1000] -translate-x-1/2" {...props}>
+            <div className="not-kg-prose absolute left-1/2 top-[-44px] z-[1000] -translate-x-1/2" {...props}>
                 {children}
             </div>
         );
diff --git a/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx b/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx
index 7572135e0..f6dac3edb 100644
--- a/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx
@@ -55,7 +55,7 @@ export function BackgroundImagePicker({onFileChange,
                                             <div className="group relative mb-4 w-full rounded">
                                                 <div className="absolute inset-0 rounded bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover:opacity-100">
                                                 </div>
-                                                <div className="absolute top-5 right-5 flex opacity-0 transition-all group-hover:opacity-100">
+                                                <div className="absolute right-5 top-5 flex opacity-0 transition-all group-hover:opacity-100">
                                                     <button className="pointer-events-auto flex h-8 w-9 cursor-pointer items-center justify-center rounded bg-white/90 transition-all hover:bg-white" type="button" onClick={handleClearBackgroundImage}>
                                                         <TrashIcon className="h-5 w-5 fill-grey-900 stroke-[3px] transition-all ease-linear group-hover:scale-105" />
                                                     </button>
diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 4922cbfac..c8e4ef95d 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -159,7 +159,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                 <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
                 {value && !selectedSwatch && (
                     <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
-                        {value === 'transparent' && <div className="absolute top-[3px] left-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                     </div>
                 )}
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/Dropdown.jsx b/packages/koenig-lexical/src/components/ui/Dropdown.jsx
index 66b7624bb..e85fd5ac2 100644
--- a/packages/koenig-lexical/src/components/ui/Dropdown.jsx
+++ b/packages/koenig-lexical/src/components/ui/Dropdown.jsx
@@ -63,7 +63,7 @@ export function Dropdown({value, menu, onChange}) {
 
     return (
         <div className="relative z-0 font-sans text-sm font-normal">
-            <button className={`relative w-full cursor-pointer border border-grey-300 py-2 px-3 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
+            <button className={`relative w-full cursor-pointer border border-grey-300 px-3 py-2 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
                 {trigger}
                 <ArrowIcon className={`absolute right-2 top-4 h-2 w-2 text-grey-600 ${open && 'rotate-180'}`} />
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx
index 584f727dc..d0f285368 100644
--- a/packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx
@@ -1,7 +1,7 @@
 export function EditorPlaceholder({className, text}) {
     return (
         <div
-            className={`pointer-events-none absolute top-0 left-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
+            className={`pointer-events-none absolute left-0 top-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
         >{text || 'Begin writing your post...'}</div>
     );
 }
diff --git a/packages/koenig-lexical/src/components/ui/InputList.jsx b/packages/koenig-lexical/src/components/ui/InputList.jsx
index 0bdadbdd2..eea78af4a 100644
--- a/packages/koenig-lexical/src/components/ui/InputList.jsx
+++ b/packages/koenig-lexical/src/components/ui/InputList.jsx
@@ -21,7 +21,7 @@ function Item({dataTestId, item, selected, onChange}) {
     return (
         <li className={`${selectionClass} cursor-pointer px-4 py-2 text-left hover:bg-grey-100 dark:hover:bg-black`} data-testid={`${dataTestId}-listOption`} onMouseDownCapture={event => handleOptionMouseDown(event, item.value)}>
             <span className="block text-sm font-semibold leading-tight text-black dark:text-white" data-testid={`${dataTestId}-listOption-${item.label}`}>{item.label}</span>
-            <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
+            <span className="block truncate text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
                 {item.value}
             </span>
         </li>
diff --git a/packages/koenig-lexical/src/components/ui/LinkInput.jsx b/packages/koenig-lexical/src/components/ui/LinkInput.jsx
index a651d30c1..069af2468 100644
--- a/packages/koenig-lexical/src/components/ui/LinkInput.jsx
+++ b/packages/koenig-lexical/src/components/ui/LinkInput.jsx
@@ -49,7 +49,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
     }, [onEscape]);
 
     return (
-        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black py-0 px-1 font-sans text-sm font-medium dark:bg-grey-950">
+        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black px-1 py-0 font-sans text-sm font-medium dark:bg-grey-950">
             <input
                 ref={inputRef}
                 className="mb-[1px] h-auto w-full rounded bg-black pl-3 pr-9 leading-loose text-white selection:bg-grey/40 dark:bg-grey-950"
@@ -84,7 +84,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <div
-                className="absolute top-[36px] left-[calc(50%-8px)] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[36px] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
                 style={arrowStyles}
             ></div>
         </div>
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlayer.jsx b/packages/koenig-lexical/src/components/ui/MediaPlayer.jsx
index 552c696ed..958d1e6c0 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlayer.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlayer.jsx
@@ -15,7 +15,7 @@ export function MediaPlayer({type, duration, theme, ...args}) {
             <div className={`relative mx-2 h-1 grow rounded ${theme === 'light' ? 'bg-white/40' : 'bg-grey/30'}`}>
                 <button className="absolute left-0 top-[-6px] h-4 w-4 rounded-full border border-grey/50 bg-white shadow" type="button"></button>
             </div>
-            <button className={`mr-4 mb-[1px] px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
+            <button className={`mb-[1px] mr-4 px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
             <button type="button">
                 <UnmuteIcon className={`${theme === 'light' ? 'fill-white' : 'fill-black'}`} />
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
index 0811f76e0..a007afb7f 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
@@ -85,7 +85,7 @@ export function MediaUploader({
             )}
 
             {!isLoading && (
-                <div className="absolute top-2 right-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
+                <div className="absolute right-2 top-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
                     {additionalActions}
                     { isPinturaEnabled && <IconButton Icon={EditIcon} onClick={() => openImageEditor({
                         image: src,
diff --git a/packages/koenig-lexical/src/components/ui/Modal.jsx b/packages/koenig-lexical/src/components/ui/Modal.jsx
index 0885332b6..745dbb554 100644
--- a/packages/koenig-lexical/src/components/ui/Modal.jsx
+++ b/packages/koenig-lexical/src/components/ui/Modal.jsx
@@ -20,14 +20,14 @@ export function Modal({isOpen, onClose, children}) {
     return (
         <Portal>
             <div
-                className="fixed top-0 left-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
+                className="fixed left-0 top-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
                 role="dialog"
                 aria-modal
                 onKeyDown={controlByKeys}
             >
                 <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60" onClick={onClose}></div>
                 <div className="relative z-50 my-8 w-full max-w-[550px] rounded bg-white drop-shadow-2xl">
-                    <button aria-label="Close dialog" className="absolute top-6 right-6 cursor-pointer" type="button" autoFocus>
+                    <button aria-label="Close dialog" className="absolute right-6 top-6 cursor-pointer" type="button" autoFocus>
                         <CloseIcon className="h-4 w-4 stroke-2 text-grey-400" onClick={onClose}/>
                     </button>
                     {children}
diff --git a/packages/koenig-lexical/src/components/ui/PlusMenu.jsx b/packages/koenig-lexical/src/components/ui/PlusMenu.jsx
index f680e91f5..19ee39bdb 100644
--- a/packages/koenig-lexical/src/components/ui/PlusMenu.jsx
+++ b/packages/koenig-lexical/src/components/ui/PlusMenu.jsx
@@ -2,7 +2,7 @@ import {ReactComponent as PlusIcon} from '../../assets/icons/plus.svg';
 
 export function PlusButton({onClick}) {
     return (
-        <div className="absolute top-[-2px] left-[-32px] xs:left-[-66px]" data-kg-plus-button>
+        <div className="absolute left-[-32px] top-[-2px] xs:left-[-66px]" data-kg-plus-button>
             <button
                 aria-label="Add a card"
                 className="group relative flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-grey transition-all ease-linear hover:border-grey-900 dark:border-grey-800 dark:hover:border-grey-100 md:h-9 md:w-9"
diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx
index c84a9ba25..434220aed 100644
--- a/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx
+++ b/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx
@@ -54,7 +54,7 @@ export const Dropdown = ({
 const DropdownSection = ({list = [], onClick, activeMenuItem}) => {
     return (
         <li role="separator">
-            <span className="tracking-loose block border-t border-grey-200 px-3 pt-3 pb-2 text-xs font-medium uppercase text-grey dark:border-grey-900 dark:text-grey-800">Replace existing</span>
+            <span className="tracking-loose block border-t border-grey-200 px-3 pb-2 pt-3 text-xs font-medium uppercase text-grey dark:border-grey-900 dark:text-grey-800">Replace existing</span>
             <ul role="menu">
                 {
                     list.map((item, index) => (
@@ -88,7 +88,7 @@ const DropdownItem = ({onClick, name, active, index}) => {
         <li className="mb-1">
             <button
                 ref={buttonRef}
-                className="flex w-full cursor-pointer items-center justify-between py-2 px-3 text-left text-sm hover:bg-grey-100 focus:bg-grey-100 dark:hover:bg-black dark:focus:bg-black"
+                className="flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm hover:bg-grey-100 focus:bg-grey-100 dark:hover:bg-black dark:focus:bg-black"
                 type="button"
                 onClick={() => onClick(name)}
             >
diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx
index c34070c24..9ca2560db 100644
--- a/packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx
+++ b/packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx
@@ -6,7 +6,7 @@ export const Input = ({value, onChange, onClear, onKeyDown, arrowStyles}) => {
         <div className="shadow-[0 18px 45px -5px rgba(0,0,0,.15)] relative m-0 flex h-[35px] min-w-[240px] items-center justify-evenly rounded bg-white py-0 font-sans text-sm font-medium">
             <input
                 autoFocus={true}
-                className={`mb-[1px] h-auto w-full border bg-white py-1 pl-3 pr-9 font-normal leading-loose text-grey-900 selection:bg-grey/40 dark:bg-grey-950 dark:text-grey-100 dark:placeholder:text-grey-800 ${value ? 'rounded-t rounded-b-none border-grey-300 dark:border-grey-900' : 'rounded border-green'}`}
+                className={`mb-[1px] h-auto w-full border bg-white py-1 pl-3 pr-9 font-normal leading-loose text-grey-900 selection:bg-grey/40 dark:bg-grey-950 dark:text-grey-100 dark:placeholder:text-grey-800 ${value ? 'rounded-b-none rounded-t border-grey-300 dark:border-grey-900' : 'rounded border-green'}`}
                 data-testid="snippet-name"
                 placeholder="Snippet name"
                 value={value}
@@ -20,7 +20,7 @@ export const Input = ({value, onChange, onClear, onKeyDown, arrowStyles}) => {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <div
-                className="absolute top-[35px] left-[calc(50%-8px)] w-0 border-x-[9px] border-t-[9px] border-x-transparent border-t-green after:absolute after:top-[-9px] after:left-[calc(50%-8px)] after:w-0 after:border-x-8 after:border-t-8 after:border-x-transparent after:border-t-white dark:after:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[35px] w-0 border-x-[9px] border-t-[9px] border-x-transparent border-t-green after:absolute after:left-[calc(50%-8px)] after:top-[-9px] after:w-0 after:border-x-8 after:border-t-8 after:border-x-transparent after:border-t-white dark:after:border-t-grey-950"
                 style={arrowStyles}
             ></div>
         </div>
diff --git a/packages/koenig-lexical/src/components/ui/SubscribeForm.jsx b/packages/koenig-lexical/src/components/ui/SubscribeForm.jsx
index bb3cadecb..6d4e9e785 100644
--- a/packages/koenig-lexical/src/components/ui/SubscribeForm.jsx
+++ b/packages/koenig-lexical/src/components/ui/SubscribeForm.jsx
@@ -23,7 +23,7 @@ export function SubscribeForm({dataTestId, placeholder, value, buttonSize, butto
             <input
                 ref={setRef}
                 className={clsx(
-                    'relative w-full bg-white py-2 px-4 font-sans font-normal text-grey-900 focus-visible:outline-none',
+                    'relative w-full bg-white px-4 py-2 font-sans font-normal text-grey-900 focus-visible:outline-none',
                     buttonSize === 'small' && 'h-10 text-md leading-[4rem]',
                     buttonSize === 'medium' && 'h-11 text-[1.6rem] leading-[4.4rem]',
                     buttonSize === 'large' && 'h-12 text-lg leading-[4.8rem]',
diff --git a/packages/koenig-lexical/src/components/ui/TenorSelector.jsx b/packages/koenig-lexical/src/components/ui/TenorSelector.jsx
index 83e9638f9..b2cf2646b 100644
--- a/packages/koenig-lexical/src/components/ui/TenorSelector.jsx
+++ b/packages/koenig-lexical/src/components/ui/TenorSelector.jsx
@@ -300,10 +300,10 @@ const TenorSelector = ({onGifInsert, onClickOutside, updateSearch, columns, isLo
         >
             <header className="p-6">
                 <div className="relative w-full">
-                    <SearchIcon className="absolute top-1/2 left-4 h-4 w-4 -translate-y-2 text-grey-500 dark:text-grey-800" />
+                    <SearchIcon className="absolute left-4 top-1/2 h-4 w-4 -translate-y-2 text-grey-500 dark:text-grey-800" />
                     <input
                         ref={searchRef}
-                        className="h-10 w-full rounded-full border border-grey-300 pr-8 pl-10 font-sans text-md font-normal text-black focus:border-green focus:shadow-insetgreen dark:border-grey-800 dark:bg-grey-950 dark:text-white dark:placeholder:text-grey-800 dark:focus:border-green"
+                        className="h-10 w-full rounded-full border border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-green focus:shadow-insetgreen dark:border-grey-800 dark:bg-grey-950 dark:text-white dark:placeholder:text-grey-800 dark:focus:border-green"
                         placeholder="Search Tenor for GIFs"
                         autoFocus
                         onChange={handleSearch}
diff --git a/packages/koenig-lexical/src/components/ui/Toggle.jsx b/packages/koenig-lexical/src/components/ui/Toggle.jsx
index 387538faa..8f7e58eb7 100644
--- a/packages/koenig-lexical/src/components/ui/Toggle.jsx
+++ b/packages/koenig-lexical/src/components/ui/Toggle.jsx
@@ -10,7 +10,7 @@ export function Toggle({isChecked, onChange, dataTestId}) {
                 type="checkbox"
                 onChange={onChange}
             />
-            <div className="absolute inset-0 cursor-pointer rounded-full bg-grey-300 transition-all before:absolute before:left-[2px] before:bottom-[2px] before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-200 peer-checked:bg-black peer-checked:before:translate-x-[14px] dark:bg-grey-900 dark:peer-checked:bg-green"></div>
+            <div className="absolute inset-0 cursor-pointer rounded-full bg-grey-300 transition-all before:absolute before:bottom-[2px] before:left-[2px] before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-200 peer-checked:bg-black peer-checked:before:translate-x-[14px] dark:bg-grey-900 dark:peer-checked:bg-green"></div>
         </label>
     );
 }
diff --git a/packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx b/packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx
index 20fcfcf39..26c7291f5 100644
--- a/packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx
+++ b/packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx
@@ -46,7 +46,7 @@ export function ToolbarMenu({children, hide, arrowStyles, ...props}) {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <li
-                className="absolute top-[36px] left-[calc(50%-8px)] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[36px] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
                 style={arrowStyles}
             ></li>
         </ul>
diff --git a/packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx b/packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx
index a5f9ba3fb..cd7c07519 100644
--- a/packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx
@@ -114,7 +114,7 @@ function AudioThumbnail({
             <div className="group relative flex aspect-square h-20 items-center justify-center rounded-sm bg-purple">
                 <img alt="Audio thumbnail" className="h-full w-full rounded-sm object-cover transition ease-in" data-testid="audio-thumbnail" src={src} />
                 {isEditing && (
-                    <div className="absolute top-2 right-2 flex opacity-0 transition-all group-hover:opacity-100">
+                    <div className="absolute right-2 top-2 flex opacity-0 transition-all group-hover:opacity-100">
                         <IconButton dataTestId='remove-thumbnail' Icon={DeleteIcon} onClick={removeThumbnail} />
                     </div>
                 )}
diff --git a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx
index 0b1a21143..0678ad670 100644
--- a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx
@@ -30,10 +30,10 @@ export function BookmarkCard({
                 <div className="not-kg-prose relative flex min-h-[120px] w-full rounded border border-grey/40 bg-transparent font-sans dark:border-grey/20" data-testid="bookmark-container">
                     <div className="flex grow basis-full flex-col items-start justify-start p-5" data-testid="bookmark-text-container">
                         <div className="text-[1.5rem] font-semibold leading-normal tracking-normal text-grey-900 dark:text-grey-100" data-testid="bookmark-title">{title}</div>
-                        <div className="mt-1 max-h-[44px] overflow-y-hidden text-sm font-normal leading-normal text-grey-800 line-clamp-2 dark:text-grey-600" data-testid="bookmark-description">{description}</div>
+                        <div className="mt-1 line-clamp-2 max-h-[44px] overflow-y-hidden text-sm font-normal leading-normal text-grey-800 dark:text-grey-600" data-testid="bookmark-description">{description}</div>
                         <div className="mt-[20px] flex items-center text-sm font-medium leading-9 text-grey-900">
                             {icon && <BookmarkIcon src={icon} />}
-                            <span className=" db max-w-[240px] overflow-hidden text-ellipsis whitespace-nowrap leading-6 text-grey-900 dark:text-grey-100" data-testid="bookmark-publisher">{publisher}</span>
+                            <span className=" db max-w-[240px] truncate leading-6 text-grey-900 dark:text-grey-100" data-testid="bookmark-publisher">{publisher}</span>
                             {author && <span className="font-normal text-grey-800 before:mx-1.5 before:text-grey-900 before:content-['•'] dark:text-grey-600 dark:before:text-grey-100" data-testid="bookmark-author">{author}</span>}
                         </div>
                     </div>
diff --git a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx
index fc95d28ed..69d45f2e1 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx
@@ -193,7 +193,7 @@ export function CodeEditor({code, language, updateCode, updateLanguage, onBlur})
             />
             <input
                 aria-label="Code card language"
-                className={`z-999 absolute top-1.5 right-1.5 w-1/5 rounded border border-grey-300 p-1 font-sans text-[1.3rem] leading-4 text-grey-900 transition-opacity focus-visible:outline-none ${showLanguage ? 'opacity-100' : 'opacity-0'}`}
+                className={`z-999 absolute right-1.5 top-1.5 w-1/5 rounded border border-grey-300 p-1 font-sans text-[1.3rem] leading-4 text-grey-900 transition-opacity focus-visible:outline-none ${showLanguage ? 'opacity-100' : 'opacity-0'}`}
                 data-testid="code-card-language"
                 placeholder="Language..."
                 type="text"
@@ -215,7 +215,7 @@ export function CodeBlock({code, darkMode, language}) {
                     {code}
                 </code>
             </pre>
-            <div className="absolute top-2 right-2 flex items-center justify-center px-1">
+            <div className="absolute right-2 top-2 flex items-center justify-center px-1">
                 <span className="block font-sans text-sm font-medium leading-normal text-grey">{language}</span>
             </div>
         </div>
diff --git a/packages/koenig-lexical/src/components/ui/cards/CollectionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CollectionCard.jsx
index b6167aae3..307625e11 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CollectionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CollectionCard.jsx
@@ -53,11 +53,11 @@ function PostExcerpt({excerpt, layout, columns, isLoading}) {
     return (
         <div className={clsx(
             'overflow-y-hidden font-normal leading-snug text-grey-900 dark:text-grey-600',
-            layout === 'list' && 'mt-2 max-h-[62px] text-md line-clamp-3',
-            (layout === 'grid' && columns === 1) && 'mt-3 max-h-[75px] text-lg line-clamp-3',
-            (layout === 'grid' && columns === 2) && 'mt-3 max-h-[66px] text-[1.6rem] line-clamp-3',
-            (layout === 'grid' && columns === 3) && 'mt-2 max-h-[42px] text-md line-clamp-2',
-            (layout === 'grid' && columns === 4) && 'mt-2 max-h-[42px] text-md line-clamp-2',
+            layout === 'list' && 'mt-2 line-clamp-3 max-h-[62px] text-md',
+            (layout === 'grid' && columns === 1) && 'mt-3 line-clamp-3 max-h-[75px] text-lg',
+            (layout === 'grid' && columns === 2) && 'mt-3 line-clamp-3 max-h-[66px] text-[1.6rem]',
+            (layout === 'grid' && columns === 3) && 'mt-2 line-clamp-2 max-h-[42px] text-md',
+            (layout === 'grid' && columns === 4) && 'mt-2 line-clamp-2 max-h-[42px] text-md',
             isLoading && 'w-1/2 animate-pulse rounded-full bg-grey-200 dark:bg-grey-950'
         )}>
             {isLoading ? 
diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx
index 9d3098963..e60775d09 100644
--- a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx
@@ -52,7 +52,7 @@ export function EmailCtaCard({
         <>
             <div className="w-full pb-6">
                 {/* Segment */}
-                <div className="pt-1 pb-7 font-sans text-xs font-semibold uppercase leading-8 tracking-tight text-grey dark:text-grey-800">
+                <div className="pb-7 pt-1 font-sans text-xs font-semibold uppercase leading-8 tracking-tight text-grey dark:text-grey-800">
                     {segmentName}
                 </div>
 
@@ -79,7 +79,7 @@ export function EmailCtaCard({
                 }
 
                 {/* Bottom divider */}
-                {showDividers && <hr className="mt-12 mb-0 block border-t-grey-300 dark:border-t-grey-900" data-testid="bottom-divider" />}
+                {showDividers && <hr className="mb-0 mt-12 block border-t-grey-300 dark:border-t-grey-900" data-testid="bottom-divider" />}
 
                 {/* Read-only overlay */}
                 {!isEditing && <div className="absolute top-0 z-10 !m-0 h-full w-full cursor-default p-0"></div>}
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 614758990..113bc48df 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -248,7 +248,7 @@ export function HeaderCard({alignment,
                             className={clsx(
                                 'sm:w-1/2',
                                 (correctedBackgroundSize === 'contain') && 'sm:my-10 md:my-14',
-                                (!isSwapped && (correctedBackgroundSize === 'contain')) && 'mt-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pr-0 sm:pl-[calc(92px-(12rem/2))] md:pl-[calc(92px-(12rem/2))] lg:pl-0',
+                                (!isSwapped && (correctedBackgroundSize === 'contain')) && 'mt-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pl-[calc(92px-(12rem/2))] sm:pr-0 md:pl-[calc(92px-(12rem/2))] lg:pl-0',
                                 (isSwapped && (correctedBackgroundSize === 'contain')) && 'mb-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pl-0 sm:pr-[calc(92px-(12rem/2))] md:pr-[calc(92px-(12rem/2))] lg:pr-0',
                             )}
                             desc='Click to select an image'
@@ -273,9 +273,9 @@ export function HeaderCard({alignment,
                         className={clsx(
                             'mx-auto flex w-full flex-1 flex-col justify-center',
                             (alignment === 'center') && 'items-center',
-                            (layout === 'regular') && 'p-[4rem] sm:py-[6rem] md:py-[10rem] md:px-[6rem] lg:px-[8rem]',
-                            (layout === 'wide') && 'max-w-[740px] p-[4rem] sm:py-[6rem] md:py-[14rem] md:px-[8rem] lg:px-0',
-                            (layout === 'full') && 'py-[4rem] px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:py-[6rem] md:py-[12rem] md:px-[calc(92px-(12rem/2))] lg:py-[14rem] lg:px-0 xl:py-[18rem]',
+                            (layout === 'regular') && 'p-[4rem] sm:py-[6rem] md:px-[6rem] md:py-[10rem] lg:px-[8rem]',
+                            (layout === 'wide') && 'max-w-[740px] p-[4rem] sm:py-[6rem] md:px-[8rem] md:py-[14rem] lg:px-0',
+                            (layout === 'full') && 'px-[calc(32px-(4rem/2))] py-[4rem] xs:px-[calc(92px-(8rem/2))] sm:py-[6rem] md:px-[calc(92px-(12rem/2))] md:py-[12rem] lg:px-0 lg:py-[14rem] xl:py-[18rem]',
                             (layout === 'split') && 'p-[4rem] sm:py-[6rem] md:px-[6rem] md:py-[12rem] lg:px-[8rem] lg:py-[16rem]',
                             (!isSwapped && layout === 'split' && correctedBackgroundSize === 'contain') && 'px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:px-[calc(92px-(12rem/2))] md:pr-[calc(92px-(12rem/2))] lg:pr-0',
                             (isSwapped && layout === 'split' && correctedBackgroundSize === 'contain') && 'px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:px-[calc(92px-(12rem/2))] md:pl-[calc(92px-(12rem/2))] lg:pl-0',
diff --git a/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx b/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx
index d5a248758..5014e6b19 100644
--- a/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx
@@ -71,7 +71,7 @@ export function ProductCardImage({
                             {
                                 isEditing && (
                                     <>
-                                        <div className="absolute top-5 right-5 flex opacity-0 transition-all group-hover:opacity-100">
+                                        <div className="absolute right-5 top-5 flex opacity-0 transition-all group-hover:opacity-100">
                                             <IconButton dataTestId="replace-product-image" Icon={DeleteIcon} onClick={onRemove} />
                                         </div>
                                     </>
@@ -81,7 +81,7 @@ export function ProductCardImage({
                             {
                                 isEditing && isPinturaEnabled && (
                                     <>
-                                        <div className="absolute top-5 right-16 flex opacity-0 transition-all group-hover:opacity-100">
+                                        <div className="absolute right-16 top-5 flex opacity-0 transition-all group-hover:opacity-100">
                                             <IconButton dataTestId="replace-product-image" Icon={EditIcon} onClick={() => openImageEditor({
                                                 image: imgSrc,
                                                 handleSave: (editedImage) => {
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index b25b91036..3f886c9dc 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -225,7 +225,7 @@ export function SignupCard({alignment,
                             className={clsx(
                                 'sm:w-1/2',
                                 (correctedBackgroundSize === 'contain') && 'sm:my-10 md:my-14',
-                                (!isSwapped && (correctedBackgroundSize === 'contain')) && 'mt-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pr-0 sm:pl-[calc(92px-(12rem/2))] md:pl-[calc(92px-(12rem/2))] lg:pl-0',
+                                (!isSwapped && (correctedBackgroundSize === 'contain')) && 'mt-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pl-[calc(92px-(12rem/2))] sm:pr-0 md:pl-[calc(92px-(12rem/2))] lg:pl-0',
                                 (isSwapped && (correctedBackgroundSize === 'contain')) && 'mb-10 px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:pl-0 sm:pr-[calc(92px-(12rem/2))] md:pr-[calc(92px-(12rem/2))] lg:pr-0',
                             )}
                             desc='Click to select an image'
@@ -250,9 +250,9 @@ export function SignupCard({alignment,
                         className={clsx(
                             'mx-auto flex w-full flex-1 flex-col justify-center',
                             (alignment === 'center') && 'items-center',
-                            (layout === 'regular') && 'p-[4rem] sm:py-[6rem] md:py-[8rem] md:px-[6rem] lg:px-[8rem]',
-                            (layout === 'wide') && 'max-w-[740px] p-[4rem] sm:py-[6rem] md:py-[10rem] md:px-[8rem] lg:px-0',
-                            (layout === 'full') && 'py-[4rem] px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:py-[6rem] md:py-[12rem] md:px-[calc(92px-(12rem/2))] lg:py-[14rem] lg:px-0 xl:py-[18rem]',
+                            (layout === 'regular') && 'p-[4rem] sm:py-[6rem] md:px-[6rem] md:py-[8rem] lg:px-[8rem]',
+                            (layout === 'wide') && 'max-w-[740px] p-[4rem] sm:py-[6rem] md:px-[8rem] md:py-[10rem] lg:px-0',
+                            (layout === 'full') && 'px-[calc(32px-(4rem/2))] py-[4rem] xs:px-[calc(92px-(8rem/2))] sm:py-[6rem] md:px-[calc(92px-(12rem/2))] md:py-[12rem] lg:px-0 lg:py-[14rem] xl:py-[18rem]',
                             (layout === 'split') && 'p-[4rem] sm:py-[6rem] md:px-[6rem] md:py-[12rem] lg:px-[8rem] lg:py-[16rem] xl:py-[18rem]',
                             (!isSwapped && layout === 'split' && correctedBackgroundSize === 'contain') && 'px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:px-[calc(92px-(12rem/2))] md:pr-[calc(92px-(12rem/2))] lg:pr-0',
                             (isSwapped && layout === 'split' && correctedBackgroundSize === 'contain') && 'px-[calc(32px-(4rem/2))] xs:px-[calc(92px-(8rem/2))] sm:px-[calc(92px-(12rem/2))] md:pl-[calc(92px-(12rem/2))] lg:pl-0',
diff --git a/packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx
index d6ab20a01..f3135bc03 100644
--- a/packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx
@@ -14,7 +14,7 @@ export function ToggleCard({
 }) {
     return (
         <>
-            <div className='rounded border border-grey/40 py-4 px-6 dark:border-grey/30'>
+            <div className='rounded border border-grey/40 px-6 py-4 dark:border-grey/30'>
                 <div className='flex cursor-text items-start justify-between'>
                     <div className="mr-2 w-full">
                         <KoenigNestedEditor
@@ -29,7 +29,7 @@ export function ToggleCard({
                             textClassName={'koenig-lexical-heading heading-small whitespace-normal text-black dark:text-grey-50 opacity-100'}
                         />
                     </div>
-                    <div className='z-20 ml-auto !mt-[-1px] flex h-8 w-8 shrink-0 items-center justify-center'>
+                    <div className='z-20 !mt-[-1px] ml-auto flex h-8 w-8 shrink-0 items-center justify-center'>
                         <ArrowDownIcon className={'h-4 w-4 stroke-2 text-grey-400 dark:text-grey/30'} />
                     </div>
                 </div>
diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx
index 05e89c3a6..5140fd3f6 100644
--- a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx
+++ b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx
@@ -10,7 +10,7 @@ function UnsplashButton({icon, label, ...props}) {
     const Icon = BUTTON_ICONS[icon];
 
     return (
-        <a className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white py-2 px-3 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out first-of-type:mr-3 hover:opacity-100"
+        <a className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out first-of-type:mr-3 hover:opacity-100"
             type="button" 
             onClick={e => e.stopPropagation()} 
             {...props}
diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx
index 4ef5ad66e..553b5b40b 100644
--- a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx
+++ b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx
@@ -9,7 +9,7 @@ function UnsplashSelector({closeModal, handleSearch, children, galleryRef}) {
         <>
             <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60"></div>
             <div ref={galleryRef} className="not-kg-prose fixed inset-8 z-50 overflow-hidden rounded bg-white shadow-xl" data-kg-modal="unsplash">
-                <button className="absolute top-6 right-6 cursor-pointer" type="button">
+                <button className="absolute right-6 top-6 cursor-pointer" type="button">
                     <CloseIcon
                         className="h-4 w-4 stroke-2 text-grey-400"
                         data-kg-modal-close-button
@@ -17,14 +17,14 @@ function UnsplashSelector({closeModal, handleSearch, children, galleryRef}) {
                     />
                 </button>
                 <div className="flex h-full flex-col">
-                    <header className="flex shrink-0 items-center justify-between py-10 px-20">
+                    <header className="flex shrink-0 items-center justify-between px-20 py-10">
                         <h1 className="flex items-center gap-2 font-sans text-3xl font-bold text-black">
                             <UnsplashIcon className="mb-1" />
                             Unsplash
                         </h1>
                         <div className="relative w-full max-w-sm">
-                            <SearchIcon className="absolute top-1/2 left-4 h-4 w-4 -translate-y-2 text-grey-700" />
-                            <input className="h-10 w-full rounded-full border border-grey-300 pr-8 pl-10 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
+                            <SearchIcon className="absolute left-4 top-1/2 h-4 w-4 -translate-y-2 text-grey-700" />
+                            <input className="h-10 w-full rounded-full border border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
                         </div>
                     </header>
                     {children}
diff --git a/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js
index 7624ac31b..7c76ada2e 100644
--- a/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js
@@ -142,8 +142,7 @@ test.describe('Email card', async () => {
                 <div class="relative border-transparent caret-grey-800 hover:shadow-[0_0_0_1px] hover:shadow-green hover:-mx-3 hover:px-3"
                     data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
                     <div class="w-full pb-6">
-                        <div class="pt-1 pb-7 font-sans text-xs font-semibold uppercase leading-8 tracking-tight text-grey
-                        dark:text-grey-800">Free members</div>
+                        <div class="pb-7 pt-1 font-sans text-xs font-semibold uppercase leading-8 tracking-tight text-grey dark:text-grey-800">Free members</div>
                         <div
                             class="koenig-lexical kg-inherit-styles w-full bg-transparent whitespace-normal font-serif text-xl text-grey-900 dark:text-grey-200 text-center mx-auto [&amp;:has(.placeholder)]:w-fit [&amp;:has(.placeholder)]:text-left">
                             <div data-kg="editor">
diff --git a/yarn.lock b/yarn.lock
index 2770612b6..9cab85322 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.0.tgz#1991d273fb29edbd2f63060f5bdaf0af26aa64e3"
   integrity sha512-+RNNcQvw2V1bmnBTPAtOLfW/9mhH2vC67+rUSi5T8EtEWt6lEnGNY2GuhZ1/YwbgikT1TkhvidCDmN5Q5YCo/w==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
@@ -5219,6 +5224,11 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
   integrity sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -7016,7 +7026,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -7097,6 +7107,11 @@ commander@^3.0.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -7905,7 +7920,7 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "4"
 
-detective@^5.2.0, detective@^5.2.1:
+detective@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
   integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
@@ -8710,7 +8725,6 @@ eslint-plugin-es-x@^7.1.0:
 
 eslint-plugin-filenames@allouis/eslint-plugin-filenames#15dc354f4e3d155fc2d6ae082dbfc26377539a18:
   version "1.3.2"
-  uid "15dc354f4e3d155fc2d6ae082dbfc26377539a18"
   resolved "https://codeload.github.com/allouis/eslint-plugin-filenames/tar.gz/15dc354f4e3d155fc2d6ae082dbfc26377539a18"
   dependencies:
     lodash.camelcase "4.3.0"
@@ -10149,6 +10163,18 @@ glob@7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
@@ -12264,6 +12290,11 @@ jest@^28.0.0:
     import-local "^3.0.2"
     jest-cli "^28.1.3"
 
+jiti@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.1.tgz#fa99e4b76a23053e0e7cde098efe1704a14c16f1"
+  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+
 joi@^17.3.0:
   version "17.9.2"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.9.2.tgz#8b2e4724188369f55451aebd1d0b1d9482470690"
@@ -12802,7 +12833,7 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -14314,6 +14345,15 @@ mute-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-1.0.0.tgz#e31bd9fe62f0aed23520aa4324ea6671531e013e"
   integrity sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nan@^2.12.1:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
@@ -14771,7 +14811,7 @@ nyc@^15.1.0:
     test-exclude "^6.0.0"
     yargs "^15.0.2"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -15520,7 +15560,7 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
 
-pirates@^4.0.4, pirates@^4.0.5:
+pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.5:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
@@ -15608,7 +15648,7 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
 
-postcss-import@15.1.0:
+postcss-import@15.1.0, postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
   integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
@@ -15617,36 +15657,27 @@ postcss-import@15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-import@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
-  dependencies:
-    postcss-value-parser "^4.0.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-js@^4.0.0:
+postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
-    yaml "^1.10.2"
+    yaml "^2.1.1"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
 
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
@@ -15658,7 +15689,7 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
@@ -15671,7 +15702,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.27, postcss@^8.0.9, postcss@^8.4.23, postcss@^8.4.25, postcss@^8.4.27, postcss@^8.4.4:
+postcss@8.4.27, postcss@^8.4.23, postcss@^8.4.25, postcss@^8.4.27, postcss@^8.4.4:
   version "8.4.27"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
   integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
@@ -16656,7 +16687,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
   integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4, resolve@^1.4.0:
+resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4, resolve@^1.4.0:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -17847,6 +17878,19 @@ subarg@^1.0.0:
   dependencies:
     minimist "^1.1.0"
 
+sucrase@^3.32.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@8.1.1, supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
@@ -17961,34 +18005,33 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"
-  integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==
+tailwindcss@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
+  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    lilconfig "^2.0.6"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.0.9"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
     postcss-selector-parser "^6.0.11"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 tar-fs@^2.1.1:
   version "2.1.1"
@@ -18102,6 +18145,20 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
   integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 through2-filter@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
@@ -18348,6 +18405,11 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.14.2:
   version "3.14.2"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
@@ -19667,12 +19729,12 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.2.2:
+yaml@^2.1.1, yaml@^2.2.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
   integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==