update to tailwindcss v4 (#48)

zolplay-cn · Mar 10, 2025 · 2efa1ae · 2efa1ae
1 parent ece4e0c
commit 2efa1ae
Show file tree

Hide file tree

Showing 8 changed files with 550 additions and 514 deletions.
diff --git a/app/[locale]/about/page.en.mdx b/app/[locale]/about/page.en.mdx
@@ -3,13 +3,13 @@ import { Zolplayers } from '~/components/zolplayers'
 
 # <Balancer>Where Innovation Meets Imagination. <Gradient>Crafting Fun, Engineering Play.</Gradient></Balancer>
 
-<Balancer>
+<Balancer className="prose-p:mt-0">
 Welcome to Zolplay, founded in 2021, a software development company that strives to make a difference in the world. Our mission is to create innovative solutions 🦄 that enhance people's lives and transform the way we live and work.<br></br><br></br>At Zolplay, we believe that technology has the power to bring positive change to the world. We are a team of passionate individuals who are committed to making a difference through our work. We work tirelessly to create products and services that **solve complex problems, simplify processes, and make people's lives easier**.<br></br><br></br>🐣 <Gradient>That is why Zolplay was born.</Gradient><br></br><br></br>Our core values are <Green>integrity, creativity, and collaboration</Green>. We believe in doing the right thing, even when no one is watching. We encourage creativity and innovation in everything we do, and we collaborate closely with our clients to ensure that we deliver the best possible results.
 </Balancer>
 
 ## About our founder
 
-<Balancer>
+<Balancer className="prose-p:mt-0">
 **Cali Castle**, the founder of Zolplay. He's a talented developer, designer, and maker who's passionate about building innovative products that improve people's lives. With notable clients like **Starbucks**, **Microsoft**, and **Niantic**, Cali is a detail-oriented problem-solver, setting him apart in the industry. Beyond his work, Cali is also a creator by heart and a previous 🪩 DJ and 🎤 rapper. Cali leads Zolplay with a commitment to creating a workplace <Red>where creativity and innovation thrive</Red>, encouraging the team to build products with a positive impact on the world.
 </Balancer>
 

diff --git a/app/[locale]/about/page.zh-CN.mdx b/app/[locale]/about/page.zh-CN.mdx
@@ -3,13 +3,13 @@ import { Zolplayers } from '~/components/zolplayers'
 
 # <Balancer>创新与想象的碰撞，我们的使命是<Gradient>匠心筑楽，巧技佐玩</Gradient></Balancer>
 
-<Balancer>
+<Balancer className="prose-p:mt-0">
 欢迎来到佐玩，一家成立于2021年的软件开发公司，致力于用软件改善身边世界。我们的使命是打造创新的解决方案，🦄 以提升人们的生活质量并改变我们的生活和工作方式。<br></br><br></br>在佐玩，我们相信技术具有为世界带来积极改变的力量。我们是一群热情洋溢、致力于通过工作做出贡献的创造者。我们不断努力，创建能够**解决复杂问题、简化流程并让人们的生活更轻松**的产品和服务。<br></br><br></br>🐣 <Gradient>这就是佐玩诞生的原因。</Gradient><br></br><br></br>我们的核心价值观是<Green>透明、创造和协作</Green>。我们坚信做正确的事情，鼓励在所有方面都迸发创新和创意，并与客户密切合作，以确保我们提供最佳的结果。
 </Balancer>
 
 ## 关于创始人
 
-<Balancer>
+<Balancer className="prose-p:mt-0">
 佐玩的创始人 **Cali（郭晓楠）** 是一位才华横溢的开发者、设计师、创造者，热衷于开发改善人们生活的创新产品。曾与**星巴克**、**微软**和 **Niantic** 等知名客户有过项目合作经验，Cali 是一个非常注重细节的问题解决者，在行业中独树一帜。除了工作之外，Cali 还是一个注重细节的极客，曾经当过 🪩 DJ 和 🎤 说唱歌手。Cali领导着佐玩致力于创造一个<Red>充满创造力和创新的工作环境</Red>，鼓励团队创造对世界有影响的产品。
 
 </Balancer>

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -15,7 +15,6 @@ import { Toasts } from '~/components/toasts'
 import { getOpenGraphImage } from '~/lib/helper'
 import { routing } from '~/modules/i18n/routing'
 import { PostHogPageview, PHProvider as PostHogProvider } from '../../lib/posthog/posthog-provider'
-import 'tailwindcss/tailwind.css'
 import '~/app/globals.css'
 
 const fontSansEn = DM_Sans({
@@ -110,18 +109,17 @@ export default async function RootLayout({ children, params }: { children: React
       </Suspense>
 
       <PostHogProvider>
-        <body className='bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-300'>
+        <body className='bg-neutral-50 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-300'>
           <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
             <NextIntlClientProvider messages={messages}>
               <Background />
-              <main className='relative mx-2 flex min-h-screen max-w-4xl flex-col pt-12 md:mx-4 md:mt-0 md:flex-row md:pt-20 lg:mx-auto lg:pt-28'>
+              <main className='flex relative flex-col pt-12 mx-2 max-w-4xl min-h-screen md:mx-4 md:mt-0 md:flex-row md:pt-20 lg:mx-auto lg:pt-28'>
                 <Rulers />
                 <Sidebar />
-                <section className='frosted-noise relative z-20 mt-3 flex w-full flex-auto flex-col border border-transparent bg-[#fefefe] p-5 pb-36 shadow-xl dark:border-stone-800 dark:bg-[#1a1a1a] md:mt-0 md:p-7 md:pb-36 lg:p-9 lg:pb-44'>
+                <section className='flex relative z-20 flex-col flex-auto p-5 pb-36 mt-3 w-full bg-white border border-transparent shadow-xl frosted-noise dark:border-neutral-800 dark:bg-neutral-950 md:mt-0 md:p-7 md:pb-36 lg:p-9 lg:pb-44'>
                   <article className='prose dark:prose-invert prose-headings:tracking-tighter prose-h1:text-2xl prose-p:leading-loose prose-p:tracking-tight prose-li:tracking-tight prose-img:rounded-xl lg:prose-h1:text-4xl'>
                     {children}
                   </article>
-
                   <Footer />
                 </section>
               </main>

diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,6 @@
+@import 'tailwindcss';
+@plugin "@tailwindcss/typography";
+
 * {
   @apply antialiased;
   text-rendering: optimizeLegibility;
@@ -12,13 +15,13 @@ body {
 }
 
 ::selection {
-  background: theme('colors.stone.700');
-  color: theme('colors.stone.50');
+  background: var(--color-stone-700);
+  color: var(--color-stone-50);
 }
 
 .dark ::selection {
-  background: theme('colors.stone.300');
-  color: theme('colors.stone.900');
+  background: var(--color-stone-300);
+  color: var(--color-stone-900);
 }
 
 .mask-t {
@@ -43,20 +46,12 @@ body {
 
 .mask-l {
   background: linear-gradient(to left, transparent, var(--mask-color));
-  -webkit-mask-image: linear-gradient(
-    to right,
-    var(--mask-color) 26%,
-    transparent
-  );
+  -webkit-mask-image: linear-gradient(to right, var(--mask-color) 26%, transparent);
 }
 
 .mask-r {
   background: linear-gradient(to right, transparent, var(--mask-color));
-  -webkit-mask-image: linear-gradient(
-    to left,
-    var(--mask-color) 26%,
-    transparent
-  );
+  -webkit-mask-image: linear-gradient(to left, var(--mask-color) 26%, transparent);
 }
 
 .frosted-noise::before {
@@ -77,16 +72,16 @@ body {
 /* Toast */
 [data-sonner-toast],
 [data-sonner-toast] [data-close-button] {
-  @apply font-sans;
-  background-color: theme('colors.stone.100') !important;
-  color: theme('colors.stone.800') !important;
-  border-color: theme('colors.stone.200') !important;
+  font-family: var(--font-sans);
+  background-color: var(--color-stone-100) !important;
+  color: var(--color-stone-800) !important;
+  border-color: var(--color-stone-200) !important;
 }
 
 .dark [data-sonner-toast],
 .dark [data-sonner-toast] [data-close-button] {
-  background-color: theme('colors.stone.800') !important;
-  color: theme('colors.stone.300') !important;
-  border-color: theme('colors.stone.700') !important;
+  font-family: var(--font-sans);
+  background-color: var(--color-stone-800) !important;
+  color: var(--color-stone-300) !important;
+  border-color: var(--color-stone-700) !important;
 }
-
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
@@ -41,7 +41,7 @@ function Section({ children, className, title }: FormSectionProps) {
           <h3 className='text-base font-semibold leading-6'>{title}</h3>
         </div>
       )}
-      <div className='mt-6 grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-6'>{children}</div>
+      <div className='grid grid-cols-1 mt-6 gap-x-4 gap-y-6 sm:grid-cols-6'>{children}</div>
     </section>
   )
 }
@@ -92,7 +92,7 @@ function Input({ ref, className, id, name, type, ...rest }: ComponentProps<'inpu
     <input
       className={clsxm(
         [
-          'block w-full rounded-md border-0 bg-transparent py-1.5 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-400 dark:ring-stone-700 dark:placeholder:text-stone-600 dark:focus:ring-stone-500 text-sm sm:leading-6 ',
+          'block w-full rounded-md border-0 bg-transparent py-1.5 px-2 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-400 dark:ring-stone-700 dark:placeholder:text-stone-600 dark:focus:ring-stone-500 text-sm sm:leading-6 ',
         ],
         className,
       )}
@@ -113,7 +113,7 @@ function TextArea({ ref, className, id, name, ...rest }: ComponentProps<'textare
   return (
     <textarea
       ref={ref}
-      className={clsxm(input, className)}
+      className={clsxm(input, className, 'p-2')}
       id={id ?? defaultName ?? name}
       name={defaultName ?? name}
       autoCorrect='off'

diff --git a/package.json b/package.json
@@ -55,22 +55,22 @@
     "@next/eslint-plugin-next": "^15.2.1",
     "@next/mdx": "^15.2.1",
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.9",
     "@types/formidable": "^3.4.5",
     "@types/js-yaml": "^4.0.5",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.13.9",
     "@types/react": "^19.0.10",
     "@types/request": "^2.48.12",
-    "autoprefixer": "^10.4.14",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "postcss": "^8.4.23",
     "prettier": "^3.5.3",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^4.0.12",
     "typescript": "^5.8.2"
   },
   "pnpm": {