A Beginner’s Guide to Utility Classes and Basic Usage

Welcome to the second chapter of our “Learn Tailwind CSS with Examples” tutorial series! In this article, we will explore the basic usage and utility classes with examples. We'll learn how to style different elements and components of a web page using pre-designed utility classes.

By the end of this tutorial, you'll have a clear understanding of how to use Tailwind CSS to create a visually appealing and responsive web page effortlessly. Additionally, we'll apply our knowledge to create a simple web page using the utility classes.

So, let's get started and explore the world of basic usage and utility classes in Tailwind CSS!

Understanding the utility-first approach

Have you ever heard of the utility-first approach in Tailwind CSS? We briefly discussed it in our first chapter…

It's a design technique that simplifies the process of styling elements of our web page. Instead of creating custom CSS classes for each style, we can use pre-defined utility classes that serve specific purposes like colours, typography, spacing, and more.

In simple terms, the utility-first approach allows us to quickly style elements by adding ready-made classes directly in our HTML code. It's like having a set of building blocks ready to use.

For example, you can use a class like "bg-blue-500" to set the background colour to blue or "py-4" to add 4 units of vertical padding. This saves us from writing lengthy CSS code for every little style change and lets us focus on applying the styles we need.

Advantages of using the utility-first approach:

Now, let's explore the advantages of using the utility-first approach in Tailwind CSS:

Faster development: Utility classes allow you to style your web pages quickly without having to write extended CSS code for each element. This speeds up our development process and will enable us to build websites more efficiently.
Consistency and reusability: Utility classes provide a standard way to style elements, ensuring a consistent design across our project. Since we can reuse these classes, maintenance is simplified, and consistent styling is ensured throughout different pages and components.
Flexibility and customization: Don't worry; the utility-first approach doesn't limit our design options! Tailwind CSS offers a wide range of utility classes that you can combine and customize to achieve your desired look and feel. You have the freedom to create unique designs by utilizing these utility classes.
Responsive design: One of the great things about utility classes is that they include responsive variants. We can easily create responsive designs just by adding a few classes(sm, md, lg, etc.) to our code. Our web pages will automatically adapt to different screen sizes and devices, saving us time compared to manually writing complex media queries.
Code efficiency: By using utility classes, we can keep our CSS code concise and efficient. Instead of writing specific styles for each element, we apply classes only where needed. This helps us to avoid messy stylesheets, resulting in faster loading times and better overall performance.

Furthermore, Using the utility-first approach, we can enjoy the simplicity, flexibility, and efficiency that Tailwind CSS brings to our web development workflow.

Don't worry if you're new to this concept— In the next section, we will explore main utility classes with examples…

Exploring the main utility classes

In this section, we will examine Tailwind CSS's main utility classes. It provides a comprehensive set of utility classes for various design aspects, including colours, typography, spacing, flexbox, grid, and responsiveness.

These utility classes follow a consistent naming convention, making it easier to understand and remember their purpose. This consistency ensures that our design remains consistent across different elements and sections of your website.

You don’t need to remember all of these utility class names, just follow the documentation as per your requirement.

Let's explore utility classes in detail:

Colors

The color utility classes allow us to easily apply colors to various elements. It offers a wide range of color utility classes that allow you to easily style elements with different colors. By using these classes, you can achieve consistent and vibrant color schemes throughout your web page.

Here are some key points to understand about color utility classes:

Provides a wide range of predefined color classes, allowing you to specify background colors, text colors, border colors, and more.
How to use color classes: You can apply a specific background color to a div using the big-{color} class, change the text color using the text-{color} class, or set the border color using the border-{color} class.

For example, You can use the "bg-slate-900" class to set the background color of an element to a vibrant slate shade. Similarly, the "text-blue-700" class can be used to set the text color to a deeper blue tone. By utilizing these color utility classes, you can quickly add visual appeal to your elements.

Typography

Typography utility classes assist in styling text and managing typographic elements on our web page. These classes offer consistent and well-designed typography without the need to write custom CSS.

Here are some key points to understand when working with typography utility classes:

Tailwind CSS provides classes for controlling font sizes, font weights, text alignments, and other typographic properties.
How to use typography classes: You can set the font size using the text-{size} class, apply different font weights using the font-{weight} class, or align text using the text-{alignment} class.

For example, You can use "text-2xl" for setting font size or "font-bold" for bold text making it effortless to achieve consistent and visually appealing typography.

Spacing

Spacing utility classes enable you to control the spacing and layout of elements, ensuring a well-structured and visually pleasing design. These classes provide predefined spacing values that you can apply to elements for consistent margins and padding. It simplifies the process of managing margins, padding, and other spacing-related properties.

Here's what you need to know about spacing utility classes:

Tailwind CSS offers classes to adjust margins, padding, and spacing between elements. The classes follow a consistent naming convention, such as m-{size} for margin and p-{size} for padding.
How to use spacing classes: You can add a margin to an element using the m-{size} class, apply padding using the p-{size} class, or control the spacing between elements using the space-{size} class.

For example, the class "p-4" adds a uniform padding of 4 units to all sides of an element, while the class "mt-8" adds a top margin of 8 units. By using these classes, you can easily control the spacing between elements and create well-structured layouts.

Flexbox and Grid

Tailwind CSS includes utility classes for Flexbox and grid layouts, allowing you to create flexible and responsive designs. Flexbox and grid utility classes in Tailwind CSS empower you to create flexible and responsive layouts with ease. These classes simplify the process of arranging elements and building complex grid structures.

Flexbox utility classes enable you to easily align and arrange elements within a container using properties like "flex", "justify-center", and "items-center"

Here's what you need to know about flexbox and grid utility classes:

Tailwind CSS provides utility classes to apply flexbox and grid layouts, allowing you to create dynamic and responsive designs.
By applying specific classes, you can control flex container properties, flex item alignment, grid columns, and more.
How to use Flexbox and grid classes: You can use classes like flex, flex-row, flex-col, grid, grid-cols-{number}, and more to structure and arrange elements using Flexbox or grid.

Grid utility classes provide a convenient way to create grid-based layouts with options such as "grid-cols-2" and "gap-4". By harnessing these utility classes, you can achieve versatile and responsive layouts without the need for custom CSS.

Responsive Design

Creating responsive designs is a fundamental aspect of modern web development, and Tailwind CSS simplifies this process with responsive utility classes. These classes enable us to build responsive designs that adapt to different screen sizes and devices, making it simple to create layouts that look great across various devices.

Here's what you should know about responsive utility classes:

Offers responsive classes that can be applied based on different screen sizes, such as sm (small), md (medium), lg (large), and xl (extra-large).
You can use responsive classes to control the visibility, positioning, sizing, and other properties of elements on different screen sizes.
How to use responsive classes: You can apply classes like sm:block, md:hidden, lg:flex, and xl:w-{width} to control the behaviour of elements at different breakpoints.

For example, the class "sm:text-lg" sets the text size to large (lg) on small screens (sm) and above. With these responsive utility classes, you can create responsive and adaptive designs easily.

Customization and Configuration

Tailwind CSS offers extensive customization options, allowing you to tailor utility classes to fit our project's requirements. These options enable us to override default configurations and create a unique design.

You can modify the default theme, add or remove utility classes, and tailor the framework to match your design preferences.

You can modify various aspects of Tailwind CSS, such as colour palettes, font families, breakpoints, and more, to align with your project's design.
How to customize utility classes: Tailwind CSS provides configuration files where you can modify class prefixes, add or remove utility classes, and fine-tune other settings.

let's put these utility classes into practice by creating an example of a simple card with a rounded image, name, and position:

Sample Card with Image using Tailwind CSS

To Create Tailwind Card Components, we need to :

Firstly, create an outermost div that has the following utility classes: :

<div class="bg-slate-700 grid place-content-center h-screen">

bg-slate-700 sets the background colour to a shade of slate grey.
grid enables CSS grid layout.
place-content-center centres the content both vertically and horizontally.
h-screen sets the height of the div to the full height of the viewport.

Then create a div that represents the card container, with the following utility classes:

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">

py-8 and px-8 add padding on the top and bottom, and left and right sides, respectively.
max-w-sm sets the maximum width of the div to a small size.
mx-auto centers the div horizontally within its parent container.
bg-white sets the background color of the div to white.
rounded-xl adds rounded corners to the div.
space-y-2 creates vertical spacing between child elements.
sm:py-4 adjusts the padding on small screens.
sm:flex enables flexbox layout on small screens.
sm:items-center centers the flex items vertically on small screens.
sm:space-y-0 removes vertical spacing between flex items on small screens.
sm:space-x-6 adds horizontal spacing between flex items on small screens.

Now create another div for image element in centered within the card container. With the following utility classes:

<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="<https://i.ibb.co/z8kWxyL/pexels-andrea-piacquadio-3979198-removebg-preview.png>" alt="Sophia Johnson" />

block makes the image a block-level element.
mx-auto centres the image horizontally within its parent container.
h-24 sets the height of the image to 24 pixels.
rounded-full creates a circular shape for the image.
sm:mx-0 removes the horizontal margin on small screens.
sm:shrink-0 prevents the image from shrinking on small screens.

Then create another div containing the text content within the card, with the following utility classes:

<div class="text-center space-y-2 sm:text-left">

This div contains the text content within the card, with the following utility classes:

text-center centers the text content horizontally.
space-y-2 creates vertical spacing between child elements.
sm:text-left aligns the text to the left on small screens.

<p class="text-lg text-blue-950 font-semibold">
  Sophia Johnson
</p>

This paragraph contains the name text, with the following utility classes:

text-lg sets the font size to large.
text-blue-950 sets the text color to a specific shade of blue.
font-semibold sets the font weight to semi-bold.

<p class="text-blue-500 font-medium">
  Web Developer
</p>

This paragraph contains the position text, with the following utility classes:

text-blue-500 sets the text color to a specific shade of blue.
font-medium sets the font weight to medium.

The final code of the card with the image:

<div class="bg-slate-700 grid place-content-center h-screen">
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://i.ibb.co/z8kWxyL/pexels-andrea-piacquadio-3979198-removebg-preview.png" alt="Sophia Johnson" />
  
  <div class="text-center space-y-2 sm:text-left">
   
      <p class="text-lg text-blue-950 font-semibold">
        Sophia Johnson
      </p>

      <p class="text-blue-500 font-medium">
        Web Developer
      </p>
   
  </div>
</div>
</div>

Overall, the code represents a card component with a rounded image, a name, and a position.

A Beginner’s Guide to Utility Classes and Basic Usage

Congratulations!

You have successfully created a card with an image using Tailwind CSS. By following the above steps and utilizing the power of utility classes that we have learned above. You've achieved a visually appealing and responsive card component. Well done!

Building a simple webpage using utility classes

In this section, we will create a simple webpage using utility classes. We will implement the concepts we've learned so far to create a visually appealing portfolio home page.

Follow the below step and feel free to customize the design to suit your own preferences.

Here's an overview of how our end result will look like:

Here is step by step guide to creating a simple portfolio page Hero component using HTML and Tailwind CSS:

Step 1: Set up the HTML structure Start by creating a new HTML file and set up the basic structure with the <!DOCTYPE html> declaration.

Step 2: Include Tailwind CSS and define the background color Inside the <head> section, add a link to the style.css file where we will include the Tailwind CSS styles. Set the background colour of the <body> element using the “bg-slate-950” utility class.

<link rel="stylesheet" href="./style.css">

Step 3: Create the navigation bar

Within the <body> element, start by creating the navigation bar. Use a <nav> element and apply the bg-purple-700 and text-white classes for the background colour and text colour, respectively. Use the py-4 class to add vertical padding.

<nav class="bg-purple-700 text-white py-4">
</nav>

Inside the <nav> element, add a <div> with the class container mx-auto flex items-center justify-between to center the content and provide a container for the navigation items.

<nav class="bg-purple-700 text-white py-4">
    <div class="container mx-auto flex items-center justify-between">
    </div>
</nav>

Inside the <div>, create another <div> with the flex items-center classes to align the image and text horizontally.

And inside the inner <div>, add an <img> element with the rounded-full h-12 w-12 mr-2 classes to display the profile image. Set the src attribute to the URL of the image.

<nav class="bg-purple-700 text-white py-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center">
            <img class="rounded-full h-12 w-12 mr-2" src="https://cdn.pixabay.com/photo/2014/04/02/17/07/user-307993_1280.png" alt="Profile Image">
        </div>
    </div>
</nav>

Next, add an <h1> element with the text-2xl font-bold classes for the name. Set the text content to your name or the desired text.

<nav class="bg-purple-700 text-white py-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center">
            <img class="rounded-full h-12 w-12 mr-2" src="https://cdn.pixabay.com/photo/2014/04/02/17/07/user-307993_1280.png" alt="Profile Image">
            <h1 class="text-2xl font-bold">Sophia Johnson</h1>
        </div>
    </div>
</nav>

To create the navigation links, add a <ul> element with the flex space-x-8 classes to create a horizontal list with spacing between the items.

And Inside the <ul>, create four <li> elements with <a> tags inside. Add the text-xl font-semibold hover:underline classes to the <a> tags for styling. Set the href attribute of the <a> tags to "#" for now.

<nav class="bg-purple-700 text-white py-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center">
            <img class="rounded-full h-12 w-12 mr-2" src="https://cdn.pixabay.com/photo/2014/04/02/17/07/user-307993_1280.png" alt="Profile Image">
            <h1 class="text-2xl font-bold">Sophia Johnson</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-xl font-semibold hover:underline">About Me</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Projects</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Resume</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Contact</a></li>
        </ul>
    </div>
</nav>

Step 4: Add the main content area

After the navigation bar, create a <div> element with the container mx-auto mt-8 flex items-center justify-center classes to center the content horizontally and provide a container for the main content.

<div class="container mx-auto mt-8 flex items-center justify-center">
</div>

Inside the <div>, add another <div> with the text-white mt-8 classes to apply the styles for the text content.

And Inside the inner <div>, add a series of <p> elements with different classes for the text styling. Adjust the font sizes, font weights, and colors as desired.

<div class="container mx-auto mt-8 flex items-center justify-center">
    <div class="text-white mt-8">
        <p class="text-8xl font-bold">I am</p>
        <p class="text-4xl font-semibold text-yellow-400 mt-4">Passionate Web Developer</p>
        <div class="w-36 h-2 border-b-4 border-purple-600 mt-2 mb-4"></div>
        <p class="text-2xl text-gray-400 mt-8">I am a passionate Web Developer with over 5 years of experience in creating compelling visual designs.</p>
    </div>
</div>

Step 5: Add the image

To add an image to the portfolio page, create another <div> element below the text content <div>. This will serve as a container for the image.

Inside the new <div>, add an <img> element with the max-w-2xl h-auto classes. Set the src attribute to the URL of the desired image and add an alt attribute for accessibility.

<div>
    <img class="max-w-2xl h-auto" src="https://i.ibb.co/z8kWxyL/pexels-andrea-piacquadio-3979198-removebg-preview.png" alt="Image">
</div>

Step 6: Finalize the code

To complete the page, close the <body> and <html> tags.

Complete code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css" class="">
    <title>Simple Portfolio Page</title>

</head>
<body class="bg-slate-950">
    <!-- Nav bar start here -->
    <nav class="bg-purple-700 text-white py-4">
        <div class="container mx-auto flex items-center justify-between">
          <div class="flex items-center">
            <img class="rounded-full h-12 w-12 mr-2" src="https://cdn.pixabay.com/photo/2014/04/02/17/07/user-307993_1280.png" alt="Profile Image">
            <h1 class="text-2xl font-bold">Sophia Johnson</h1>
          </div>
          <ul class="flex space-x-8">
            <li><a href="#" class="text-xl font-semibold hover:underline">About Me</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Projects</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Resume</a></li>
            <li><a href="#" class="text-xl font-semibold hover:underline">Contact</a></li>
          </ul>
        </div>
      </nav>
    <!-- Nav Bar Ends here -->

    <!-- main content area start here -->
    <div class="container mx-auto mt-8 flex items-center justify-center">
        <div class="text-white mt-8">
          <p class="text-8xl font-bold">I am</p>
          <p class="text-4xl font-semibold text-yellow-400 mt-4">Passionate Web Developer</p>
          <div class="w-36 h-2 border-b-4 border-purple-600 mt-2 mb-4"></div>
          <p class="text-2xl text-gray-400 mt-8">I am a passionate Web Developer with over 5 years of experience in creating compelling visual designs.</p>
        </div>
        <!-- image div start -->
        <div>
            <img class="max-w-2xl h-auto" src="https://i.ibb.co/z8kWxyL/pexels-andrea-piacquadio-3979198-removebg-preview.png" alt="Image">
        </div>
        <!-- image div end -->
      </div>
    <!-- main content area end here -->
        
</body>
</html>

That's it! You have successfully created a simple portfolio page using HTML and Tailwind CSS. Feel free to customize the styles, add more content, and link the navigation items to the appropriate pages in your project.

Conclusion

And so, we reach the conclusion of 2nd chapter of our tutorial series, "Learn Tailwind CSS with Examples." Throughout this chapter on basic usage and utility classes of Tailwind CSS, we have learned the fundamental of Tailwind and created a simple web page.

We started by learning how to use utility classes, which are shortcuts that make styling easier. They help us with things like spacing, typography, and making our designs responsive on different devices, then we created a card with an image, to see how these utility classes work together.

Finally, we started building a simple portfolio web page, using what we learned in this tutorial. This will help us practice and apply our new skills.

By completing this chapter, you now have a good foundation in Tailwind CSS. You can use utility classes to make your web designs look amazing, and even create more pages of your portfolio.

Remember to keep practising and experimenting with Tailwind CSS. The more you work with it, the better you'll become. We hope you enjoyed this tutorial series and wish you lots of success in your web development journey.

Happy coding! 🚀