astro-tractstack 2.0.47 → 2.1.0

package/templates/src/components/edit/panels/StyleElementPanel_add.tsx

@@ -262,9 +262,9 @@ const StyleElementPanelAdd = ({
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -286,13 +286,13 @@ const StyleElementPanelAdd = ({
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search styles..."
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -303,7 +303,7 @@ const StyleElementPanelAdd = ({
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -339,7 +339,7 @@ const StyleElementPanelAdd = ({
               <button
                 key={style.key}
                 onClick={() => handleSelect({ value: [style.key] })}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleElementPanel_remove.tsx

@@ -140,7 +140,7 @@ const StyleElementRemovePanel = ({
         Remove <span className="font-bold">{friendlyName}</span>?
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleElementPanel_update.tsx

@@ -289,9 +289,9 @@ const StyleElementUpdatePanel = ({
           checked={isOverridden}
           onChange={(e) => handleToggleOverride(e.target.checked)}
           disabled={node.tagName === 'span'}
-          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded disabled:opacity-50"
+          className="h-4 w-4 rounded border-mydarkgrey text-myorange focus:ring-myorange disabled:opacity-50"
         />
-        <span className="text-mydarkgrey text-sm">
+        <span className="text-sm text-mydarkgrey">
           {node.tagName === 'span'
             ? 'Styling this selection (Override mode).'
             : isOverridden
@@ -300,7 +300,7 @@ const StyleElementUpdatePanel = ({
         </span>
       </div>
 
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div className="my-3 flex flex-col gap-y-2.5 text-xl text-mydarkgrey">
         <ViewportComboBox
           value={mobileValue}
           onFinalChange={handleFinalChange}

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -320,7 +320,7 @@ const StyleImagePanel = ({
         />
 
         <div>
-          <label className="text-mydarkgrey block text-sm">
+          <label className="block text-sm text-mydarkgrey">
             Alt Description
           </label>
           <input
@@ -333,7 +333,7 @@ const StyleImagePanel = ({
                 e.currentTarget.blur();
               }
             }}
-            className="border-mydarkgrey w-full rounded-md py-2 pl-3 text-base"
+            className="w-full rounded-md border-mydarkgrey py-2 pl-3 text-base"
             placeholder="Describe the image..."
           />
         </div>
@@ -357,14 +357,14 @@ const StyleImagePanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleImgAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>
@@ -400,14 +400,14 @@ const StyleImagePanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleContainerAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>
@@ -441,14 +441,14 @@ const StyleImagePanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleOuterAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>

package/templates/src/components/edit/panels/StyleImagePanel_add.tsx

@@ -217,9 +217,9 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -241,13 +241,13 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search styles..."
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -258,7 +258,7 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -294,7 +294,7 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
               <button
                 key={style.key}
                 onClick={() => handleSelect({ value: [style.key] })}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleImagePanel_remove.tsx

@@ -127,7 +127,7 @@ const StyleImageRemovePanel = ({
         <span className="ml-1">from {elementTypeTitle}?</span>
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleImagePanel_update.tsx

@@ -273,16 +273,16 @@ const StyleImageUpdatePanel = ({
           type="checkbox"
           checked={isOverridden}
           onChange={(e) => handleToggleOverride(e.target.checked)}
-          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded"
+          className="h-4 w-4 rounded border-mydarkgrey text-myorange focus:ring-myorange"
         />
-        <span className="text-mydarkgrey text-sm">
+        <span className="text-sm text-mydarkgrey">
           {isOverridden
             ? 'Override mode. Styling this element only.'
             : 'You are in quick styles mode. Click to override this element.'}
         </span>
       </div>
 
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div className="my-3 flex flex-col gap-y-2.5 text-xl text-mydarkgrey">
         <ViewportComboBox
           value={mobileValue}
           onFinalChange={handleFinalChange}

package/templates/src/components/edit/panels/StyleLiElementPanel.tsx

@@ -209,14 +209,14 @@ const StyleLiElementPanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleLiAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>
@@ -252,14 +252,14 @@ const StyleLiElementPanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleContainerAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>

package/templates/src/components/edit/panels/StyleLiElementPanel_add.tsx

@@ -222,9 +222,9 @@ const StyleLiElementAddPanel = ({
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -247,13 +247,13 @@ const StyleLiElementAddPanel = ({
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 placeholder="Search styles..."
                 autoComplete="off"
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -264,7 +264,7 @@ const StyleLiElementAddPanel = ({
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -300,7 +300,7 @@ const StyleLiElementAddPanel = ({
               <button
                 key={style.key}
                 onClick={() => handleStyleClick(style.key)}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleLiElementPanel_remove.tsx

@@ -106,7 +106,7 @@ const StyleLiElementRemovePanel = ({
         {isContainer ? ' from Container' : ' from List Item'}?
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleLiElementPanel_update.tsx

@@ -273,16 +273,16 @@ const StyleLiElementUpdatePanel = ({
           type="checkbox"
           checked={isOverridden}
           onChange={(e) => handleToggleOverride(e.target.checked)}
-          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded"
+          className="h-4 w-4 rounded border-mydarkgrey text-myorange focus:ring-myorange"
         />
-        <span className="text-mydarkgrey text-sm">
+        <span className="text-sm text-mydarkgrey">
           {isOverridden
             ? 'Override mode. Styling this element only.'
             : 'You are in quick styles mode. Click to override this element.'}
         </span>
       </div>
 
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div className="my-3 flex flex-col gap-y-2.5 text-xl text-mydarkgrey">
         <ViewportComboBox
           value={mobileValue}
           onFinalChange={handleFinalChange}

package/templates/src/components/edit/panels/StyleLinkPanel.tsx

@@ -269,7 +269,7 @@ const StyleLinkPanel = ({ node }: BasePanelProps) => {
     <div className="space-y-8">
       <div className="space-y-4">
         <div className="pb-2">
-          <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+          <div className="w-fit rounded border border-slate-200 p-2 text-sm text-myblack hover:bg-mygreen/20">
             <div
               title="Configure this Link"
               className="flex items-center gap-2 font-bold"
@@ -339,14 +339,14 @@ const StyleLinkPanel = ({ node }: BasePanelProps) => {
             )}
 
             <div className="space-y-4">
-              <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+              <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
                 <li>
                   <em>Actions:</em>
                 </li>
                 <li>
                   <button
                     onClick={handleButtonStyleAdd}
-                    className="text-myblue font-bold underline hover:text-black"
+                    className="font-bold text-myblue underline hover:text-black"
                   >
                     Add Style
                   </button>
@@ -383,14 +383,14 @@ const StyleLinkPanel = ({ node }: BasePanelProps) => {
           )}
 
           <div className="space-y-4">
-            <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+            <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
               <li>
                 <em>Actions:</em>
               </li>
               <li>
                 <button
                   onClick={handleHoverStyleAdd}
-                  className="text-myblue font-bold underline hover:text-black"
+                  className="font-bold text-myblue underline hover:text-black"
                 >
                   Add Style
                 </button>

package/templates/src/components/edit/panels/StyleLinkPanel_add.tsx

@@ -182,9 +182,9 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -207,13 +207,13 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 placeholder="Search styles..."
                 autoComplete="off"
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -224,7 +224,7 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {styleCollection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -260,7 +260,7 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
               <button
                 key={style.key}
                 onClick={() => handleStyleClick(style.key)}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleLinkPanel_remove.tsx

@@ -65,7 +65,7 @@ const StyleLinkRemovePanel = ({ node, className }: BasePanelProps) => {
         </span>
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleLinkPanel_update.tsx

@@ -93,7 +93,7 @@ const StyleLinkUpdatePanel = ({ node, className }: BasePanelProps) => {
         </button>
       </div>
 
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div className="my-3 flex flex-col gap-y-2.5 text-xl text-mydarkgrey">
         <ViewportComboBox
           value={value}
           onFinalChange={(newValue) => handleFinalChange(newValue)}

package/templates/src/components/edit/panels/StyleParentPanel.tsx

@@ -419,14 +419,14 @@ const StyleParentPanel = ({
                 </div>
               )}
               <div>
-                <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+                <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
                   <li>
                     <em>Actions:</em>
                   </li>
                   <li>
                     <button
                       onClick={handleClickAdd}
-                      className="text-myblue font-bold underline hover:text-black"
+                      className="font-bold text-myblue underline hover:text-black"
                     >
                       Add Style
                     </button>
@@ -554,10 +554,10 @@ const StyleParentPanel = ({
       <div className="space-y-4">
         <BackButton />
         <div className="mb-4 flex items-center gap-3 rounded-md bg-slate-50 p-3">
-          <span className="text-mydarkgrey text-sm font-bold">Layer:</span>
+          <span className="text-sm font-bold text-mydarkgrey">Layer:</span>
           <div className="flex flex-wrap items-center gap-2">
             <button
-              className="border-mydarkgrey/30 text-mydarkgrey rounded border border-dashed p-1 text-xs transition-colors hover:bg-white/50 hover:text-black"
+              className="rounded border border-dashed border-mydarkgrey/30 p-1 text-xs text-mydarkgrey transition-colors hover:bg-white/50 hover:text-black"
               title="Add Layer Here"
               onClick={() => handleLayerAdd('before', 1)}
             >
@@ -574,14 +574,14 @@ const StyleParentPanel = ({
                     className={`min-w-8 rounded-md px-3 py-1.5 text-sm font-bold transition-colors ${
                       currentLayer === num
                         ? 'bg-myblue text-white shadow-sm'
-                        : 'text-mydarkgrey hover:bg-mydarkgrey/10 bg-white hover:text-black'
+                        : 'bg-white text-mydarkgrey hover:bg-mydarkgrey/10 hover:text-black'
                     }`}
                     onClick={() => setCurrentLayer(num)}
                   >
                     {num}
                   </button>
                   <button
-                    className="border-mydarkgrey/30 text-mydarkgrey rounded border border-dashed p-1 text-xs transition-colors hover:bg-white/50 hover:text-black"
+                    className="rounded border border-dashed border-mydarkgrey/30 p-1 text-xs text-mydarkgrey transition-colors hover:bg-white/50 hover:text-black"
                     title="Add Layer Here"
                     onClick={() =>
                       handleLayerAdd(
@@ -618,14 +618,14 @@ const StyleParentPanel = ({
           </div>
         )}
         <div>
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleClickAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>
@@ -633,7 +633,7 @@ const StyleParentPanel = ({
             <li>
               <button
                 onClick={handleClickDeleteLayer}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Delete Layer
               </button>

package/templates/src/components/edit/panels/StyleParentPanel_add.tsx

@@ -231,9 +231,9 @@ const StyleParentPanelAdd = ({
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -256,13 +256,13 @@ const StyleParentPanelAdd = ({
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 placeholder="Search styles..."
                 autoComplete="off"
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -273,7 +273,7 @@ const StyleParentPanelAdd = ({
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -309,7 +309,7 @@ const StyleParentPanelAdd = ({
               <button
                 key={style.key}
                 onClick={() => handleStyleClick(style.key)}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleParentPanel_deleteLayer.tsx

@@ -96,10 +96,10 @@ const StyleParentDeleteLayerPanel = ({ node, layer }: ParentBasePanelProps) => {
         Remove Layer <span className="font-bold">{layer}</span>?
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <p className="text-myorange font-bold">
+        <p className="font-bold text-myorange">
           This layer has {count} classes.
         </p>
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleParentPanel_remove.tsx

@@ -147,7 +147,7 @@ const StyleParentPanelRemove = ({
       </div>
       <div>
         <h3 className="text-xl font-bold">Remove Style</h3>
-        <p className="text-mydarkgrey mt-2">
+        <p className="mt-2 text-mydarkgrey">
           Are you sure you want to remove this style?
         </p>
         <div className="my-4 rounded-md bg-slate-100 p-4">

package/templates/src/components/edit/panels/StyleParentPanel_update.tsx

@@ -171,7 +171,7 @@ const StyleParentPanelUpdate = ({
       </div>
       <div>
         <h3 className="text-xl font-bold">{tailwindConfig.title}</h3>
-        <p className="text-mydarkgrey mt-1 font-mono text-sm">
+        <p className="mt-1 font-mono text-sm text-mydarkgrey">
           {tailwindConfig.className}
         </p>
       </div>