Webbo3 Frontend Development · Month 1 · Lesson 18

What Tailwind Is and Why It Exists: Practical Mastery

What Tailwind Is and Why It Exists: a practical Webbo3 Academy lesson with live, interactive code examples you can run yourself, plus a full exercise to complete tonight.

You have been writing CSS for a while now, and you have probably noticed that you are writing the same styles over and over again. You might have a button that needs to be blue, with a certain font size and padding, and you find yourself copying and pasting the same CSS code every time. Or maybe you are working on a project and you need to make sure that all the headings are the same color, but you are not sure how to keep track of all the different styles. This can be frustrating and time consuming.

By the end of this lesson, you will have a solution to this problem. You will learn how to use a tool called Tailwind CSS to write styles that are reusable, predictable, and easy to understand. You will be able to explain what problem Tailwind is trying to solve, and how its "utility-first" approach can make your life as a developer significantly easier. We are moving past the theory and diving straight into practical application. Type along with every example, because the best way to learn Tailwind is by doing it.

What you need before starting

Your code editor and the project folder from previous lessons. Work along in your own editor as you read. This lesson is written to be typed, not skimmed.

The Problem Tailwind Was Built For

Naming Things

When building websites, you need to write CSS to style your HTML elements. One of the biggest challenges is naming your CSS classes. For example, if you want to make a button red, you might create a class called .red-button. But what if you want another button that is also red, but slightly different? Do you call it .red-button-2, or .almost-red-button? This can quickly get out of hand, leading to a huge list of CSS classes that are hard to maintain.

Dead CSS

Another problem is that you often create CSS classes that you only use once. For example, you might create a class called .header-margin that you only use on one element. If you want to change that margin later, you have to hunt for the class. If you want to use a similar margin somewhere else, you create a new class, leading to duplicated code. This is known as "dead CSS", because the classes are not being effectively reused.

Context-Switch Between Files

When building a website, you often have to switch between your HTML and CSS files. This can be frustrating, because you have to keep jumping back and forth to see how your styles are being applied. It can be hard to keep track of what classes you have already defined, and where you have used them.

Your First Utilities

Tailwind provides a set of pre-defined utility classes that you can apply directly to your HTML elements. For example, you can use the p-4 class to add padding, the text-center class to center text, and the bg-red-500 class to set the background color. Let us see this in a live, interactive example.

<!-- The Tailwind CDN is loaded in this live preview -->
<!-- bg-blue-500: Sets background to blue -->
<!-- hover:bg-blue-700: Darkens background on hover -->
<!-- text-white: Sets text color to white -->
<!-- font-bold py-2 px-4 rounded: Adds font weight, padding, and rounded corners -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">
  Click me
</button>

A common mistake that beginners make is to use the inline style attribute instead of utility classes. While inline styles work, they lead to duplicated code and make it harder to maintain your styles or add hover states. By using utility classes, you keep your HTML clean and make it easier to update your styles globally.

Utility-First Explained

Let us consider a simple example to illustrate the difference between traditional CSS approaches and the utility-first approach. Suppose we want to create a button component that is blue, with a font size of 16 pixels, and has a padding of 10 pixels.

/* Traditional CSS requires a custom class name */
.btn-primary {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px;
  border-radius: 4px;
}

Now, let us rewrite this component using a utility-first approach with Tailwind. We use pre-defined classes to style our button directly in the HTML:

<!-- No custom CSS file needed! -->
<!-- bg-blue-600: Background color -->
<!-- text-white: Text color -->
<!-- text-base: Font size (16px) -->
<!-- px-4 py-2.5: Horizontal and vertical padding -->
<!-- rounded: Border radius -->
<button class="bg-blue-600 text-white text-base px-4 py-2.5 rounded hover:bg-blue-700 transition">
  Tailwind Utility Button
</button>

The utility-first approach allows us to write more concise and maintainable code, as we do not need to define custom classes for every component. It also makes it easier to modify our components, as we can simply add or remove classes to change their styles.

How Class Names Map onto the CSS You Already Know

Tailwind uses a specific naming convention to map class names onto CSS styles. For example, the class text-lg sets the font size. The text- part indicates that it styles the text, and the lg part indicates the specific size. Similarly, bg-blue-500 sets the background color. The bg- part indicates background, and blue-500 indicates the specific color and shade.

<!-- bg-red-200: Light red background -->
<!-- p-4: Padding of 1rem (16px) -->
<!-- text-center: Centers text horizontally -->
<!-- text-lg: Large text size -->
<!-- border border-gray-300: 1px gray border -->
<!-- rounded: Rounded corners -->
<div class="bg-red-200 p-4 text-center text-lg border border-gray-300 rounded">
  This is a styled div
</div>

Installing Tailwind

Using the CDN for Learning

When you are just starting out with Tailwind, the easiest way to get started is by using the CDN link in your HTML file. This method is great for learning and experimenting because it does not require any setup or installation on your local machine.

<head>
  <!-- Include this script tag in the head of your HTML document -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>

Using npm for Real Projects

While the CDN is great for learning, it is not suitable for real-world production projects. For one, it can make your website slower because the browser has to fetch and process the entire Tailwind library. For real projects, it is better to install Tailwind using npm. This involves running npm install -D tailwindcss in your terminal, followed by npx tailwindcss init -p to create your configuration files. You then configure your build script to generate a minimal, optimized CSS file.

The "Ugly HTML" Objection

One common objection to using Tailwind is that it makes your HTML "ugly" by cluttering it with lots of classes. Instead of having a simple <div> element, you might have a long string of utility classes.

While it is true that Tailwind can make your HTML look more cluttered, this is a trade-off for the benefits it provides. With Tailwind, you can write more concise and maintainable CSS, and you do not have to worry about naming classes or overriding existing styles. Additionally, the "ugliness" of the HTML is largely a matter of personal preference. Once you get used to reading Tailwind classes, it can actually be easier to understand what the HTML is doing, because the classes are so descriptive and live right next to the markup they style.

Full Practical Exercise

Rebuilding a styled card in Tailwind will help you understand the benefits of using a utility-first CSS framework. This exercise should take around 20 to 30 minutes to complete. Below is the full, well-commented code for a modern, responsive card built entirely with Tailwind utility classes. Study it, type it, and run it.

<!-- Include Tailwind CDN for this example -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Main container: max width, centered, white background, rounded corners, shadow -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  
  <!-- Flex container for responsive layout (stacks on mobile, side-by-side on desktop) -->
  <div class="md:flex">
    
    <!-- Image container: shrinks on desktop, full width on mobile -->
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" 
           src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" 
           alt="Modern building architecture">
    </div>
    
    <!-- Content container: padding and text styling -->
    <div class="p-8">
      
      <!-- Badge: uppercase, tracking, small text, indigo color, bold -->
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Case study
      </div>
      
      <!-- Title: block, margin top, large text, bold, hover underline -->
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Finding customers for your new business
      </a>
      
      <!-- Description: margin top, slate gray text -->
      <p class="mt-2 text-slate-500">
        Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
      </p>
      
    </div>
    
  </div>
</div>

How to know you got it right

Verify that you have completed the exercise correctly by checking the following:

• Your HTML file includes the Tailwind CSS CDN link in the head section.
• The styled card renders beautifully with a shadow, rounded corners, and proper spacing.
• The card layout stacks vertically on small screens and aligns side-by-side on larger screens (resize your browser to test).
• You did not write a single line of custom CSS in a separate stylesheet.

Common mistakes to avoid

• Thinking Tailwind is a replacement for CSS: Trying to use Tailwind without understanding the basics of CSS. Fix: Learn the basics of CSS before using Tailwind, and understand how Tailwind builds upon CSS fundamentals.
• Not reading the documentation: Trying to guess Tailwind classes without checking the official documentation. Fix: Keep the Tailwind documentation open in a separate tab and search for the utilities you need.
• Overusing utility classes for complex components: Using too many utility classes to style a single, highly complex element. Fix: Use the @apply directive in your CSS file to extract repeated utilities into a custom component class when necessary.
• Not customizing the config file: Using the default Tailwind configuration without customizing it to fit the project's brand colors or spacing. Fix: Take the time to learn how to customize the tailwind.config.js file to fit your project's specific design system.

Questions students ask

• What is the difference between Tailwind and Bootstrap? Tailwind is a utility-first framework, while Bootstrap is a component-based framework. Tailwind provides low-level classes to style elements, while Bootstrap provides pre-built, opinionated components.
• Do I need to know CSS to use Tailwind? Yes, you should have a basic understanding of CSS before using Tailwind. Tailwind builds upon CSS and provides a set of pre-defined classes to make styling faster and more consistent.
• Is Tailwind suitable for small projects? Yes, Tailwind can be used for small projects. It provides a lot of flexibility and can help you create consistent and responsive designs quickly, even for small projects.

Next lesson: Tailwind Layout, Spacing and Responsive Design.