(using Tailwind 3.4.10)
Tailwind css;
‘A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.’
allows you to write in-line styles, like;
That very long div class style becomes the little round orange thing you see here;
For these specific things, it ensures you don’t need to make up class-names like ‘little-orange-blob-above-bell’, find that class in your CSS files, and style it there. It’s much quicker, even if it doesn’t look like it at first.
for example. This in CSS;
color: rgba(0,255,0,1);
background-color:#FFCDD2;
left: 4px;
display:flex;
flex-direction:column;
justify-content:space-between;
margin-top:20px;
becomes this in tailwind classes:
class=‘text-green-500 bg-red-100 left-1 flex-col justify-between mt-4’.
If you have Prettier/eslint/tailwindcss plugins enabled you should get class suggestions like this;
and classes should order themselves automatically on save when using prettier/eslint, which can be annoying, but eventually helpful for consistency
You can pick shades of default colors like green between 50 (nearly white) and 900 (nearly black). Saves you some headache with less choice-options! You can create your own palettes as well in tailwind-config. (e.g bg-primary-500 becomes a middle shade of your primary color)