Fix Tailwind class ordering (lint-fix)

Author: kylecarbs

src/App.tsx

@@ -662,7 +662,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="bg-gray-950 flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-gray-950 [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}

src/components/CommandPalette.tsx

@@ -364,12 +364,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="text-gray-100 font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border border-gray-800 bg-gray-900 shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
+        className="font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border border-gray-800 bg-gray-900 text-gray-100 shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="text-gray-100 border-gray-900 w-full border-b border-none bg-gray-950 px-3.5 py-3 text-sm outline-none"
+          className="w-full border-b border-none border-gray-900 bg-gray-950 px-3.5 py-3 text-sm text-gray-100 outline-none"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={

src/components/Context1MCheckbox.tsx

@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="checked:bg-sky-600 relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-gray-800 bg-gray-950 checked:border-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
+          className="relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-gray-800 bg-gray-950 checked:border-sky-600 checked:bg-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
         />
         1M Context
       </label>

src/components/DirectorySelectModal.tsx

@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="border-gray-700 mb-5 w-full rounded border bg-gray-900 px-3 py-2 font-mono text-sm text-white placeholder:text-gray-500 focus:border-sky-600 focus:outline-none"
+        className="mb-5 w-full rounded border border-gray-700 bg-gray-900 px-3 py-2 font-mono text-sm text-white placeholder:text-gray-500 focus:border-sky-600 focus:outline-none"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>

src/components/Messages/ChatBarrier/StreamingBarrier.tsx

@@ -24,7 +24,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
           <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
             ~{tokenCount.toLocaleString()} tokens
             {tps !== undefined && tps > 0 && (
-              <span className="text-gray-400 ml-1">@ {tps} t/s</span>
+              <span className="ml-1 text-gray-400">@ {tps} t/s</span>
             )}
           </span>
         )}

src/components/Messages/MessageWindow.tsx

@@ -68,7 +68,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
     >
       {backgroundEffect}
       <div
-        className="text-gray-300 relative z-10 flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-1 text-[11px] font-medium"
+        className="relative z-10 flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-1 text-[11px] font-medium text-gray-300"
         data-message-header
       >
         <div className="flex min-w-0 flex-1 items-baseline gap-3" data-message-header-left>

src/components/NewWorkspaceModal.tsx

@@ -100,7 +100,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
       describedById={infoId}
     >
       <form onSubmit={(event) => void handleSubmit(event)}>
-        <div className="[&_input]:border-gray-700 [&_select]:border-gray-700 mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
+        <div className="mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:border-gray-700 [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:border-gray-700 [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="branchName">
             <TooltipWrapper inline>
               <span className="cursor-help underline decoration-[#666] decoration-dotted underline-offset-2">
@@ -137,7 +137,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
           {error && <div className="text-danger-light mt-1.5 text-[13px]">{error}</div>}
         </div>
 
-        <div className="[&_input]:border-gray-700 [&_select]:border-gray-700 mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
+        <div className="mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:border-gray-700 [&_input]:bg-gray-900 [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:border-sky-600 [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_label]:text-gray-200 [&_option]:bg-gray-900 [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:border-gray-700 [&_select]:bg-gray-900 [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:border-sky-600 [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="trunkBranch">Trunk Branch:</label>
           {hasBranches ? (
             <select

src/components/ProjectSidebar.tsx

@@ -137,13 +137,13 @@ const ProjectDragLayer: React.FC = () => {
     <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
         <div className="border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] bg-gray-900/95 px-3 py-1.5 text-gray-200 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
-          <span className="text-gray-400 mr-1.5 text-xs">⠿</span>
+          <span className="mr-1.5 text-xs text-gray-400">⠿</span>
           <span className="mr-2 text-[10px] text-gray-500">▶</span>
           <div className="min-w-0 flex-1">
             <div className="truncate text-sm font-medium tracking-[0.2px] text-gray-200">
               {name}
             </div>
-            <div className="text-gray-600 font-monospace mt-0.5 truncate text-[11px]">
+            <div className="font-monospace mt-0.5 truncate text-[11px] text-gray-600">
               {abbrevPath}
             </div>
           </div>
@@ -422,7 +422,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="border-gray-950 flex items-center justify-between border-b bg-gray-900 p-4">
+              <div className="flex items-center justify-between border-b border-gray-950 bg-gray-900 p-4">
                 <h2 className="m-0 text-[13px] font-semibold tracking-[0.8px] text-gray-200 uppercase">
                   Projects
                 </h2>
@@ -445,7 +445,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     <p className="mb-4 text-[13px] text-gray-500">No projects</p>
                     <button
                       onClick={onAddProject}
-                      className="bg-sky-600 hover:bg-sky-600-dark cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white transition-colors duration-200"
+                      className="hover:bg-sky-600-dark cursor-pointer rounded border-none bg-sky-600 px-4 py-2 text-[13px] text-white transition-colors duration-200"
                     >
                       Add Project
                     </button>
@@ -461,7 +461,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isExpanded = expandedProjects.has(projectPath);
 
                     return (
-                      <div key={projectPath} className="border-gray-900 border-b">
+                      <div key={projectPath} className="border-b border-gray-900">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -482,7 +482,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-gray-400 mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
+                            className="mr-1.5 cursor-grab text-xs text-gray-400 opacity-0 transition-opacity duration-150 select-none"
                           >
                             ⠿
                           </span>
@@ -499,7 +499,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
-                              <div className="text-gray-600 font-monospace mt-px truncate text-[11px]">
+                              <div className="font-monospace mt-px truncate text-[11px] text-gray-600">
                                 {abbreviatePath(projectPath)}
                               </div>
                               <Tooltip className="tooltip" align="left">
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-gray-600 hover:bg-sky-600/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:text-sky-600"
+                              className="mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm text-gray-600 opacity-0 transition-all duration-200 hover:bg-sky-600/10 hover:text-sky-600"
                             >
                               🔑
                             </button>
@@ -532,7 +532,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-gray-600 hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
+                              className="hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base text-gray-600 opacity-0 transition-all duration-200"
                             >
                               ×
                             </button>
@@ -544,12 +544,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                         {isExpanded && (
                           <div id={workspaceListId}>
-                            <div className="border-gray-900 border-b px-3 py-2 pl-[22px]">
+                            <div className="border-b border-gray-900 px-3 py-2 pl-[22px]">
                               <button
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="border-gray-700 hover:border-gray-800-darker w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
+                                className="hover:border-gray-800-darker w-full cursor-pointer rounded border border-dashed border-gray-700 bg-transparent px-3 py-1.5 text-left text-[13px] text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -592,16 +592,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             : `Expand workspaces older than ${formatOldWorkspaceThreshold()}`
                                         }
                                         aria-expanded={showOldWorkspaces}
-                                        className="border-gray-900 flex w-full cursor-pointer items-center justify-between border-t border-none bg-transparent px-3 py-2 pl-[22px] text-xs font-medium text-gray-500 transition-all duration-150 hover:bg-white/[0.03] hover:text-gray-400 [&:hover_.arrow]:text-gray-400"
+                                        className="flex w-full cursor-pointer items-center justify-between border-t border-none border-gray-900 bg-transparent px-3 py-2 pl-[22px] text-xs font-medium text-gray-500 transition-all duration-150 hover:bg-white/[0.03] hover:text-gray-400 [&:hover_.arrow]:text-gray-400"
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
-                                          <span className="text-gray-400 font-normal">
+                                          <span className="font-normal text-gray-400">
                                             ({old.length})
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-gray-400 text-[11px] transition-transform duration-200 ease-in-out"
+                                          className="arrow text-[11px] text-gray-400 transition-transform duration-200 ease-in-out"
                                           style={{
                                             transform: showOldWorkspaces
                                               ? "rotate(90deg)"
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              className="border-gray-950 mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
+              className="mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none border-gray-950 bg-transparent p-0 text-sm text-gray-500 transition-all duration-200 hover:bg-gray-900 hover:text-gray-200"
             >
               {collapsed ? "»" : "«"}
             </button>

src/components/RightSidebar/CodeReview/ReviewControls.tsx

@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="border-gray-700 placeholder:text-gray-400 w-36 rounded border bg-gray-950 px-2 py-1 font-mono text-[11px] text-gray-200 transition-[border-color] duration-200 hover:border-sky-600 focus:border-sky-600 focus:outline-none"
+        className="w-36 rounded border border-gray-700 bg-gray-950 px-2 py-1 font-mono text-[11px] text-gray-200 transition-[border-color] duration-200 placeholder:text-gray-400 hover:border-sky-600 focus:border-sky-600 focus:outline-none"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -571,7 +571,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                   placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
                   value={searchState.input}
                   onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
-                  className="placeholder:text-gray-400 flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] text-gray-200 outline-none focus:bg-gray-900"
+                  className="flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] text-gray-200 outline-none placeholder:text-gray-400 focus:bg-gray-900"
                 />
                 <TooltipWrapper inline>
                   <button