What is Tailwind CSS?
A utility-first CSS framework where you style elements in your HTML or JSX using short class names like `flex`, `p-4`, and `text-sm`.

styled in markup · 0 css files
Tailwind lets you style elements using...
Write it in your own words in the app.
In real work
Style with Tailwind CSS only. No custom CSS files. Use responsive prefixes like sm: and md: for breakpoints.
In the illustration
Cards ride under the carousel, which turns to flex, p-4 and text-sm and stamps each card right on the line; an md: stamp fires only on the wide card. The custom-CSS pot stays capped throughout. Small engraved TAILWIND plate only.
Convert the card's CSS module to Tailwind CSS utilities in your component library, keeping the same spacing scale and no arbitrary values.
Try it now
The fastest way to learn a word is to use it. Open this line in the agent you already work in and watch what it does. Change the tool to the one you use.
Go further
01Practice
Make it stick
One term a day, a short quiz, and sentence practice that checks your own words.
02Verify
Prove you know it
Pass the quiz and keep it in a Skills Wallet you can share with anyone who needs proof.
03Career
Find the work that uses it
See which roles lean on this vocabulary, and what they pay in year one.




