fix: prettier-plugin-tailwindcss not working (#37)

* fix: prettier-plugin-tailwindcss not working * refactor: remove text-primary
lewxdev · Aug 27, 2024 · e0c29cb · e0c29cb
1 parent da75cef
commit e0c29cb
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 23 deletions.
diff --git a/app/components/field.tsx b/app/components/field.tsx
@@ -44,8 +44,8 @@ export function Field() {
   }, [size]);
 
   return !plots || sessionState === "dead" ? (
-    <div className="absolute h-[100dvh] w-[100dvw] z-10 bg-white dark:bg-slate-950">
-      <div className="h-full flex items-center justify-center">
+    <div className="absolute z-10 h-[100dvh] w-[100dvw] bg-white dark:bg-slate-950">
+      <div className="flex h-full items-center justify-center">
         {sessionState === "dead" ? (
           <Skull className="h-16 w-16 text-red-600 dark:text-red-300" />
         ) : (
@@ -69,7 +69,7 @@ export function Field() {
     </div>
   ) : (
     <div
-      className="max-w-full select-none overflow-auto flex-1"
+      className="max-w-full flex-1 select-none overflow-auto"
       onContextMenu={(event) => event.preventDefault()}
       ref={parentRef}
     >

diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -9,9 +9,9 @@ export function Header() {
   const [exposedPercent] = useSocketEvent("exposedPercent");
 
   return (
-    <header className="w-[min(var(--field-size),100%)] px-4 py-1 flex justify-between">
+    <header className="flex w-[min(var(--field-size),100%)] justify-between px-4 py-1">
       <div className="flex flex-row gap-6">
-        <h1 className="text-4xl font-extrabold uppercase italic pr-4">
+        <h1 className="pr-4 text-4xl font-extrabold uppercase italic">
           mmmines!
         </h1>
         <div className="flex items-center gap-2">

diff --git a/app/components/plot.tsx b/app/components/plot.tsx
@@ -49,10 +49,10 @@ const classMap = new Map<PlotState, string>([
   [6, tw`text-slate-800 dark:text-slate-200`],
   [7, tw`text-slate-900 dark:text-slate-100`],
   [8, tw`text-slate-950 dark:text-slate-50`],
-  ["mine", tw`bg-red-500 dark:bg-red-400 text-slate-800 dark:text-slate-950`],
+  ["mine", tw`bg-red-500 text-slate-800 dark:bg-red-400 dark:text-slate-950`],
   [
     "flagged",
-    tw`bg-slate-100 dark:bg-slate-600 text-yellow-400 dark:text-yellow-300`,
+    tw`bg-slate-100 text-yellow-400 dark:bg-slate-600 dark:text-yellow-300`,
   ],
   ["unknown", tw`bg-slate-100 dark:bg-slate-600`],
 ]);

diff --git a/app/components/theme-toggle.tsx b/app/components/theme-toggle.tsx
@@ -18,7 +18,7 @@ export function ThemeToggle() {
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
           <Sun className="h-5 w-5 dark:hidden" />
-          <Moon className="h-5 w-5 hidden dark:block" />
+          <Moon className="hidden h-5 w-5 dark:block" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

diff --git a/app/components/tutorial-dialog.tsx b/app/components/tutorial-dialog.tsx
@@ -20,31 +20,31 @@ const steps = [
     title: "Massive Multiplayer Mines",
     description:
       "Work together in real time to clear the grid and avoid the mines!",
-    icon: <UsersIcon className="w-12 h-12 mb-4 text-primary" />,
+    icon: <UsersIcon className="mb-4 h-12 w-12" />,
   },
   {
     title: "Understand the Grid",
     description:
       "Minesweeper is played on a grid of squares. Some squares contain mines, while others are safe.",
-    icon: <GridIcon className="w-12 h-12 mb-4 text-primary" />,
+    icon: <GridIcon className="mb-4 h-12 w-12" />,
   },
   {
     title: "Left-Click to Reveal",
     description:
       "Left-click on a square to reveal what's underneath. If it's a mine, you lose!",
-    icon: <MousePointerClick className="w-12 h-12 mb-4 text-primary" />,
+    icon: <MousePointerClick className="mb-4 h-12 w-12" />,
   },
   {
     title: "Right-Click to Flag",
     description:
       "Right-click to place a flag on a square to keep track of potential mine locations.",
-    icon: <FlagIcon className="w-12 h-12 mb-4 text-primary" />,
+    icon: <FlagIcon className="mb-4 h-12 w-12" />,
   },
   {
     title: "Hardcore",
     description:
       "Click a mine, and you're out until all squares are revealed and a new game starts with an even larger grid.",
-    icon: <BombIcon className="w-12 h-12 mb-4 text-primary" />,
+    icon: <BombIcon className="mb-4 h-12 w-12" />,
   },
 ];
 
@@ -68,18 +68,18 @@ export function TutorialDialog() {
         <DialogHeader>
           <DialogTitle>How to Play</DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col items-center text-center py-4">
+        <div className="flex flex-col items-center py-4 text-center">
           {currentStep.icon}
-          <h3 className="text-lg font-semibold mb-2">{currentStep.title}</h3>
+          <h3 className="mb-2 text-lg font-semibold">{currentStep.title}</h3>
           <p className="text-sm text-slate-600 dark:text-slate-300">
             {currentStep.description}
           </p>
         </div>
         <DialogFooter>
-          <div className="text-sm text-slate-600 dark:text-slate-300 text-center">
+          <div className="text-center text-sm text-slate-600 dark:text-slate-300">
             Step {step} of {totalSteps}
           </div>
-          <div className="space-x-2 flex">
+          <div className="flex space-x-2">
             <Button
               className="flex-1"
               variant="outline"

diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-slate-800 dark:bg-slate-950 sm:rounded-lg",
         className,
       )}
       {...props}

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -31,8 +31,8 @@ export const metadata: Metadata = {
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {
   return (
     <html lang="en" className={GeistSans.variable} suppressHydrationWarning>
-      <body className="min-h-screen bg-white dark:bg-slate-950 font-sans antialiased">
-        <main className="flex flex-col items-center h-[100dvh]">
+      <body className="min-h-screen bg-white font-sans antialiased dark:bg-slate-950">
+        <main className="flex h-[100dvh] flex-col items-center">
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <SocketProvider>
               <Header />

diff --git a/package.json b/package.json
@@ -75,8 +75,8 @@
     ],
     "importOrderTypeScriptVersion": "5.0.0",
     "plugins": [
-      "prettier-plugin-tailwindcss",
-      "@ianvs/prettier-plugin-sort-imports"
+      "@ianvs/prettier-plugin-sort-imports",
+      "prettier-plugin-tailwindcss"
     ],
     "tailwindFunctions": [
       "tw"