feat(ui): Add prettier-plugin-tailwindcss to prettier config (#3561)

Author: alexcarpenter

.changeset/violet-paws-shout.md

@@ -0,0 +1,2 @@
+---
+---

.prettierrc

@@ -7,5 +7,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

integration/templates/elements-next/src/app/globals.css

@@ -23,8 +23,20 @@ body {
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell,
-    Ubuntu, roboto, noto, arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
 }
 
 main {

integration/templates/elements-next/src/app/otp/page.tsx

@@ -30,7 +30,7 @@ export default function OTP() {
       <SignIn.Root path='/otp'>
         <SignIn.Step
           name='start'
-          className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white text-center shadow-md'
+          className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 text-center shadow-md sm:w-96 sm:px-8'
         >
           <header className='text-center'>
             <h1 className='text-xl font-medium tracking-tight text-neutral-950'>OTP Playground</h1>
@@ -52,7 +52,7 @@ export default function OTP() {
           >
             <Clerk.Label className='text-sm font-medium text-zinc-950'>Segmented OTP Input</Clerk.Label>
             <Clerk.Input
-              className='flex justify-center has-[:disabled]:opacity-50 segmented-otp-wrapper'
+              className='segmented-otp-wrapper flex justify-center has-[:disabled]:opacity-50'
               type='otp'
               data-testid='segmented-otp'
               render={({ value, status, index }) => {
@@ -61,7 +61,7 @@ export default function OTP() {
                     data-status={status}
                     data-testid={`segmented-otp-${index}`}
                     className={clsx(
-                      'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+                      'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
                       {
                         'z-10 ring-2 ring-black ring-offset-black': status === 'cursor' || status === 'selected',
                       },
@@ -84,7 +84,7 @@ export default function OTP() {
           >
             <Clerk.Label className='text-sm font-medium text-zinc-950'>Segmented OTP Input (with props)</Clerk.Label>
             <Clerk.Input
-              className='flex justify-center has-[:disabled]:opacity-50 segmented-otp-with-props-wrapper'
+              className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
               type='otp'
               data-testid='segmented-otp-with-props'
               passwordManagerOffset={4}
@@ -94,7 +94,7 @@ export default function OTP() {
                   <div
                     data-status={status}
                     className={clsx(
-                      'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+                      'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
                       {
                         'z-10 ring-2 ring-black ring-offset-black': status === 'cursor' || status === 'selected',
                       },

integration/templates/elements-next/src/app/page.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 function Card({ children, title }: { children: React.ReactNode; title: string }) {
   return (
-    <div className='bg-white rounded-lg py-4 px-8'>
+    <div className='rounded-lg bg-white px-8 py-4'>
       <h2 className='text-lg font-medium tracking-tight'>{title}</h2>
       {children}
     </div>
@@ -15,7 +15,7 @@ export default function Home() {
   return (
     <main>
       <h1 className='text-2xl font-medium tracking-tight text-zinc-950'>Clerk Elements: Next.js E2E</h1>
-      <p className='text-md text-zinc-500 mt-2 mb-6'>
+      <p className='text-md mb-6 mt-2 text-zinc-500'>
         Kitchen sink template to test out Clerk Elements in Next.js App Router.
       </p>
       <div className='grid grid-cols-3 gap-4'>

integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -11,7 +11,7 @@ function Button({ children, ...props }: { children: React.ReactNode }) {
   return (
     <button
       type='button'
-      className='relative w-full rounded-md bg-neutral-600 bg-gradient-to-b from-neutral-500 to-neutral-600 py-1.5 text-sm font-medium text-white shadow-[0_1px_1px_0_theme(colors.white/10%)_inset,0_1px_2.5px_0_theme(colors.black/36%)] outline-none ring-1 ring-inset ring-neutral-600 before:absolute before:inset-0 before:rounded-md before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:bg-neutral-600 active:text-white/60 active:before:opacity-0 truncate'
+      className='relative w-full truncate rounded-md bg-neutral-600 bg-gradient-to-b from-neutral-500 to-neutral-600 py-1.5 text-sm font-medium text-white shadow-[0_1px_1px_0_theme(colors.white/10%)_inset,0_1px_2.5px_0_theme(colors.black/36%)] outline-none ring-1 ring-inset ring-neutral-600 before:absolute before:inset-0 before:rounded-md before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:bg-neutral-600 active:text-white/60 active:before:opacity-0'
       {...props}
     >
       {children}
@@ -29,7 +29,7 @@ export default function SignInPage() {
           <SignIn.Step
             name='start'
             data-test-id='sign-in-step-start'
-            className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white'
+            className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 sm:w-96 sm:px-8'
           >
             <header className='text-center'>
               <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Sign in to Clover</h1>
@@ -59,7 +59,7 @@ export default function SignInPage() {
             </Clerk.Field>
             <Clerk.Field
               name='password'
-              className='opacity-0 h-0 pointer-events-none absolute'
+              className='pointer-events-none absolute h-0 opacity-0'
             >
               <Clerk.Input />
             </Clerk.Field>
@@ -87,7 +87,7 @@ export default function SignInPage() {
           </SignIn.Step>
           <SignIn.Step
             name='choose-strategy'
-            className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white'
+            className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 sm:w-96 sm:px-8'
           >
             <header className='text-center'>
               <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Use another method</h1>
@@ -133,15 +133,15 @@ export default function SignInPage() {
             <p className='text-center text-sm'>
               <SignIn.Action
                 navigate='previous'
-                className='hover:cursor-pointer rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100'
+                className='rounded px-1 py-0.5 text-neutral-700 outline-none hover:cursor-pointer hover:bg-neutral-100 focus-visible:bg-neutral-100'
               >
                 Go back
               </SignIn.Action>
             </p>
           </SignIn.Step>
           <SignIn.Step
             name='forgot-password'
-            className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white'
+            className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 sm:w-96 sm:px-8'
           >
             <header className='text-center'>
               <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Forgot password?</h1>
@@ -171,12 +171,12 @@ export default function SignInPage() {
           </SignIn.Step>
           <SignIn.Step
             name='verifications'
-            className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white'
+            className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 sm:w-96 sm:px-8'
           >
             <SignIn.Strategy name='password'>
               <header className='text-center'>
                 <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Enter your password</h1>
-                <p className='text-sm mt-2 text-neutral-500'>
+                <p className='mt-2 text-sm text-neutral-500'>
                   Welcome back <SignIn.Salutation />
                 </p>
               </header>
@@ -301,15 +301,15 @@ export default function SignInPage() {
             <div className='text-center text-sm'>
               <SignIn.Action
                 navigate='choose-strategy'
-                className='hover:cursor-pointer rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100'
+                className='rounded px-1 py-0.5 text-neutral-700 outline-none hover:cursor-pointer hover:bg-neutral-100 focus-visible:bg-neutral-100'
               >
                 Use another method
               </SignIn.Action>
             </div>
           </SignIn.Step>
           <SignIn.Step
             name='reset-password'
-            className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white'
+            className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 sm:w-96 sm:px-8'
           >
             <header className='text-center'>
               <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Reset your password</h1>

integration/templates/elements-next/src/app/validate-password/page.tsx

@@ -12,11 +12,11 @@ export default function ValitePassword() {
       <SignIn.Root path='/validate-password'>
         <SignIn.Step
           name='start'
-          className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white text-center shadow-md'
+          className='w-full space-y-6 rounded-2xl bg-white px-4 py-10 text-center shadow-md sm:w-96 sm:px-8'
         >
           <header className='text-center'>
             <h1 className='text-xl font-medium tracking-tight text-neutral-950'>Password Validation Playground</h1>
-            <p className='text-sm mt-2 text-neutral-500'>
+            <p className='mt-2 text-sm text-neutral-500'>
               Just to test out the{' '}
               <a
                 className='text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline'
@@ -28,7 +28,7 @@ export default function ValitePassword() {
             </p>
           </header>
           <Clerk.Field name='password'>
-            <div className='flex justify-between mb-2'>
+            <div className='mb-2 flex justify-between'>
               <Clerk.Label className='text-sm font-medium text-zinc-950'>Password</Clerk.Label>
               <button
                 onClick={() => setHidden(s => !s)}
@@ -46,36 +46,36 @@ export default function ValitePassword() {
               {({ state, codes, message }) => (
                 <div className='mt-6'>
                   <p className='mb-2'>Field State Props</p>
-                  <table className='table-auto w-full border-collapse text-sm'>
+                  <table className='w-full table-auto border-collapse text-sm'>
                     <thead className='bg-slate-200'>
                       <tr>
-                        <th className='border-b font-medium p-2 pl-4 text-left'>Prop</th>
-                        <th className='border-b font-medium p-2 pl-4 text-left'>Value</th>
+                        <th className='border-b p-2 pl-4 text-left font-medium'>Prop</th>
+                        <th className='border-b p-2 pl-4 text-left font-medium'>Value</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
-                        <td className='border-b font-medium p-2 pl-4 text-left'>State</td>
+                        <td className='border-b p-2 pl-4 text-left font-medium'>State</td>
                         <td
-                          className='border-b font-medium p-2 pl-4 text-left'
+                          className='border-b p-2 pl-4 text-left font-medium'
                           data-testid='state'
                         >
                           {state}
                         </td>
                       </tr>
                       <tr>
-                        <td className='border-b font-medium p-2 pl-4 text-left'>Codes</td>
+                        <td className='border-b p-2 pl-4 text-left font-medium'>Codes</td>
                         <td
-                          className='border-b font-medium p-2 pl-4 text-left'
+                          className='border-b p-2 pl-4 text-left font-medium'
                           data-testid='codes'
                         >
                           {codes?.join(', ')}
                         </td>
                       </tr>
                       <tr>
-                        <td className='border-b font-medium p-2 pl-4 text-left'>Message</td>
+                        <td className='border-b p-2 pl-4 text-left font-medium'>Message</td>
                         <td
-                          className='border-b font-medium p-2 pl-4 text-left'
+                          className='border-b p-2 pl-4 text-left font-medium'
                           data-testid='message'
                         >
                           {message}

integration/templates/next-app-router-quickstart/src/app/page.module.css

@@ -51,7 +51,9 @@
   border-radius: var(--border-radius);
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {

integration/templates/next-app-router/src/app/page.module.css

@@ -51,7 +51,9 @@
   border-radius: var(--border-radius);
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {

integration/templates/react-cra/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

integration/templates/react-vite/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />