What is Tailwind CSS?

Tailwind CSS is the utility-first CSS framework that provides the low-level utility classes that can be used to build custom designs, without the need to write the traditional CSS. Unlike traditional frameworks like Bootstrap, Tailwind CSS does not provide predefined components like buttons or cards. Instead, it can focus on giving the developers the flexibility to design custom components directly in the HTML using utility classes.

These are the following topics that we are going to discuss:

What is Tailwind CSS?

Tailwind CSS is a highly customizable, low-level CSS framework that lets you style the elements quickly and efficiently using the utility classes. Rather than writing the custom CSS, developers can use pre-built utility classes directly in the HTML, resulting in cleaner and more manageable styles. It can allow you to build responsive and visually appealing interfaces faster.

Features of the Tailwind CSS

• Utility-First Approach: Tailwind can provide the utility classes to handle the common styling properties like margin, padding, typography, colors, etc.
• Customization: It can offer extensive customization capabilities through the configuration files (tailwind.config.js) and enables custom designs without writing much CSS.
• Responsive Design: It can provide the utilities for the responsive design with built-in breakpoints (sm, md, lg, etc.).
• No Opinionated Components: Unlike Bootstrap, Tailwind does not provide any ready-made components but allows you to build the components using utility classes.
• PurgeCSS: Tailwind can remove unused CSS classes when you build the project and optimize the final size of the CSS files.

Tailwind CSS Properties

Tailwind CSS can provide utility classes that allow you to apply the CSS properties directly to the HTML elements without writing the traditional custom CSS. Let's break down some common properties their syntax, and how they work

1. Color

Tailwind makes it easy to apply to the elements with utility classes for the background, text, borders, etc. The syntax can follow a pattern like this: bg-color-shade or text-color-shade.

• bg-blue-500: This class can set the background color to blue, where 500 represents the medium shade of blue.
• Tailwind can use a color scale ranging from 100 (lightest) to 900 (darkest).
• text-white: This class sets the text color to white.

We can customize both the background and text color easily by changing the utility classes.

2. Spacing (Margin and Padding)

Tailwind can provide simple classes to control spacing like margin (m-) and padding (p-). We can control spacing on each side of the element individually, or apply the same padding across all the sides.

• mt-4: Adds the top margin (m) of the 4 units (1rem or 16px by default).
• mb-2: Adds the bottom margin of the 2 units (0.5rem or 8px).
• p-6: Adds the padding (p) of the 6 units (1.5rem or 24px) on all sides of the element.

Tailwind can follows the unit system (e.g., p-4, mt-2, etc.) that corresponds to the pre-defined spacing values and making it easy to create the consistent layouts.

3. Typography

Tailwind can offers the extensive control over text styling(Typography) with classes for the font size, weight, alignment, etc.

• text-lg: Sets the font size to the large (1.125rem or 18px by default).
• font-bold: Makes the text bold, using the font weight of 700.

In Tailwind, font size classes like text-sm, text-base, text-xl, and text-2xl are used to the control text size easily. Similarly, font weight can be set using the font-light, font-medium, font-semibold, etc.

4. Flexbox

Tailwind can includes the powerful Flexbox utilities and enabling the easy alignment and layout control.

• flex: it can turns the div into the flex container and allowing the children to be aligned and distributed using Flexbox properties.
• justify-center: it can centers the child elements horizontally inside the flex container.
• items-center: it can centers the child elements vertically inside the flex container.
• h-64: it can sets the height to 16rem (or 256px).

In this example, the combination of the Flexbox and utility classes results in the vertically and horizontally centered the text inside a container.

5. Hover Effects

Tailwind can lets you easily add the hover states to elements using the hover: prefix before any utility class.

• bg-green-500: it can sets the background color to the medium green (green-500).
• hover:bg-green-700: it can changes the background color to the darker shade of green (green-700) when the user hovers over the button.
• py-2: It can adds the vertical padding of the 0.5rem to the button.
• px-4: it can adds the horizontal padding of 1rem.
• rounded: it can be rounds the corners of the button.

The hover: prefix in Tailwind can allows you to define the hover state styles right alongside the normal state styles, keeping the code clean and concise.

Note: There are so many utilities that are present in Tailwind CSS that can be used to create more interactive UI.

Example: We can build the simple webpage using the Tailwind CSS. We will create the card layout with a title, description and button.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="bg-gray-100 p-6">

    <div class="max-w-sm mx-auto bg-white rounded-lg
                shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"
            alt="Placeholder Image">

        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Card Title</h2>
            <p class="text-gray-700 mb-4">
                This is a simple card with an image, title,
                and description. It demonstrates the use of Tailwind CSS for
                styling.
            </p>
            <button class="bg-blue-500 hover:bg-blue-700 
                           text-white font-bold py-2 px-4 rounded">
                Learn More
            </button>
        </div>
    </div>

</body>

</html>

Output:

Conclusion

Tailwind CSS is the powerful and flexible utility-first CSS framework that allows the developers to rapidly build the custom user interfaces without writing the custom CSS. By utilizing the utility classes, it can streamlines development and helps to maintain the consistent styles across the application. Its responsive design utilities, extensive customization options, and simplicity make it the excellent choice for the modern web development.