refactor: tailwindcss, remove all unnecessary arbitrary values, update TailwindCSS to v3.4

[hrynevychroman]

1. Remove some arbitrary values: For example we had translate-x-[-50%] previously, but there is -translate-x-1/2 predefined class 🙂
2. In TailwindCSS v3.4 we received extended min/max-width/height predefined rules: updated all values to be more native [min-w-[8rem] -> min-w-32]
3. In TailwindCSS v3.3 we received CSS variabled without var(): update all custom variables [h-[var(--radix-select-trigger-height)] -> h-[--radix-select-trigger-height]]
4. Grid Updates. There is some custom grid-templates defined, for example grid-cols-[25px_1fr], but use fr values without wrap it inside minmax(0,*fr) not safe, so updated all values to be wrapped up. [grid-cols-[25px_1fr] -> grid-cols-[25px_minmax(0,1fr)]]. As a reference used default grid-templates rules, where minmax used. Link to docs

If you have some suggestions or wishes please add comments, I will update my PR ❤️

[sadeghbarati]

Nice changes @romanhrynevych 💯

We should pay more attention to the TailwindCSS blog and changelogs

All Good! can you resolve this conflicts?

[hrynevychroman]

@sadeghbarati thanks 🙌

Yeah, I will resolve conflict and notify you for review ❤️

[hrynevychroman]

@sadeghbarati all conficts was in /registry .json files, so just rebuild it 🙂
But there is apiToken error in Cloudflare, maybe you can help ❤️

[sadeghbarati]

But there is apiToken error in Cloudflare

Don't worry about it Zernonia will fixed it later

[valh1996]

Well done @romanhrynevych for this update !
As a small note, what do you think of using the has-[] variant that appeared in version 3.4 aswell?

I know that has() is widely used in the calendar component, for example. I don't know if that would complicate things more than it would simplify them, what do you think?

[hrynevychroman]

Well done @romanhrynevych for this update ! As a small note, what do you think of using the has-[] variant that appeared in version 3.4 aswell?

I know that has() is widely used in the calendar component, for example. I don't know if that would complicate things more than it would simplify them, what do you think?

I think there is no need for making that changes, in Calendar.vue used <style> tag with @apply styles, if styles was defined like classNames maybe, but now I think we can just leave this)

[hrynevychroman]

Also, I'm not a very big fan of @apply styles, because than tailwind.css file becomes bigger. For example if you have w-full class in 100 places of code, it will only add once, but if you assign it by @apply, tailwindcss must write new class selector and add this styles, so all magic of tailwindcss is just disappeared 🥲

[github-actions]

Deploying with Cloudflare Pages

Name	Result
Last commit:	dfecd06a
Status:	⚡️ Deployment in progress...
Preview URL:	https://6563461e.shadcn-vue.pages.dev
Branch Preview URL:	https://6563461e.shadcn-vue.pages.dev

[sadeghbarati]

Dam, I'll resolve the conflict