Tailwind CSS

Tailwind is like Bootstrap for React; it’s bigger and dumber than Vanilla JS & Web Standards; but is like PHP in that you can guess the names of things; once you learn the syntax it’s just writing CSS as Selectors.

A single element might have all it’s CSS written as classes like so:

• relative — gives the element `position: relative
• z-10 — puts it above elements with lower `z-index
• pt-24 — top padding of 6rem
• md:pt-32 — from the medium breakpoint upward, top padding becomes 8rem
• pb-12 — bottom padding of `3rem
• md:pb-24 — from medium screens upward, bottom padding becomes 6rem
• px-4 — horizontal padding of 1rem
• lg:px-[159px] — from large screens upward, horizontal padding becomes exactly `159px
• flex — uses Flexbox

or a whole list of elements w/ their CSS as classes like:

<div class="mt-10 grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2">
  <div class="flex items-center justify-center py-6 px-2 rounded-sm bg-[#1c32ff05]">...</div>
  <div class="flex items-center justify-center py-6 px-2 rounded-sm bg-[#1c32ff05]">...</div>
  <div class="flex items-center justify-center py-6 px-2 rounded-sm bg-[#1c32ff05]">...</div>
</div>

• mt-10 — adds 2.5rem of space above the grid.
• grid-cols-3 — creates 3 equal-width columns by default.
• sm:grid-cols-4 — switches to 4 columns at the sm breakpoint.
• lg:grid-cols-6 — switches to 6 columns at the lg breakpoint.
• gap-2 — adds 0.5rem between both rows and columns.
• py-6 — gives each item 1.5rem of vertical padding.
• px-2 — gives each item 0.5rem of horizontal padding.
• rounded-sm — applies a small border radius.
• bg-[#1c32ff05] — uses a custom background color. The final two hex digits, 05, are the alpha channel, making the blue extremely transparent—roughly 2%.