This new edition of the book covers Tailwind 3.0, which changes the way Tailwind generates its CSS. Tailwind 3.0 has a large number of new features powered by the new system, including the ability to use arbitrary values with most Tailwind class patterns, and a new syntax for combining color and opacity in a single class. This book also covers the new standalone command-line tools for Tailwind.

With CSS, you can do amazing things to the basic text and images on your website, and with just a little bit of client-side code to add and remove CSS classes, you can do exponentially more.

In the latest edition of this book, you'll learn how to use Tailwind 3.0 and the new way it generates CSS. You'll code your way through Tailwind's newest features, including the ability to use arbitrary values with most Tailwind class patterns and a new syntax for combining color and opacity in a single class. You'll even dive into the new standalone command-line tools for Tailwind.

The Tailwind setup is extremely explicit and makes it possible to understand the display just by looking at the HTML markup. Start by designing the typographic details of the individual elements, then placing and manipulating those elements in "the box" using a flexbox or grid design. Finally, move those elements around the page with helpful small animations and transitions.

With Tailwind, it's easy to prototype, iterate, and customize your display, use prefixes to specify behavior, change defaults, add new behavior, and integrate with legacy CSS.

Use Tailwind to make extraordinary web designs without extraordinary effort.

What You Need:

This book is about Tailwind 3.0. You should have a basic knowledge of CSS and HTML.

Introduction

Many web developers underrate CSS.

Cascading Style Sheets (CSS) enable you to control the display of your information and enhance your page with visual effects. CSS is powerful. With CSS, you can do amazing things to the basic text and images on your site, and with a little bit of client-side code to add and remove CSS classes, you can do exponentially more.

CSS can also be hard to debug, complicated to write, and difficult to control.

But it doesn’t have to be.

Enter Tailwind. Tailwind CSS—a “utility-first” CSS framework to “rapidly build modern websites without ever leaving your HTML”—can make the CSS for your site easier to control and debug. In this book, you’ll dive into the Tailwind CSS framework, taking a look at its typography, page layout, responsive design, and more.

About This Book

In this book, you’re going to look at how to design web pages using Tailwind CSS version 3.0 and up. You’ll start with the typography of individual elements, and then you’ll get to “the box”—the rectangle of space each element takes up—and how to manipulate it. Once you have your elements in boxes, you’ll take a look at page layout with flexbox or grids.

After that, you’ll look at turning individual pages into full sites. You’ll also look at common site-wide page layouts, managing a design on different screen sizes, and handling a site-wide amount of styles and CSS.

Tailwind has been evolving pretty quickly, so there’s a good chance new features have been added since I wrote this. The Tailwind documentation includes pages for release notes and upgrade guides. (Sorry, the release notes’ URLs change with each release, but they’re linked from the main Tailwind documentation.) Check those out for the latest changes.

Who Is This Book For?

To keep this book short and to the point, I’ve made some assumptions:

• I’m assuming you already know the basics of CSS syntax and concepts. This book focuses on Tailwind, not raw CSS. If you want to get better grounded in CSS and its quirks, you might want to try the zine Hell Yes! CSS! by Julia Evans.
• I’m assuming you’re able to access the Tailwind reference documentation. The Tailwind documentation is comprehensive and easy to navigate. This book isn’t going to be a complete reference on all of Tailwind’s features; instead, it’ll focus on the most common ones and how to use them successfully.

Table of Contents

1. Getting Started with Tailwind

2. Tailwind Basics

3. Typography

4. The Box

5. Page Layout

6. Animation

7. Responsive Design

8. Customizing Tailwind

About the Author

Noel Rappin is a Principal Developer at Table XI, and the host of the Tech Done Right podcast. Noel is the author of multiple technical books, including Rails 5 Test Prescriptions. Follow Noel on Twitter @noelrap, and online at noel.rappin.com.