In Tailwind CSS

Why not just use inline styles?

A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class.

• Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout
• The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
• The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance
• The width and height utilities (w-12 and h-12) to size the logo image
• The space-between utilities (space-x-4) to handle the spacing between the logo and the text
• The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text
• This approach allows us to implement a completely custom component design without writing a single line of custom CSS.

Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

But once you’ve actually built something this way, you’ll quickly notice some really important benefits:

You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container. Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS. Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking. When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.

It's fast, flexible, and reliable — with zero-runtime.

• Setting the z-index Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the z-{index} utilities.

  <div class="z-40 ...">05</div>
  <div class="z-30 ...">04</div>
  <div class="z-20 ...">03</div>
  <div class="z-10 ...">02</div>
  <div class="z-0 ...">01</div>
  

• Using negative values To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.

<div class="-z-50"> <!-- ... --> </div>

• Hover, focus, and other states Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:z-50 to only apply the z-50 utility on hover.

• Grid

  The grid can be used by providing grid in a class of HTML elements. we can configure grid columns, in TailwindCSS we have 0-12 for columns and rows.

grid-cols-[1-12] grid-rows-[1-6] That's all for starting out, explore more while making projects, that's how I got into TailwindCSS 😄, Happy coding ✌️

if you readed till the end, you can like my article 🌟, Thanks.