chore: Add prettier tailwindcss plugin

mohebifar · Mar 10, 2024 · ebb858d · ebb858d
1 parent 752bbf6
commit ebb858d
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 28 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1 +1,3 @@
-{}
+{
+    "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/docs/components/BeforeAfterCodeLayout.tsx b/apps/docs/components/BeforeAfterCodeLayout.tsx
@@ -11,10 +11,10 @@ export function BeforeAfterCodeLayout({
   after,
 }: BeforeAfterCodeLayoutProps) {
   return (
-    <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
+    <div className="xl:grid-cols-beforeAfterCodingBlocks grid-row-2 mt-6 grid w-full grid-cols-1 gap-4 xl:grid-rows-1">
       <div>
-        <div className="bg-[#1d1c20] border border-white/[0.08] rounded-lg overflow-hidden">
-          <div className="text-center font-bold flex-1 py-4 pr-4">
+        <div className="overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20]">
+          <div className="flex-1 py-4 pr-4 text-center font-bold">
             <div className="flex items-center justify-center gap-2">
               <PiNumberCircleOneFill size={18} /> Input Code
             </div>
@@ -24,18 +24,18 @@ export function BeforeAfterCodeLayout({
         </div>
       </div>
 
-      <div className="items-center hidden xl:flex">
+      <div className="hidden items-center xl:flex">
         <div className="relative">
           <GoArrowRight
-            className="dark:text-gray-100 text-gray-500 absolute left-1/2 -translate-x-1/3"
+            className="absolute left-1/2 -translate-x-1/3 text-gray-500 dark:text-gray-100"
             size={34}
           />
         </div>
       </div>
 
       <div>
-        <div className="bg-[#1d1c20] border border-white/[0.08] rounded-lg overflow-hidden">
-          <div className="text-center font-bold flex-1 py-4 pr-4">
+        <div className="overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20]">
+          <div className="flex-1 py-4 pr-4 text-center font-bold">
             <div className="flex items-center justify-center gap-2">
               <PiNumberCircleTwoFill size={18} /> React Unforget Result
             </div>

diff --git a/apps/docs/components/DependencyGraphViewer.tsx b/apps/docs/components/DependencyGraphViewer.tsx
@@ -65,7 +65,7 @@ const DependencyGraphViewer = ({
         Below is a visual representation of the dependency graph that React
         Unforget's compiler sees to ultimately optimize your code.
       </p>
-      <div ref={container} className="w-full h-[600px]" />
+      <div ref={container} className="h-[600px] w-full" />
     </div>
   );
 };

diff --git a/apps/docs/components/DynamicDependencyGraphViewer.tsx b/apps/docs/components/DynamicDependencyGraphViewer.tsx
@@ -4,7 +4,7 @@ const DynamicDependencyGraphViewer = dynamic(
   () => import("./DependencyGraphViewer"),
   {
     loading: () => (
-      <div className="flex items-center justify-center h-[300px]">
+      <div className="flex h-[300px] items-center justify-center">
         <span className="loading loading-spinner loading-lg" />
       </div>
     ),

diff --git a/apps/docs/components/DynamicLiveCodeSandpack.tsx b/apps/docs/components/DynamicLiveCodeSandpack.tsx
@@ -6,12 +6,12 @@ const DynamicLiveCodeSandpack = dynamic(() => import("./LiveCodeSandpack"), {
     return (
       <BeforeAfterCodeLayout
         before={
-          <div className="h-96 flex items-center justify-center">
+          <div className="flex h-96 items-center justify-center">
             <span className="loading loading-spinner loading-md" />
           </div>
         }
         after={
-          <div className="h-96 flex items-center justify-center">
+          <div className="flex h-96 items-center justify-center">
             <span className="loading loading-spinner loading-md" />
           </div>
         }

diff --git a/apps/docs/components/Hero.tsx b/apps/docs/components/Hero.tsx
@@ -1,10 +1,10 @@
 import { OldAndNewCodeReveal } from "./OldAndNewCodeReveal";
 
 export const Hero = () => (
-  <div className="py-10 w-full bg-[rgba(17,17,17,var(--tw-bg-opacity))]  dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center">
-    <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-[rgba(17,17,17,var(--tw-bg-opacity))] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+  <div className="dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex w-full items-center justify-center bg-[rgba(17,17,17,var(--tw-bg-opacity))] py-10">
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-[rgba(17,17,17,var(--tw-bg-opacity))] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
     <div>
-      <h1 className="text-4xl sm:text-7xl font-bold relative z-10 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8">
+      <h1 className="relative z-10 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-8 text-4xl font-bold text-transparent sm:text-7xl">
         React Unforget
       </h1>
       <p>

diff --git a/apps/docs/components/LiveCodeSandpack.tsx b/apps/docs/components/LiveCodeSandpack.tsx
@@ -137,7 +137,7 @@ function LiveCodeSandpack({ children, previewClassName }: LiveCodeProps) {
       />
       <details
         open={viewDependencyGraph}
-        className="collapse mt-10 bg-[#1d1c20] border border-white/[0.08] rounded-lg overflow-hidden"
+        className="collapse mt-10 overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20]"
         onToggle={handleToggleDependencyGraph}
       >
         <summary className="collapse-title font-medium">

diff --git a/apps/docs/components/Logo.tsx b/apps/docs/components/Logo.tsx
@@ -3,8 +3,8 @@ export type LogoProps = {
 };
 export const Logo = ({ className = "text-xl" }: LogoProps) => (
   <span className={className}>
-    <span className="text-indigo-400 font-bold">React</span>{" "}
-    <span className="font-extrabold leading-normal text-transparent bg-clip-text bg-gradient bg-animate pb-2">
+    <span className="font-bold text-indigo-400">React</span>{" "}
+    <span className="bg-gradient bg-animate bg-clip-text pb-2 font-extrabold leading-normal text-transparent">
       Unforget
     </span>
   </span>

diff --git a/apps/docs/components/OldAndNewCodeReveal.tsx b/apps/docs/components/OldAndNewCodeReveal.tsx
@@ -64,7 +64,7 @@ const newCode = `<span class="text-blue-400">const</span> NiceComponent = () =>
 
 export const OldAndNewCodeReveal = () => {
   return (
-    <div className="flex items-center justify-center my-10 rounded-2xl w-full">
+    <div className="my-10 flex w-full items-center justify-center rounded-2xl">
       <TextRevealCard text={encode(oldCode)} revealText={newCode}>
         <TextRevealCardTitle>
           You don't need all that clutter!

diff --git a/apps/docs/components/ui/text-reveal-card.tsx b/apps/docs/components/ui/text-reveal-card.tsx
@@ -57,13 +57,13 @@ export const TextRevealCard = ({
       onMouseMove={mouseMoveHandler}
       ref={cardRef}
       className={cn(
-        "bg-[#1d1c20] border border-white/[0.08] w-[24rem] sm:w-[30rem] rounded-lg p-8 pb-2 relative overflow-hidden",
+        "relative w-[20rem] overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20] p-8 pb-2 sm:w-[30rem]",
         className,
       )}
     >
       {children}
 
-      <div className="h-[400px] relative flex items-center overflow-hidden">
+      <div className="relative flex sm:h-[26rem] h-[22rem] items-center overflow-hidden">
         <motion.div
           style={{
             width: "100%",
@@ -79,13 +79,13 @@ export const TextRevealCard = ({
                 }
           }
           transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
-          className="absolute bg-[#1d1c20] z-10  will-change-transform"
+          className="absolute z-10 bg-[#1d1c20]  will-change-transform"
         >
           <pre
             style={{
               textShadow: "4px 4px 15px rgba(0,0,0,0.5)",
             }}
-            className="text-[0.64rem] sm:text-[0.8rem] py-10 font-bold text-white bg-clip-text text-transparent bg-gradient-to-b from-white to-neutral-300"
+            className="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-10 text-[0.64rem] font-bold text-transparent text-white sm:text-[0.8rem]"
             dangerouslySetInnerHTML={{ __html: revealText }}
           />
         </motion.div>
@@ -96,12 +96,12 @@ export const TextRevealCard = ({
             opacity: widthPercentage > 0 ? 1 : 0,
           }}
           transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
-          className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-20 will-change-transform"
+          className="absolute z-20 h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent will-change-transform"
         ></motion.div>
 
-        <div className="overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,white,transparent)] text-left">
+        <div className="overflow-hidden text-left [mask-image:linear-gradient(to_bottom,transparent,white,transparent)]">
           <pre
-            className="text-[0.64rem] sm:text-[0.8rem] py-10 font-bold bg-clip-text text-transparent bg-[#aaa]"
+            className="bg-[#aaa] bg-clip-text py-10 text-[0.64rem] font-bold text-transparent sm:text-[0.8rem]"
             dangerouslySetInnerHTML={{ __html: text }}
           />
           <MemoizedStars />
@@ -119,7 +119,7 @@ export const TextRevealCardTitle = ({
   className?: string;
 }) => {
   return (
-    <h2 className={twMerge("text-white text-lg mb-2", className)}>
+    <h2 className={twMerge("mb-2 text-lg text-white", className)}>
       {children}
     </h2>
   );
@@ -133,7 +133,7 @@ export const TextRevealCardDescription = ({
   className?: string;
 }) => {
   return (
-    <p className={twMerge("text-[#a9a9a9] text-sm", className)}>{children}</p>
+    <p className={twMerge("text-sm text-[#a9a9a9]", className)}>{children}</p>
   );
 };
 

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@react-unforget/eslint-config": "*",
     "@react-unforget/typescript-config": "*",
     "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "turbo": "latest"
   },
   "engines": {

diff --git a/yarn.lock b/yarn.lock
@@ -8382,6 +8382,11 @@ prettier-plugin-packagejson@^2.4.5:
     sort-package-json "2.8.0"
     synckit "0.9.0"
 
+prettier-plugin-tailwindcss@^0.5.12:
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.12.tgz#655999849344548ecf4d9b47a051ed856f041c72"
+  integrity sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==
+
 prettier@^2.7.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"