You state you have to make things for uni projects. Without knowing the potential restrictions around using AI for your University, I would say go on youtube and take a TailwindCSS fundamentals course and have the docs handy. Just focus on the concepts and work thru the examples. TailwindCSS is more of a set of shorthand syntax for actual CSS. If you have a plugin for your editor, it should show you the actual CSS for the Tailwind syntax.

Then pick a component library, like DaisyUI (or another component lib), that uses tailwind under the hood. Use tailwind for your layout, grid, etc. and DaisyUI for things like cards, accordions, forms, etc.

Once you understand the concepts and fundamentals then for personal projects use AI to help you generate the code.

You have the fast approach and the really fast approach.

1) Use libraries like ShadCn that give you all of the functionality that you need for the components. Use Tailwind or other frameworks, to change the styling of these components to fit your application theme. Using the components and theme, let Claude 3.7 design the apps for you, it is good enough to get you to pretty decent and custom pages that do (mostly) work. If there is a specific page that you don't like, then you can redesign it.

2) Do the designs in Figma, and then use Builder.io to convert the designs directly into code, use Cursor to fix anything that builder has broken.

Of course, the 2 methods above can be mix and matched, this is what I have personally used in both startups and more established company projects.

I'm still using Bootstrap 5. Not that "modern" but it gets the job done fast.

Claude 3.7 Sonnet can generate your page layout and styles for free.