Tailwind CSS Basic Usages

July 8, 2024[Tailwind CSS Quick Guide]

In the last post Get Started with Tailwind CSS, we have set up our Tailwind CSS development environment, and we also create a Hero Image page. Now, let me explain the details how it works. You can also refer to the offical documentations: https://tailwindcss.com/docs/.

Here’s the codes for Hero Image page:

 8
 9
10
11
12
13
14
15
16
17
18
19
20
<body class="bg-gray-50">
  <div class="container mx-auto">
    <section class="w-full mt-5 flex flex-col items-center">
      <img src="glider.png" class="w-96">
      <div class="text-center">
        <h1 class="p-5 text-3xl font-bold">Build Your Website</h1>
        <p class="text-gray-900">Easy to build your website with Hugo, a static site generator.</p>
        <a href="#" class="mt-5 px-3 py-1 border bg-orange-600 rounded-md font-semibold text-white">Get Started</a>
        <a href="#" class="mt-5 px-3 py-1 border border-gray-900 rounded-md ml-8 font-semibold text-gray-900">Demo</a>
      </div>
    </section >
  </div>
</body>

Background Color

The class bg-gray-50 (line 8) sets the background color of the body to gray rgb(250 250 249). Other available values: bg-red-50, bg-red-100, bg-red-200,…, bg-red-900, bg-red-950 etc.

Centered Section

The class container (line 9) sets the max-width of an element to match the min-width of the current breakpoint.

E.g., the width of the screen is 1000px, the pre-defined breakpoints of md and lg screens are 768px and 1024px, the max-width of the section would be 768px, instead of the full width of 1000px.

The class mx-auto (line 9) sets horizontal margins to auto. The effect of the combined classes container and mx-auo is to have a centered section window.

Margins

There are other classes used to set margins:

mx-4: set horizontal margin to 16px or 1rem
my-6: set vertical margin to 24px or 1.5rem
ml-5: set left margin
mr-5: set right margin
mt-3: set top margin
mb-2: set bottom margin

Paddings

Similar with the margin settings, we also have kinds of paddings like: px-3, py-2, pl-1, pr-3, pt-5 and pb-2.

Set Width / Height

The class w-full sets the width of an element to full width of the container.

The similar usages:

w-12: set width to 48px or 3rem
h-5: set height to 20px or 1.24rem
w-[100px]: set width to custom value 100px
max-w-96: set max-width to 384px or 24rem
min-w-48: set min-width to 192px or 12rem

Flex Items

Use flex flex-col items-center classes (line 10) to position the flex items vertically and centered horizontally.

To create a horizontal navigation bar, we can use flex classes as well:

<nav class="flex items-center bg-teal-500">
  <a href="#" class="flex-none inline-block px-3 py-1 ml-1 text-white">Home</a>
  <a href="#" class="flex-none inline-block px-3 py-1 ml-1 text-white">About</a>
  <a href="#" class="grow inline-block px-3 py-1 ml-1 text-white">Projects</a>
  <a href="#" class="flex-none inline-block px-3 py-1 mr-3 text-white font-semibold">Download</a>
</nav>

By default, the flex items are positioned horizontally. It is different from the above example, items-center here centers the items vertically. flex-none set the items no grow nor sink, while grow lets the item grow to occupy the remain place so that Download link is pushed to the right end.

Preview:

Text Classes

text-center (line 12): sets text-align to center.
Other available values: text-left, text-right, and text-justify etc.
text-3xl (line 13): sets font-size to 30px and sets line-height to 36px
font-bold (line 13): sets font-weight to 700
Other available values: font-thin, font-light, font-normal, and font-semibold etc.
text-gray-900 (line 14): sets color to gray

Border

border sets border-width to 1px
border-0: remove the border
border-x-2: sets border-left-width and border-right-width to 2px
border-y: sets border-top-width and border-bottom-width to 1px
border-t: sets `border-top-width to 1px
border-b: sets `border-bottom-width to 1px
rounded-md (line 15): sets border-radius to 6px
border-gray-900 (line 15): sets border-color