tailwindcss.com | The Tailwind CSS documentation website | Frontend Framework library

Thanks to @MaksatRahmanov I found the solution. It seems the problem was I installed the latest Tailwind version (v3) with Angular 12. I switched back to v2 and everything works fine.

The only problem with it is that many things have changed between both versions (check here), so it could break many things working properly with v3.

This is likely a CSS issue, not a TailwindCSS issue.

CSS wants to be fast, so there are several values you cannot animate to or from. When the parent doesn't have definite dimensions, one of these unanimatable values is 100%.

Unless you're willing to either set a definite height (e.g., 100px) or use some JavaScript, there's no way to do this animation as far as I know.

Since it looks like you're trying to make an accordion, I'd recommend checking out this article, which uses the WebAnimationsApi to achieve the same affect you're going for: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

See more: how to animate width and height 100% using css3 animations?

Use flex-grow or grow instead of w-full in your input if you want it to grow to all available space.

You need to put the align text and the red circle into one div and give that div

I tried your code and it works as it's supposed to.

You don't even need to display it as flex and use flex-direction: column;, the
element does that itself (I mean in this case, not always).

Check your CSS code again, there might be something that overrides your current styling, otherwise it should be work as you want.

By using npx nuxi init nuxt3-app, you're creating a Nuxt v3 app. Nuxt 3 is still very much in public beta, so it's likely you'll come across issues which the team would no doubt love to take a look at for you- if you raise it as an issue on their GitHub.

This is mostly just bad news.

Woah ok, this was much easier than what I thought. I had to add the classes this way: