refactor: tailwind 3.4 new utilities

[valentinpolitov]

• [x] replaced h-* w-* with size-*
• [x] replaced some min/max-width/height custom scales with extended ones
• [x] replaced custom sizes with builtin, like translate-x-[-50%] ⇒ -translate-x-1/2, top-[50%] ⇒ top-1/2

[vercel[bot]]

@valentinpolitov is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 26, 2023 1:39pm

[shadcn]

@valentinpolitov This is awesome. Can't thank you enough. Great work.

This is a big PR however. Let me review it when I come back from the break.

[valentinpolitov]

Since v3.14.0 eslint-plugin-tailwindcss can handle almost all job i did, so decided to add "tailwindcss/enforces-shorthand" rule in eslint config with level "warn". @shadcn please let me know if this doesn't fit well and commit e2c6acb88b92492dad65978b8eaa8df42a14d85f should be reverted

[francoismassart]

eslint-plugin-tailwindcss 3.14.2 is available 😉

[thedevdavid]

@shadcn I saw you asking on Twitter about new components a few days ago. This might be a great time to include this PR also?

[shadcn]

@thedevdavid I'm testing this. I found an issue when merging size classes.

Given the following component:

export function Component({ className }) {
  return <div className={cn('size-10', className)} />
}

I'm expecting the following to have a w-10 and h-24 but it doesn't seem to work.

<Component className="h-24" />

Looking into it.

[valentinpolitov]

I'm expecting the following to have a w-10 and h-24 but it doesn't seem to work.

@shadcn I think it's not the way it works, as we see from tailwind-merge tests. In output size-* classes are defined upper in css, and h-* and w-* will simply override that.

export function Component({ className }) {
  return <div className={cn('size-10', className)} />
}

<Component className="h-24" />

should render

<div class="size-10 h-24"></div>

Same behaviour as we have now with p-* and px-* py-*

export function Component({ className }) {
 return <div className={cn('p-10', className)} />
}

<Component className="px-4" />

renders

<div class="p-10 px-4"></div>