Tailwind CSS
A way to style your app without writing separate CSS files.
What is Tailwind CSS?
Tailwind lets you style elements by adding class names directly in your HTML. Instead of writing CSS rules in separate files, you write things like className="bg-blue-500 p-4 rounded-lg". Lovable and Cursor both use Tailwind by default.
It looks strange at first — why put styles right on the element? But once you get used to it, it's much faster than maintaining separate stylesheet files.
In Vibe Coding
Both Lovable and Cursor generate Tailwind CSS by default. When you see className="bg-blue-500 text-white p-4 rounded-lg" in your code, that's Tailwind. You can tell the AI "make it bigger" or "change the color" and it updates the Tailwind classes.
Example
For example: Instead of creating a separate style file and writing "background-color: blue; padding: 16px;" you write className="bg-blue-500 p-4" directly on the element. Faster, fewer files.
Why this matters
This matters because Tailwind CSS appears repeatedly when building, deploying, debugging, or connecting services in vibe coding workflows.
When you'll hit this in practice
You will usually run into Tailwind CSS when working on Prompt Library.