docs: Accordion. Update keyframes config to be compatible with latest tailwind config …

[rizhenkov]

…format

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Old format described in docs (from - to) makes errors in TS.
Ref: https://tailwindcss.com/docs/animation#customizing-your-theme

📸 Screenshots (if appropriate)

before:

after:

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[xak2000]

There is nothing wrong with from and to.

keyframes property is defined like this:

keyframes?: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair<string, string>>>>

The only problem with the current docs is that the last part is KeyValuePair<string, string>, so height cannot be a number.

{ height: 0 } should be replaced with { height: '0' }. That's all.

I don't see a reason of changing from and to to 0% and 100%.

[xak2000]

Also, I think, maybe it's worth to fix this problem not just for Accordion docs, but for every component's docs (that has keyframes in the code)?

Most importantly for

shadcn-vue/packages/cli/src/utils/templates.ts

Line 127 in 75a5bce

from: { height: 0 },

that is used as a template for tailwind.config.js generation when npx shadcn-vue@latest init is executed.

[zernonia]

Thanks for the PR, however we are following the same code from ui.shadcn 😁

[xak2000]

@zernonia So, what is the solution? Will you create a new PR or issue to track this problem? I mean, even if this PR is not correct, the problem is still real. 😄

The page you linked contains examples (see "Manual installation"):

...
from: { height: "0" }
...

So, the hieght is string, not number.

Therefore, following the same code from ui.shadcn we should also use a string here. :)

And not only for Accordion, but in any other components/templates.