Noel Rappin - Modern CSS with Tailwind

Copyright 2021 The Pragmatic Programmers, LLC. This book is licensed to the individual who purchased it. We don't copy-protect it because that would limit your ability to use it for your own purposes. Please don't break this trustyou can use this across all of your devices but please do not share this copy with other members of your team, with friends, or via file sharing services. Thanks.

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 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.

The Pragmatic Bookshelf is an agile publishing company. Were here because we want to improve the lives of developers. We do this by creating timely, practical titles, written by programmers for programmers.

Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://pragprog.com.

Our ebooks do not contain any Digital Restrictions Management, and have always been DRM-free. We pioneered the beta book concept, where you can purchase and read a book while its still being written, and provide feedback to the author to help make a better book for everyone. Free resources for all purchasers include source code downloads (if applicable), errata and discussion forums, all available on the book's home page at pragprog.com. Were here to make your life easier.

Want to keep up on our latest titles and announcements, and occasional special offers? Just create an account on pragprog.com (an email address and a password is all it takes) and select the checkbox to receive newsletters. You can also follow us on twitter as @pragprog.

If you buy directly from pragprog.com, you get ebooks in all available formats for one price. You can synch your ebooks amongst all your devices (including iPhone/iPad, Android, laptops, etc.) via Dropbox. You get free updates for the life of the edition. And, of course, you can always come back and re-download your books when needed. Ebooks bought from the Amazon Kindle store are subject to Amazon's polices. Limitations in Amazon's file format may cause ebooks to display differently on different devices. For more information, please see our FAQ at pragprog.com/#about-ebooks. To learn more about this book and access the free resources, go to https://pragprog.com/book/tailwind, the book's homepage.

Thanks for your continued support,

Andy Hunt
The Pragmatic Programmers

The team that produced this book includes: Dave Rankin (CEO) Janet Furlow (COO) Tammy Coron (Managing Editor) Katharine Dvorak (Development Editor) Corina Lebegioara (Copy Editor) Gilson Graphics (Layout) Andy Hunt and Dave Thomas (Founders)

For customer support, please contact .

For international rights, please contact .

This book was a surprise. I didnt 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. Weve 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 books structure didnt 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 Bork, 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.

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 doesnt have to be.

Enter Tailwind. Tailwind CSSa utility-first CSS framework for rapidly building custom designscan make the CSS for your site easier to control and debug. In this book, well dive into the Tailwind CSS framework, taking a look at its typography, page layout, responsive design, and more.

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:

But in Tailwind, youd use something more like this:

In the Tailwind version, each individual style of the buttonthe green background, the white text, the bold font, the padding, the rounded corners, and the text centeringgets its own class in the class list.

Now, if youre 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 thats your reaction, I get it. All I ask is that you give it a chance and see how you feel after youve tried it out.