Modern CSS with Tailwind: Flexible Styling Without the Fuss 1680508180, 9781680508185

Citation preview

Early praise for Modern CSS with Tailwind: Flexible Styling Without the Fuss This book is a great introduction to the Tailwind utility CSS framework. Having used Tailwind on a project for the first time after reading the book, it helped to prime knowledge I needed to use Tailwind successfully, and also served as a valuable reference guide. ➤ Kevin Murphy Software Developer I think this book is a wonderful resource and will give many readers the insight they need to be proficient with TailwindCSS. ➤ John Saltarelli Chief Technology Officer, Unit 5 Ventures, Inc.

We've left this page blank to make the page numbers the same in the electronic and paper books. We tried just leaving it out, but then people wrote us to ask about the missing pages. Anyway, Eddy the Gerbil wanted to say “hello.”

Modern CSS with Tailwind Flexible Styling Without the Fuss

Noel Rappin

The Pragmatic Bookshelf Raleigh, North Carolina

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf, PragProg and the linking g device are trademarks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. For our complete catalog of hands-on, practical, and Pragmatic content for software developers, please visit https://pragprog.com. The team that produced this book includes: CEO: Dave Rankin COO: Janet Furlow Managing Editor: Tammy Coron Development Editor: Katharine Dvorak Copy Editor: Corina Lebegioara Layout: Gilson Graphics Founders: Andy Hunt and Dave Thomas For sales, volume licensing, and support, please contact [email protected]. For international rights, please contact [email protected].

Copyright © 2021 The Pragmatic Programmers, LLC. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher. ISBN-13: 978-1-68050-818-5 Encoded using the finest acid-free high-entropy binary digits. Book version: P1.0—May 2021

Contents Acknowledgments Introduction . .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

vii ix

1.

Getting Started with Tailwind . Installing Tailwind Quick Start

.

.

.

.

.

.

.

.

1 1 3

2.

Tailwind Basics Utilities Preflight Duplication Prefixes CSS Units

.

.

.

.

.

.

.

.

9 10 11 12 15 16

3.

Typography . . . Size and Shape Color and Opacity Alignment and Spacing Lists Typography Plugin Tailwind Forms

.

.

.

.

.

.

.

.

.

.

17 17 19 21 22 22 23

4.

The Box . . . . Can You See the Box? What’s in the Box? Padding and Margins Borders Background Color Background Images Height and Width

.

.

.

.

.

.

.

.

.

.

25 25 26 27 28 31 33 35

.

. .

.

.

.

Contents

• vi

5.

Page Layout . . . Containers Floats and Clears Position and Z-Index Tables Grids Flexbox Box Alignment

.

.

.

.

.

.

.

.

.

.

37 37 38 39 39 39 43 47

6.

Animation . . . . Helpful Small Animations Transitions Transformation Other Appearance Things

.

.

.

.

.

.

.

.

.

49 49 50 51 52

7.

Responsive Design . . . . . . Tailwind Screen Widths and Breakpoints Hide Based on Size Fewer Grid Columns on Small Devices Flex on Larger Devices

.

.

.

.

.

53 53 55 56 56

8.

Customizing Tailwind . . . Configuration File Basics Change Default Values Change Generated Classes Configure Variant Prefixes Integrate with Existing CSS Access Tailwind from JavaScript Purge CSS The End

.

.

.

.

.

59 60 60 67 68 70 70 71 72

.

.

Acknowledgments This book was a surprise. I didn’t intend to write it, but I got excited about the subject and had an unusual window of time to get this done. Thanks to Katharine Dvorak, who edited this book and has now edited several of my books. Katie was very supportive of this from my initial suggestion. We’ve been working together for years now, and her observations have been a tremendous help in structuring and planning this book. Dave Rankin at The Pragmatic Bookshelf was enthusiastic about this book when I first suggested it, and then he was flexible in approach when the original plan for the book’s structure didn’t seem like the best way to present the material. Thanks to Adam Wathan for creating Tailwind and to all the people who have contributed to its development. Gary Bernhardt and Dave Copeland both in different ways helped me see the value in utility-based CSS, and Aly Fluckey showed me that CSS could be beautiful. This book was reviewed by Erik Benoist, Matouš Borák, Kevin Murphy, John Saltarelli, and Jonathan Yeong. Thanks for their input and advice. The book is better because of it. Thanks always to my family. Amit and Elliot continue to be amazing and delightful. Erin makes everything I do easier, better, and more fun.

report erratum • discuss

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, as a quick glance at a site like http://www.csszengarden.com shows. 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 for rapidly building custom designs”1—can make the CSS for your site easier to control and debug. In this book, we’ll dive into the Tailwind CSS framework, taking a look at its typography, page layout, responsive design, and more.

Why Tailwind? Bootstrap or similar CSS frameworks provide CSS classes whose names describe how they are to be used, like “button” or “card” or “nav.” These classes tend to define a number of CSS styles together. Tailwind is different. Nearly all of the basic Tailwind classes are thin wrappers around a single CSS style setting, like using “m-4” to provide a “margin: 1rem” or “text-lg” to change the text size to “font-size: 1.125rem.” For example, a button in the Bulma framework would be styled like this: Click Me

1.

https://tailwindcss.com

report erratum • discuss

Introduction

•x

But in Tailwind, you’d use something more like this:

Click Me

In the Tailwind version, each individual style of the button—the green background, the white text, the bold font, the padding, the rounded corners, and the text centering—gets its own class in the class list. Now, if you’re like me, your first reaction to seeing that list of classes may be something along the lines of, and I quote, “ugh.” It certainly takes some time to get used to having all those small class names in the HTML markup. If that’s your reaction, I get it. All I ask is that you give it a chance and see how you feel after you’ve tried it out. The Tailwind code is extremely explicit and makes it possible to understand the display simply by looking at the HTML markup. It works well with the Stimulus framework’s aesthetic of putting a bunch of JavaScript relationships in the markup. If you want to package this collection of classes for reuse, Tailwind provides an @apply directive that you can use to build new CSS classes out of Tailwind’s utilities, or you can use the features of the web programming language and framework to manage the duplication. One advantage of the Tailwind setup is that it’s extremely easy to prototype, iterate, and customize the display. If you want to change the horizontal padding on a button, you can do so by changing px-4 to, say, px-6. You don’t need to guess about the scope of the change or what other parts of your page might be affected. You can keep making small changes until you get the display just right. And you don’t need to continually come up with names for CSS property combinations that might not be reused. Another advantage is that Tailwind offers a set of prefixes that allow you to specify behavior in particular cases. For example, you could add a class such as hover: bg-blue-500, where the hover prefix would apply the class and change the background color when the user hovers over the button. Tailwind also provides a set of prefixes that allow you to specify different behaviors at different screen sizes. These prefixes are one reason why using a Tailwind class like bg-blue-500 is better than using the document object model (DOM) style attribute directly, as in style="background-color: #cdcdcd". And last but not least, a Tailwind app requires less CSS to be written, with most of the design coming from the composition of Tailwind utilities. This means you spend less time naming CSS and managing global CSS, allowing

report erratum • discuss

About This Book

• xi

you to spend more effort on the actual display of your site. Tailwind makes it easy to make incremental changes, see the results, and understand the scope of your changes, which makes it especially useful when prototyping a new site.

About This Book In this book, we’re going to look at how to design web pages using Tailwind CSS. We’ll start with the typography of individual elements, and then we’ll get to “the box”—the rectangle of space each element takes up—and how to manipulate it. Once we have our elements in boxes, we’ll take a look at page layout with flexbox or grids. After that, we’ll look at turning individual pages into full sites. We’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. This book uses Tailwind 2.0. 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 at https://tailwindcss.com/docs.) Check those out for the latest changes.

Who This Book Is For To keep this book short and right 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.2 • I’m assuming you’re able to access the Tailwind reference documentation.3 The Tailwind documentation is very complete 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.

2. 3.

https://wizardzines.com/zines/css https://tailwindcss.com/docs

report erratum • discuss

Introduction

• xii

Running the Sample App The sample code we’ll use in the book for our application is primarily HTML. I’ve given you two ways to load the HTML: a Rails app and a simple app built with React Create App. To run the sample code, you need to download it from the book’s page on the Pragmatic Bookshelf website.4 For the Rails version, which is in the main directory, you need to have Ruby 3.0 and SQLite installed on your system. Running bin/setup in the sample code directory will load the Rails-specific parts, and then rails server will load the application itself—you should be able to access the site at http://localhost:3000. The samples are at http://localhost:3000/intro, http://localhost:3000/box, and http://localhost:3000/page. For the React version, which is in the react_create_app directory, you need to have npm and yarn installed. With those in place, yarn install will install all the needed modules, and yarn start will start the development server. All the samples can be accessed from http://localhost:3000, and you can see the basic HTML inside the component at src/App.js. Please note that there’s no real application here. You should be able to start from scratch and install Tailwind in a blank project of the build tool of your choice and follow along with the HTML examples. Now, let’s install Tailwind and get started.

4.

https://www.pragprog.com/titles/tailwind

report erratum • discuss

CHAPTER 1

Getting Started with Tailwind Before we go deep into Tailwind’s utilities, let’s take a quick tour to get a feel for how Tailwind CSS works. First, we’ll install Tailwind and then try to build a small component on our page.

Installing Tailwind Tailwind is both a set of utility classes and a CSS preprocessor that generates those CSS classes and allows the use of additional CSS tools like the @apply directive. We need to install the framework itself and also patch it into our CSS processing tool chain.

Installing the Sample Code This book has a small amount of sample code associated with it. It’s mostly HTML markup that builds the Tailwind images throughout. If you want to run it on your own, you have two options available: a React version and a Rails version. For most of you, the code found in the react-create-app folder may be the easiest to run. This code runs a small app created with react-create-app and is adjusted to deal with Tailwind using the instructions at https://tailwindcss.com/docs/guides/ create-react-app. The code also adds all the sample HTML to the App.js file. To run it with Node and either npm or Yarn installed, go into the directory, run npm install or yarn install, then run npm start or yarn start, and then enter http://localhost:3000 in a browser. If you’re comfortable setting up a Rails project and you’re on a MacOS or Linux machine, a Rails version of the sample app is available in the main directory. You need Ruby and SQLite installed for this to work. You can install the app by going to the main directory, running bin/setup, and then running rails

report erratum • discuss

Chapter 1. Getting Started with Tailwind

•2

server and entering http://localhost:3000/intro, http://localhost:3000/box, and http://localhost:3000/page in a browser.

Because the sample app is quite small, you can easily pull the HTML markup from the App.js file in the React version or the app/views/home directory in the Rails version and add it to any kind of server setup you’ve installed Tailwind into.

Adding Tailwind to Your App The process of installing Tailwind depends on how your project is managing client-side assets. As such, a complete guide to installing Tailwind is outside the scope of this book and probably would quickly become outdated. The golden source is the Tailwind documentation itself.1 Please check there if you have difficulty installing Tailwind in your specific setup. This section gives a general overview of how Tailwind is installed for most projects. The Tailwind developers recommend that Tailwind be installed in most projects as a plugin for PostCSS, which is a general CSS processing tool.2 Use your package manager to install tailwindcss, postcss, and autoprefixer: $ yarn add tailwindcss postcss autoprefixer

Next, go into your PostCSS configuration file, which for Rails is postcss.config.js, but it might also be .postcssrc in other setups. You need to add tailwindcss and autoprefixer as plugins: main/postcss.config.js module.exports = { plugins: [ require('postcss-import'), require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009' }, stage: 3 }), require('tailwindcss'), require('autoprefixer') ] }

Next, run the following command to create a Tailwind configuration file: $ npx tailwind init

1. 2.

https://tailwindcss.com/docs/installation https://postcss.org

report erratum • discuss

Quick Start

•3

This creates the following empty configuration file: main/tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Technically, you don’t need the configuration file—at least, not yet—but it’s not going to hurt, and if you’re using Visual Studio Code, the Tailwind extension uses the configuration file to determine if the project uses Tailwind. Other integrated development environments (IDEs) and editors also have various plugins and other forms of Tailwind support. Finally, we need to add Tailwind to our CSS files. In general, if you’re using webpack, you’d put the following lines in a CSS file that’s being imported. In Rails, that file is app/javascript/packs/application.css by default, and we want it to look like this: main/app/javascript/packs/application.scss @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

Here we’re importing Tailwind in three layers. The base contains Tailwind’s reset classes, components is a small layer containing Tailwind’s component class, and most of what I’ll be talking about in this book is in the utilities layer. The layers become important as you customize Tailwind—if you want to compose your classes with Tailwind prefixes, they need to be defined before the utilities layer. Other build systems might use @tailwind instead of @install as the command (check the official docs as a final source). That should get you started. Let’s now see what Tailwind can do.

Quick Start We’ll quickly run through styling a hero segment for a sample page for a concert series called NorthBy. The sample page in the code shows all the versions one after the other. This is only a page in the public HTML of our

report erratum • discuss

Chapter 1. Getting Started with Tailwind

•4

server app, so there’s no server-side information needed to explain this. (If you’re running the sample code, the page should be visible at http://localhost/3000.) Here’s our first version: main/app/views/home/intro.html.erb Welcome to NorthBy

You should see no styling applied to the text at all, not even the normal size and bold styling you’d usually associate with an HTML h1 tag. This is a good test of whether Tailwind is installed. If you see any styling applied to the text, then Tailwind isn’t loading and you should walk through the installation steps again. Let’s go back and forth between the code and the view to start adding features here with Tailwind. I’m not going to explore the syntax or other options in depth. All I want is to give a sense of what it’s like to work with Tailwind as best as I can in a book format. And, I have to add up front that I’m not a designer. Here’s a first pass at getting a basic layout with text, subtext, and a logo: main/app/views/home/intro.html.erb



Welcome to NorthBy A premium in sight and sound Learn More

The image_pack_tag method is a Rails and Webpacker thing. Your build system likely has a different way of accessing the URL of a file. For example, JavaScript files using webpack can usually import the file as though it was a module and use the imported value as the URL.

report erratum • discuss

Quick Start

•5

This code gives us the following result:

This isn’t too different from our first version. There’s still no styling applied to the text, and there’s no spacing or anything. Let’s add more changes. We can center the text, put a little bit of distance between the two parts, vertically center the text against the logo, and put the logo on the right. The Tailwind classes I’m using do a pretty good job of representing my intent: main/app/views/home/intro.html.erb



Welcome to NorthBy A premium in sight and sound Learn More

We’ve added classes here. The outer div now has two Tailwind classes: flex justify-center. The image has another two classes, mx-4 order-last, and the text block also has mx-4 self-center. The mx-4 classes specify horizontal margin, while the rest of the classes all deal with layout using the CSS flexbox structure, which we’ll look at later in Flexbox, on page 43. Now, let’s go after that text. Let’s make the header big, the subhead less big, and all the lines centered. And let’s give the whole thing a background:

report erratum • discuss

Chapter 1. Getting Started with Tailwind

•6

main/app/views/home/intro.html.erb



Welcome to NorthBy

A premium in sight and sound

Learn More

This adds a new class to the outer div, bg-gray-300, which specifies a background color. We’ve added a bunch of classes to the text elements, including a textcenter class surrounding them. The title element is now marked with text-6xl font-bold text-blue-700, which specifies text size, font weight, and color. The subhead is smaller, less bold, and a lighter shade of blue: text-3xl font-semibold textblue-300.

Next, let’s make the button look more like a button, realign the image, and while we’re at it, make the image rounder, too: main/app/views/home/intro.html.erb



Welcome to NorthBy

A premium in sight and sound

Learn More



report erratum • discuss

Quick Start

•7

The image tag now has a class of rounded-full, which makes the whole thing appear in a circle (admittedly quite a subtle effect on this image). The button has grown a lot of classes: my-4 px-4 py-2 specifies a vertical margin and horizontal and vertical padding; border-2 border-black rounded-lg specifies the size, color, and shape of the border; and text-white bg-blue-900 gives us the text and background colors:

Not too bad to start. In each step we were able to incrementally change the display of the code by adding more Tailwind classes to the markup, ending up with a pretty elaborate, if still not finished, design. And that’s only the beginning. We can make this logo look better on smaller screens, we can make the background a gradient (or we can make the text color a gradient), and on and on. A key point here that’s hard to get across in print: this is fun. It’s easy to make the incremental changes, see the results, and understand the scope of your changes. Yes, you’re seeing snapshots of a process, but the process didn’t involve us putting a Tailwind class in and being surprised that it affected something on the page we weren’t expecting. Now, let’s look at how Tailwind works and start with some of the basics.

report erratum • discuss

CHAPTER 2

Tailwind Basics Tailwind seems like a counter-intuitive solution to the problem of managing CSS for a complex site. Tailwind is made up of many, many small utility CSS class names, most of which set one specific CSS property to one specific value. The preferred way to get complex behavior in Tailwind is to compose multiple CSS classes together on the HTML element. This goes against a lot of CSS naming conventions that have been developed over the years. Many CSS frameworks and naming conventions suggest using names that reflect the semantic meaning of the element on the page—names like button, nav-bar, or menu-item. Tailwind classes aren’t semantic at all. They’re all utility classes, meaning a Tailwind class represents a specific element on a page, like font-bold for text formatting or m-6 for margin. Many CSS frameworks include utility classes but consider the semantic class names more important. Using Tailwind and utility classes suggests a lot of duplication, as Tailwind utility classes are often repeated on multiple DOM elements. Despite the potential duplication, Tailwind can work on larger sites. When you apply a Tailwind class at any particular point, both the nature of the styling change and the scope of that change are exceptionally clear. Tailwind’s short names may seem cryptic at first, but the naming patterns are strong and become easier to read. Also, Tailwind’s prefixes make it easy to define special behavior in the HTML, such as hover and responsive behaviors on differently sized screens. The prefixes also make what’s going on clearer from just the HTML. Because the Tailwind classes are endlessly combinable, you write far less external CSS code in Tailwind than you might in another CSS style. You don’t need to name as many custom CSS classes when using Tailwind. And because

report erratum • discuss

Chapter 2. Tailwind Basics

• 10

the Tailwind changes are so closely tied to the HTML markup, it’s easier to predict the result of making a change. Tailwind allows you to extract a own CSS class from a list of Tailwind utilities and to give it a more semantic name. Rather than create your own classes, Tailwind recommends taking advantage of the same tools you use in your front-end stack to reduce duplication. For example, rather than create a separate CSS class for button styles, Tailwind suggests that you create a reusable React component or a Rails partial or helper method, and you define the CSS styles only once for that reusable item. Tailwind is made up of a few different pieces: the utility classes that we’ll spend the bulk of our time working with in this book, a reset stylesheet, and functions that make working with Tailwind easier.

Utilities Tailwind’s utility classes are the most important part of Tailwind to understand. Here’s how they work and how I’ll talk about them in the book. Tailwind is made up of hundreds and hundreds of utility classes, most of which set the value of a single CSS property. For example, the .font-bold Tailwind utility class is an alias for the CSS property, font-weight: 700. You’d use that utility in an HTML element as part of the class attribute, as in class=font-bold. The Tailwind system generates a set of utility CSS classes based on the Tailwind configuration file, and you have a great deal of freedom over which classes are included and even the names Tailwind uses. Unless I clearly say otherwise, in this book I’ll be talking about the default set of classes generated by a minimal configuration, and in Chapter 8, Customizing Tailwind, on page 59, I’ll talk about how to adjust which classes are available. The Leading Dot

When you see Tailwind utilities outside their context in an HTML element, sometimes they may be written with a leading dot to indicate that they’re referring to a CSS class, as you saw earlier with .font-bold. When they’re used in HTML, though, the leading dot isn’t used. In this book, I’ll use the leading dot to indicate a Tailwind utility. Tailwind utilities often come in families with a common pattern of beginnings or endings. When I talk about those, I’ll use syntax like this: .text-{size}, to indicate a family of utilities that include .text-xs, .text-sm, .text-xl, and so on.

report erratum • discuss

Preflight

• 11

When this syntax is used, the dash is only needed if the part in braces is there, so you’ll see text-sm but also text. The variable part of the utility name doesn’t have to be at the end of the name. For example, in margin sizing utilities, .m{direction}-{size} indicates a family of utilities such as .m-0 or .mt-10. As you’ll see, the variable part of utilities is often consistent across different parts of Tailwind. For example, the options for {size} and {direction} in the margin utilities are shared by the padding utilities and several other utility families.

Preflight When you install Tailwind, you need to import three different files with the commands: @tailwind base, @tailwind components, and @tailwind utilities. Each of these files contains a different set of CSS rules. (In the webpack-based installation, you import with @import as the command name rather than @tailwind.) @tailwind base contains Tailwind’s reset stylesheet called Preflight. A reset

stylesheet is a restyling of all the base HTML elements to a minimal set of styling properties. Without a reset stylesheet, each browser defines its own default set of style properties for how to render individual HTML elements that don’t have further CSS properties. Using a reset stylesheet gives our application control over this baseline, eliminating differences between browsers and providing a more minimal backdrop into which we insert our own custom styling. You can see the full set of reset styles Tailwind uses by looking at the file, node_modules/tailwindcss/dist/base.css. Essentially, though, Preflight does a few things: • It overrides all styling from headers, so, say, an h1 is visually identical to the base text. • It removes styling from ul and ol lists, resulting in no bullets by default, which is an ironic thing to mention in a bulleted list. • It sets all margins to zero for elements that would normally have margins. • It sets all borders to a 0-pixel width, solid, and the defined border color by default. • It sets images and image-like objects to display: block rather than display: inline, meaning they’ll set themselves up as separate paragraphs (as if they were div tags), rather than inline (as if they were span tags). If you only use the Preflight styles, you’ll get a pretty boring page. But that’s the point. Using Preflight ensures that any change to the display properties are affirmatively and explicitly added by us.

report erratum • discuss

Chapter 2. Tailwind Basics

• 12

The @tailwind components file is quite small, and it only consists of the definitions of the container CSS classes, which are usually used at the top level of a page to define the box that the whole page is drawn in. I’ll talk about this more in Chapter 5, Page Layout, on page 37. The bulk of what’s considered to be Tailwind is in the @tailwind utilities file, which defines all the utilities and their prefixed variants. I’ll spend most of this book describing the contents of this file.

Duplication A common concern when looking at Tailwind and the long sets of class lists you often need to accomplish your design goals is how to manage duplication. That is, if you need to type class="text-6xl font-bold text-blue-700" for every h1, as we did in the Introduction, on page ix, isn’t that a lot of typing that needs to be consistent every time you need an h1? What if your h1 design changes?

Managing Duplication in Code Tailwind does have a way to manage CSS class list duplication, but you’re also encouraged to see the duplication issue as part of your larger code setup, not only as a CSS issue. No matter what tool you’re using to build your HTML markup, it likely has component or function mechanisms you’re already using to reduce code duplication. When using Tailwind, it’s a great idea to see your CSS class lists as part of that code. For example, if you’re using React, you have components. Many other clientside frameworks offer components as well. Rather than manage duplication in CSS, you could create React components with the common CSS: export const Header = ({children}) => { return (

{children}

) } export const SubHeader = ({children}) => { return (

{children}

) }

report erratum • discuss

Duplication

• 13

export const SubSubHeader = ({children}) => { return (

{children}

) }

Then you’d use this: Cool Text Less Cool Text Kind of boring text

In plain JavaScript, you could also create a function that returns the list of Tailwind classes: const title = () => { return "text-6xl font-bold text-blue-700" }

And in React you’d use this: Cool Text

In Ruby on Rails, you can similarly define helper methods for lists of Tailwind classes: def title "text-6xl font-bold text-blue-700" end

Or you can define an ERB partial with a name like app/views/partials/_title.erb:



The yield is important here because it allows you to call the partial with a block containing children. The syntax is a little weird:

Whatever

The inside of the block contains arbitrary ERB code that’s inserted in place of the yield. If you don’t like any of these syntax options and would rather have a CSSbased solution for duplication, Tailwind provides a CSS directive called @apply and a directive called @layer, which we’ll take a look at next.

report erratum • discuss

Chapter 2. Tailwind Basics

• 14

Using @apply for Duplication The @apply directive lets you use Tailwind classes in the definition of other CSS selectors. So we can redefine our header classes in CSS like this: @layer components { .title { @apply text-6xl font-bold } .subtitle { @apply text-4xl font-semibold } .subsubtitle { @apply text-lg font-medium italic } }

And you can then use those like any other CSS classes: Title

The @layer directive can either be base, components, or utilities. As far as the browser is concerned, if you use @layer, the selectors are defined as part of whatever layer you declare, no matter where in your CSS files the selector definitions are actually located. Using @layer components defines the selector as part of the components and before the utilities. This means if you combine one of our own definitions with a Tailwind utility, the utility wins, which is what we want. So we can define, say, an extra big title with: Title

To understand why @layer is important, you need to know a general principle of CSS: all else being equal, if two CSS classes are trying to adjust the same underlying properly, the one defined last wins. (If you’re familiar with CSS, you know that there’s also a principle of specificity, where the most specific definition wins, but because all the Tailwind utilities have the same specificity, that’s not an issue here.) In a CSS file, if you have two definitions for the same CSS selector that define the same property, the selector defined later in the file wins. In Tailwind, if you have two utility classes that define the same property, the one that’s later in the list wins, so class="text-xl text-2xl" will give you text that’s sized 2xl. By defining a custom selector inside a layer, the selector is loaded at the end of that layer and before the next layer. This has some consequences for how custom CSS might interact with other Tailwind utilities or CSS. For example, we can make our definitions part of the HTML by using @apply on tags, not class selectors. In this case, we put the definition in the base layer:

report erratum • discuss

Prefixes @layer h1 { h2 { h3 { }

• 15

base { @apply text-4xl font-bold } @apply text-2xl font-semibold } @apply text-lg font-medium italic }

Here, we’re redefining the h1, h2, and h3 elements directly, so we can use this: Title

By being in the base layer, these definitions are before all utilities, so that behaves as you’d want, with the 6xl taking precedence. If the h1 was defined in the utilities layer, then the h1 would have precedence because it’d be defined later than the text-6xl. And because we’ve moved the layer to base, Tailwind will consider this part of the Preflight styles and define it before any components. Again, this placement allows you to mix tags, components, and utilities as expected. This is all quite useful, and it allows you to effectively build up your own framework using Tailwind utilities as building blocks. But it helps to realize that you’re, in fact, building up a framework and taking upon yourself all the attendant naming and maintenance responsibilities.

Prefixes We have to deal with one more special feature before we get to more utility classes. It’s common to want objects to display differently when the user drags a mouse over them, which corresponds to the CSS pseudo-class, hover. In Tailwind, you can define most CSS pseudo-classes by adding prefixes to other tailwind utilities. If you want an anchor tag to have an underline when the mouse goes over it, you could do this: Click me

That’s compact, reasonably straightforward to read, and defined along with the HTML so it’s clear when it applies. You can use hover: with any Tailwind utility. As you’ll see in Chapter 7, Responsive Design, on page 53, Tailwind also uses prefixes to allow different utilities to be invoked based on the width of the screen, so you could write class="sm:m-2 lg:m-4, and your element would grow a bigger margin as the screen gets wider. There’s one gotcha: while you can write a hover: prefix to any Tailwind utility, by default, Tailwind only generates the prefixed utilities for certain CSS properties. Happily for us, text-decoration, which covers underlining, is one of

report erratum • discuss

Chapter 2. Tailwind Basics

• 16

those. You’ll see in Chapter 8, Customizing Tailwind, on page 59 how to turn on the prefixes for other properties and for other prefixes. Tailwind defines over a dozen,1 but you have to explicitly turn on the ones you need. You can even use the prefixes in conjunction with @apply. So @apply hover:underline is a legal way to define a new CSS class.

CSS Units Most values in CSS that define length or width can take a number with a unit. Height and width definitions can also take a percentage. CSS defines two kinds of units: absolute and relative. Absolute units are defined in terms of real world units, so you could define a width as, say, 5in for inches. More commonly, you’ll see px for pixels. In the long-ago time, a px represented one actual display pixel, but computer and phone displays are much denser now, and a CSS pixel is defined as 1/96 of an inch. (You know, the commonly used split of an inch into 96ths.) For fonts you’ll often see points, as in font-size: 20pt. A point is 1/72 of an inch, which is actually a measurement that well predates computers. In CSS, you’re more likely to see relative units, of which the most common is em, which is the size of the element, as in width: 10em. It’s quite common to define font size in relative terms, but because font-size: 1.5em would be a circular definition, for the purposes of typographical properties, em refers to the fontsize of the parent, rather than the element being matched. If that’s confusing—which it is—it’s also unstable, because changing a font size can have weird downstream effects on anything defined with an em. A more stable alternative is rem, which is the font size of the root element and which defaults to 16 points in the Tailwind reset system. Most distances in Tailwind are either defined as a percentage or in terms of rem. Now, let’s look at what Tailwind gives us for our typographic styling needs.

1.

https://tailwindcss.com/docs/hover-focus-and-other-states

report erratum • discuss

CHAPTER 3

Typography Odds are you’re using your web application to display text to a reader. So much of the design of a web site is about the placement, size, weight, and layout of text. In this chapter, we’ll look at how Tailwind lets you control the display of text.

Size and Shape Perhaps the first thing you notice about text on a web page is its size and styling. Tailwind provides a series of utilities for each. The effective default for text size is the .text-base class, which defines the CSS properties font-size: 1rem and line-height: 1.5rem, meaning the font size for .text-base is the same as the font size for the root element of your page, and the line height is 1.5 times that size. Tailwind provides a family of utilities, .text-{size}, which includes two smaller steps, 10 larger ones, and the base class, giving us 13 sizes overall. Each step defines a font size and a line height, as listed in the table on page 18. This is our first encounter with one of Tailwind’s explicit design goals, which is to provide a consistent set of steps for a potentially infinite set of values. With the .text-{size} family of utilities, Tailwind makes it easy to keep sizing and spacing consistent throughout the site. Font styling—your basic bold, italic, underline—is covered by a few different CSS properties, but from Tailwind’s perspective, these styles are just utility classes: .italic and .not-italic, and .underline and .no-underline. You’d only use .notitalic and .no-underline if you want the text to have different characteristics under different states. This is usually tied to responsive behavior at different screen sizes, which we’ll look at later in Chapter 7, Responsive Design, on page 53.

report erratum • discuss

Chapter 3. Typography

Class

Font Size

Line Height

.text-xs

0.75rem

1rem

.text-sm

0.875rem 1.25rem

.text-base

1rem

.text-lg

1.125rem 1.75rem

.text-xl

1.25rem

1.75rem

.text-2xl

1.5rem

2rem

.text-3xl

1.875rem 2.25rem

.text-4xl

2.25rem

2.5rem

.text-5xl

3rem

1

.text-6xl

3.75rem

1

.text-7xl

4.5rem

1

.text-8xl

6rem

1

.text-9xl

8rem

1

• 18

1.5rem

For bold fonts, CSS provides nine grades of boldness from 100 to 900, with normal text being 400. Tailwind provides nine different utility classes, one for each grade: .font-hairline .font-thin .font-light .font-normal .font-medium .font-semibold .font-bold .font-extrabold .font-black

Not all fonts will have distinct lettering at all weights, but commonly used web fonts should. I don’t know why Tailwind doesn’t use .font-weight-100, which would seem to be more consistent with other naming. You can get it to do so by changing the configuration, though (see Chapter 8, Customizing Tailwind, on page 59). You might also want to ensure the case of the text. For example, you might want a header to be all uppercase. Tailwind provides four utility classes for case, all of which wrap the CSS text-transform property to provide the behavior the utility name describes:

report erratum • discuss

Color and Opacity

• 19

.uppercase .lowercase .capitalize .normal-case

With these in hand, we can start to build up styles for our actual headers. This is, more or less, the default styling for a popular CSS framework’s title and subtitle defaults: Title Subtitle

This gives us a title that’s 1.875rem (30-point type) with a line height of 2.5rem (36 points) and semibold, and a subtitle that’s 1.25rem (20 points) at normal weight and a line height of 1.75rem. I often like my headers to be a little more attention-grabbing, so I might do something like this: Title Subtitle Header

This gives us a slightly bolder and bigger title and subtitle, plus a third-level header that’s a little bit bigger than regular text, a little bit bolder, and also italic. I might also add some spacing around the headers, which we’ll look at how to do in Chapter 4, The Box, on page 25. Remember that Tailwind’s reset styles make it so that h1, h2, and so on have no default styling, so using those tags with Tailwind is a semantic note that the text is a header of some kind. It has no stylistic effect. Right now, there’s a good chance you’re asking whether I’m seriously telling you it’s a good idea to have to type text-lg font-medium italic every time you want a header. That’s a lot of typing, it’s on the cryptic side, and it’s a lot of typing. See Duplication, on page 12 for ideas on how to manage duplication in Tailwind.

Color and Opacity Tailwind lets you adjust the color and opacity of text. Let’s talk about color first. Tailwind offers 90-some-odd color utilities out of the box. Two of them are special: .text-transparent and .text-current. The text-transparent class makes the text transparent, meaning you can see the background color through it. You can sometimes use this class for effect, especially with bg-clip-text, which makes the background match the shape of the text. You can use .text-current as a reset if a different setting changes the color; it sets to the

report erratum • discuss

Chapter 3. Typography

• 20

color of the parent element. Then you have .text-black, which sets the color to #000000, and .text-white, which sets the color to #ffffff. We then get combined classes: .text-{color}-{level}. Tailwind sets eight different colors by default at 10 different levels, from the lightest at 50 and then every multiple of 100 from 100 to the darkest at 900. These are the eight default colors: Blue Gray Green Indigo Pink Purple Red Yellow Any combination of color and level can be used, like .text-yellow-400 or .text-blue200. I’m not going to put the exact RGB hex values for all 80 combinations, but you can see them online in the Tailwind documentation.1 The Tailwind documentation describes the levels as “expertly-crafted,” which I take to mean they aren’t automatically calculated. Tailwind defines color breakdowns from light to dark for 22 different colors, and you can mix in some or all of the non-default 14, as you’ll see in Chapter 8, Customizing Tailwind, on page 59. You can count on the default colors getting darker as the numbers increase. You can take advantage of this for some subtle effects:

Hi

This gives you lighter gray text that darkens when the user hovers over it. You can even turn this into a function that returns a string of classes. Here’s the JavaScript version: const hoverDarker = (color) => { return `text-${color}-300 hover:text-${color}-700` }

Now, let’s talk about opacity. Changing the opacity makes colors lighter or darker. Tailwind gives you .text-opacity-{level}. The list of opacity levels is a little weird—it’s every multiple of 10 between 0 and 100, plus 5, 25, 75, and 95. 1.

https://tailwindcss.com/docs/customizing-colors#default-color-palette

report erratum • discuss

Alignment and Spacing

• 21

The number represents a percentage, for example, .text-opacity-20 for 20% or .text-opacity-95 for 95%. Because of the way the underlying CSS works, the text color must be defined on the same element as the opacity. Specifying the color on a parent element and then specifying the opacity in the child element won’t work. (But using .text-current will work without adjusting the color.) Color Patterns

You’ll see this pattern a few different times in Tailwind: a class name made up of a prefix followed by the same set of color and opacity options. You’ll see this for borders (.border-), background colors (.bg-), and many other color-based CSS properties. Later, in Chapter 8, Customizing Tailwind, on page 59, you’ll see that colors can be customized in one place, and the change will apply to all of the properties that use colors.

Alignment and Spacing Several Tailwind classes are used to specify the horizontal alignment of text: .text-left .text-center .text-right .text-justify

They all change the CSS text-align property. The exact bounds of the alignment depend on the box the text is in. (I’ll talk more about that in Chapter 4, The Box, on page 25.) The CSS property for vertical alignment is vertical-align, and these are the Tailwind classes: .align-baseline .align-top .align-middle .align-bottom .align-text-top .align-text-bottom

As with the horizontal alignment, exact positioning depends on the text box. For line spacing, Tailwind has both a relative and an absolute option. The relative option starts with .leading-none, which makes the line height exactly

report erratum • discuss

Chapter 3. Typography

• 22

the size of the font. (“Leading” is the printing term for line height, and it rhymes with “wedding,” not “beading.”) That’s normally going to feel a little tightly packed, and Tailwind lets you separate the line height with the following classes in order from most closely packed to farthest apart: .leading-tight .leading-snug .leading-normal (1.5 times the font size, usually your default) .leading-relaxed .leading-loose

The absolute option is based on rem, meaning it’s derived from the root element size, not the size of the DOM element it’s attached to. You’ve got .leading-3 through .leading-10, which takes us from 0.75rem to 2.5rem in 0.25 increments. Next is the property that CSS calls letter-spacing and Tailwind calls tracking. You’ve got .tracking-normal, then two utilities for pushing the text closer together: .tracking-tight .tracking-tighter

Also, you have three utilities for making the letter spacing wider: .tracking-wide .tracking-wider .tracking-widest

These utilities can add nice effects on headers with big text.

Lists Tailwind includes two sets of classes to manage