Update dependency tailwindcss to v3.3.3

refs #676

- required for the `eslint-plugin-tailwindcss` bump to work correctly
- ran `yarn lint:js --fix`
  - CSS ordering changed to be more deterministic, see tailwindlabs/tailwindcss#10672

Author: kevinansfield

packages/koenig-lexical/.eslintrc.cjs

@@ -47,4 +47,4 @@ module.exports = {
             'react/prop-types': 2
         }
     }]
-};
+};

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

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}

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}

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>

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>
         </>

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}

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>
     );

packages/koenig-lexical/package.json

@@ -120,7 +120,7 @@
     "react-router-dom": "6.14.2",
     "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",

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>
     );