TortoiseFeel

Hello, Welcome to the post.

Here is the common question first you have in your mind to when get started with Tailwind CSS for your first project or go-to learning project for Tailwind and other frontend tech you were learning together.

So, Lets Get’s close familiar with Tailwind CSS to start with.

More content is boiling and will be coming up soon!

Keep your focused till then here!

PS. Okay, well will start now with some basic code from Tailwind CSS docs to familiarize with CSS class names we will be generally using to start our basics structure for any UI component building in frontend or html.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Here lets talk about all the classes used in the above code to create the small chat notification pop box for example:

p-6 applies padding to the box, ranges suffix starts from number 0 to 96 with also some decimal values unto 3 number, like, p-1.5, p-2.5 and p-3.5
also suffix available to handle specific paddings are like; p – all side, ps – padding start (on left side), pe padding for end (right side only), px – for padding left and right side, py – for padding top and bottom , px-auto

Similarly, you can learn for margin would be having same sets of rules to apply margin to the box using the same above like suffix and prefix name, just you might need to change ‘p‘ to ‘m‘.

max-w-sm is to set max width on smaller devices or for smaller devices.

mx-auto is setting margin left and right auto to center align the box element. (note as we discussed for padding suffix and prefix same applies to margin)

bg-white – apply white background color to the element, for more possible values are available in Tailwind CSS Background list latest versions, you can also apply variations and calculation with class names

rounded-xl – rounding the box with xl size value, there are bunch of options and ways to round the box or make the rounded to none using rounded-none, check the rounded classes and variations list on Tailwind CSS Rounded Corners
shadow-lg – applies outer box shadow to the element, possible values available are shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl, you can also apply inner shadow and no shadow using class like shadow-inner and shadow–none

in Tailwind CSS we can use variant modifies, what are they? they are just utility class to apply styles like when you hover and element or so, for example apply shadow-lg on hover right through CSS class name code here it is an example of variant modifiers class: hover:shadow-lg, will apply shadow effect on hover of the that particular element, isn’t it easy? For more styling options check Tailwind CSS Shadow

flex – applies flex box styles to the element its child elements how they grow or shrink using more utility class names like flex-1, flex-initial, flex-auto and flex-none, also breakpoints and variants are available for the class flex. Check out Tailwind CSS Flex for more details information.

items-center – abasically to align child items in center respect to flex direction column or row

space-x-4 – to creates space between child elements or help to create gaps between the elements, various class option with gap size available, checkout Tailwind CSS Space

h-12 and w-12 – are to apply width and height to the logo element, there are many height and width utility classes available, just heads up class names starting from w-0, w-px, w-1,and so on … till end w-ful, w-screen, w-min, w-max, w-fit, similarity for height, Tailwind CSS Width

Next remaining are text- and font- they applies text variant size and colors and font variant size and weights and more, check underline-offset-1 and so on variant till 8 applies underline offset between text line to the bottom. Tailwind CSS Underline Offset Tailwind CSS Font Weight and more variants classes we can look straight through the doc for more deeper learning of CSS class names.

I hope this gives us the highlight what lies under Tailwind CSS styling guides and what classes we can utilize from the bunch out in the tail of wind CSS, make sense!?

Happy learning, for tips or corrections please leave message or drop us note on hello@tortoisefeel.com