Tailwind CSS

Workplace Context

In a fast-paced web development environment, writing custom CSS can be time-consuming. Tailwind CSS, a utility-first CSS framework, is popular among developers because it allows for rapid styling directly in HTML using a large set of utility classes. This lesson introduces Tailwind’s approach to CSS, helping you leverage its utility classes to create responsive and consistent designs quickly and efficiently.

Learning Objectives

By the end of this lesson, you will be able to:

• Explain the benefits of using Tailwind CSS.
• Use utility classes in Tailwind to style components.
• Understand the basics of configuring Tailwind for a project.
• Create responsive layouts using Tailwind’s grid and flex utilities.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that enables you to style elements directly in HTML with concise, single-purpose classes. Unlike component-based libraries (e.g., Bootstrap), Tailwind focuses on utilities that allow granular control over design and layout.

Key Benefits of Tailwind CSS

1. Rapid Development: Use classes directly in HTML to style elements without writing custom CSS.
2. Consistency: Utility classes promote a consistent design across pages.
3. Responsive Design: Built-in support for responsive design, enabling layouts that adapt to different screen sizes.
4. Customizable: Tailwind’s configuration allows for extensive customization and theming.

Example: Styling a Button

With Tailwind, you can create a button like this without writing any CSS:

This example uses Tailwind’s utility classes for background color, hover effects, font weight, padding, margins, and rounded corners.

Difference between Tailwind and Traditional CSS

Take a look at the styles.css file in the following editor:

That is a lot of custom CSS, and most of it is not reusable!

With Tailwind, all of that CSS is handled for you. See the following example:

While the outcome is not exactly identical, Tailwind allows us to keep this component styled consistently with the rest of the application, rather than relying on custom CSS.

Setting Up Tailwind CSS

The simplest way to get started with Tailwind is to include it via a content delivery network (CDN) within your HTML file:

<script src="https://cdn.tailwindcss.com"></script>

This is not the recommended way to include Tailwind in a production application, but is quick and easy for small project or testing purposes.

To add Tailwind to a project via npm, follow these steps:

1. Install Tailwind: Tailwind requires Node.js and npm. Use the following commands in your project directory:

   npm install -D tailwindcss
   npx tailwindcss init

2. Configure Tailwind:

   • Tailwind’s configuration file (tailwind.config.js) is where you can customize colors, breakpoints, and other settings. This is optional for basic usage but essential for larger projects.

3. Include Tailwind in CSS: Add Tailwind’s directives to your CSS file:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. Compile CSS: Use Tailwind’s CLI to build the final CSS file:

   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Working with Tailwind Utility Classes

Tailwind provides an extensive list of utility classes that allow you to control nearly every aspect of an element’s styling. Here are some commonly used utilities:

Layout and Spacing Utilities

• Padding and Margin: Control spacing with classes like p-4 (padding) and m-2 (margin).
• Flexbox: Use flex, justify-center, items-center, and similar classes to create flexible layouts.

Typography Utilities

Tailwind provides classes for text size, color, alignment, font weight, and more.

Color Utilities

Colors are a key feature in Tailwind, with predefined color classes like bg-blue-500, text-gray-700, hover:bg-blue-700, etc.

Customizable Utilities

Tailwind allows you to customize the values of utility classes as needed, preventing the need to create additional utilities when “magic numbers” are absolutely necessary. You caan put any arbitrary value in the utility classes by using square bracket ([]) notation, as shown below.

<div class="py-[15px] bg-[#f67e7e]space-y-[10px] sm:py-[10px] sm:flex sm:items-center sm:space-y-0 sm:space-x-6">...</div>

Customizable selectors

Likewise, you can create arbitrary CSS selectors within your utilities, as follows:

<div class="[&>.sub-div]:py-6 [&_div]:font-large">
    <div class="sub-div">...</div>
    <div>...</div>
</div>

Utility Classes versus Inline Styles

This looks a lot like inline styles, so why not just use those?

Utility classes have numerous advantages over inline styling:

• With inline styles (or even traditional CSS), every value is a “magic number” (a number without a known source or reasoning). In order to keep things consistent, like margins or padding, you need to remember what values you have used in other places.
• With utility classes, you choose styles from a pre-defined design system, which lends itself to more consistent interfaces.
• You cannot include media queries for responsive design within inline styles.
• With Tailwind’s responsive utilities , you can determine which styles to apply to which breakpoints (small, medium, or large screens, and more).
• Inline styles cannot handle element states such as hover and focus.
• Tailwind’s state variants  allow you to define state-specific classes easily in line.

Example: Flexbox Utility

The following component is responsive, and includes hover and focus states.

Exercise: Identifying Utility Classes

Generally, utility classes are named in such a way that makes it relatively obvious which CSS properties they control. For example, p is for padding, m for margin, bg for background, etc. Similarly, pr is padding-right.

Using this knowledge, take an educated guess at which CSS properties the following Tailwind utility classes might control:

Utility Classes and CSS

As you have likely realized, converting traditional CSS properties into their utility class alternatives is a relatively intuitive process.

With a bit of practice and experience, these utility classes become second-nature to use, just like traditional CSS.

When in doubt, or when looking for a specific utility, remember that modern documentation often includes a full text search option. The shortcut Ctrl + K is the standard for opening these searches within webpages.

Try searching the Tailwind CSS documentation  for a class that can control the translate property.

Responsive Design with Tailwind

Tailwind makes it easy to apply styles based on screen size using responsive prefixes. For instance, to make text size responsive, you can use classes like text-lg sm:text-xl md:text-2xl lg:text-3xl.

<p class="text-lg sm:text-xl md:text-2xl lg:text-3xl">
  This text changes size based on the screen width.
</p>

Exercise: In the following editor, create a card component that adapts to different screen sizes by adjusting the font size, padding, and margins.

Customizing Tailwind with Configuration

The Tailwind configuration file (tailwind.config.js) allows you to extend Tailwind’s functionality by adding custom colors, fonts, breakpoints, and more.

Example: Customizing Colors

In your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        brandBlue: '#0070f3',
        brandYellow: '#ffd60a',
      },
    },
  },
};

You can then use these custom colors in your HTML:

<div class="text-brandBlue bg-brandYellow">
  Custom color example
</div>

Adding Custom Fonts

You can add custom fonts by defining them in the configuration file and including them in the HTML file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
      },
    },
  },
};

<h1 class="font-sans">This uses a custom font!</h1>

Activity: Building a Responsive Navigation Bar

Using Tailwind CSS, create a responsive navigation bar with the following features:

• A horizontal layout on larger screens (md breakpoint) and a vertical layout on smaller screens.
• Different colors and styles for the navigation links on hover.
• A logo aligned to the left.

Example Code

<div class="bg-gray-800 p-4">
  <div class="max-w-7xl mx-auto flex items-center justify-between">
    <a href="#" class="text-white font-bold text-xl">MyLogo</a>
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">Home</a>
      <a href="#" class="text-gray-300 hover:text-white">About</a>
      <a href="#" class="text-gray-300 hover:text-white">Contact</a>
    </nav>
  </div>
</div>

Challenge: Use responsive prefixes to hide the navigation links on small screens and display them as a hamburger menu.

Knowledge Check

Summary

In this lesson, you learned how to use Tailwind CSS for efficient, utility-first styling. Tailwind’s utility classes enable you to create responsive layouts quickly, while its configuration options allow customization to fit project needs. By mastering Tailwind, you can create flexible, consistent designs without writing complex custom CSS.

References

• Tailwind CSS Documentation 
• Tailwind Configuration Guide 
• Responsive Design with Tailwind