iTranslated by AI
[PR] Publishing "Practical Introduction to Tailwind CSS" on January 26, 2024
This is likely to be almost the first[1] full-scale introductory book on Tailwind CSS among commercial technical books published in Japanese (and it's my first solo book!).
It is part of the relatively new "Engineer's Selection Series" label by Gijutsu-Hyoron-sha. Since the cover features a windmill, I would be happy if you called it the "Windmill Book (Fusha-bon)"!
Both physical and electronic versions will be released. Please purchase it from Amazon or other e-commerce sites.
Concepts and Structure
This book does not cover the basics of HTML or CSS itself.
The target audience is "developers who have already used CSS and have experienced the pain of CSS design (quoted from the preface)."
Beyond being an introduction to the Tailwind CSS framework, the concept aims to be an introduction to the philosophy of utility-first. There are 9 chapters in total, and almost every chapter revolves around the following three themes:
- What the utility-first philosophy is
- How to perform markup and component design according to utility-first
- What needs to be done to create a design system according to utility-first
At the time of writing, the latest version of Tailwind CSS was 3.3, but since it was announced that some major changes would be introduced in v3.4 and v3.5, I have covered those contents (based on the CHANGELOG before release).
To be honest, v3.4 was released just before the final proofreading, so some features might not be fully covered or explained in the main text (v3.5 was originally scheduled for release within the year, but at this rate, it looks like it won't come out. It is written as a future story in this book).
Most of the sample code in this book consists of either plain HTML or React (JSX). It's not like building a single "sample app"; rather, it's written primarily for markup examples and design explanations. As for Vue.js, I touch upon it briefly when dealing with headless components for Vue.js like Headless UI or Radix Vue.
Examples of using component libraries and examples of creating custom plugins (Chapter 7) are located in the following repository.
What This Book Covers and What It Doesn't
This book is an introduction to the utility-first philosophy. Conversely, this means the book follows a style where it either doesn't introduce practices or tools that don't contribute much to practicing utility-first, or treats them critically even if it does. For example, it is written with a fundamental stance of "don't use" @apply. After all, even the creator Adam Wathan said he probably wouldn't include it if he were creating Tailwind CSS today.
Because of this stance, there are cases where tools that are relatively well-known in the Tailwind CSS community do not appear in the explanations at all. In the main text of over 300 pages, for instance, daisyUI appears for only three lines in total, and famous tools like twin.macro or twind are not introduced.
Those who want someone to empathize with feelings like "I want to make it easier to read and write because there are too many classes" or "I just want to enjoy the benefit of writing shorter code" might feel slightly alienated by this book (though I intend to eventually guide such readers toward writing idiomatic Tailwind CSS code).
On the other hand, I introduce classnames, clsx, tailwind-merge, cva (class-variance-authority), and tailwind-variants relatively thoroughly. This is because these tools contribute to maintainability without sacrificing the strengths of utility classes. The stance of this book is basically to have you learn how to "tame" a large number of classes using these tools.
On the flip side, I try to explain as detailed as possible why certain features are meaningful in light of the utility-first philosophy, even if they seem strange at first glance. For example, this book spends about three pages defending the necessity of Arbitrary Values (things like w-[57px]). For details, please see Chapter 4.
Furthermore, when using @layer components or the plugin API's addComponents(), I avoid Bootstrap-like examples such as a .card class as much as possible, and instead provide explanations that help you feel "what abstract design patterns in CSS are actually like" (this is why examples derived from "Every Layout" are used frequently in the explanation of addComponents()). Please read Chapters 5 and 7 for more on this.
Finally, Chapter 6 covers component design theory based on the premise of using Tailwind CSS (this is the only part where the React flavor is relatively strong). This chapter explains things assuming "headless" libraries as much as possible, considering their affinity with Tailwind CSS. For example, significant space is dedicated to explaining Headless UI, Radix UI, React Aria, and shadcn-ui. This chapter can be read not only by those using Tailwind CSS in a project but also as a guide for those creating design systems on how to make technical selections.
As an Introductory Book for Design Systems
Tailwind CSS is designed to generate classes from themes in its configuration file, making it useful as a meta-framework for building design systems. In fact, I chose Tailwind CSS as one of the foundation technologies when creating a design system for my workplace (adopting it fully for a corporate design system back in 2020 was relatively early, I believe).
For this reason, this book can also be read as an implementation-oriented introduction to design systems. Rather, this book assumes that the ideal way to use Tailwind CSS is to actively customize the theme in collaboration with designers.
The default theme settings are certainly convenient, but they shouldn't be something designers are always forced to follow; I've tried to cover the topic of how to move away from them as much as possible. Even in Chapter 4, where classes are introduced, it's better to read it with the intent of understanding the pros and cons of the default theme rather than trying to memorize them (in my professional work, I rarely use the default colors or spacing of Tailwind CSS).
If you are a designer (who might not be well-versed in implementation) considering reading this book, I recommend reading Chapter 1, Chapter 2, and then Chapter 9. Chapter 9 discusses what kind of themes (or design tokens) designers should ideally set.
The book is written with an approach of presenting as many arguments and options as possible rather than pointing to a single "correct" answer, so it's best to read it with your own issues and product circumstances in mind. As a prerequisite, it would be ideal to grasp the characteristics of Tailwind CSS in Chapters 1 and 2 and use them as hints for how you might collaborate with your fellow engineers.
In addition, if you are in a position to consider implementing a design system into a long-running service, reading Chapter 8 is also recommended. Chapter 8 considers things to keep in mind when introducing Tailwind CSS to an existing project. While the talk is mainly implementation-focused, it will help you imagine what kind of renewal work might be needed as a team.
By the way, the opening part of Chapter 9 is scheduled to be published as an article on gihyo.jp (around the same time as the release). Since it explains the view of design systems held in this book, please check it out if you're interested.
Chapter 4 Is Just Exceptionally Thick
Chapter 4 of this book introduces the classes generated by Tailwind CSS's default theme (though it doesn't cover all of them). However, there are so many types of classes that Chapter 4 alone accounts for about 40% of the total pages in the book. While this is a quite unusual distribution, I hope you can see it as a result of dividing the chapters purely based on content.
The physical edition has an index printed on the edge (like the ones in dictionaries), so I recommend buying that version if you want to see the volume of each chapter from the side.
When I first started writing Chapter 4, I thought, "Since the content is almost the same as the official documentation, there probably isn't much to think about," but once I actually got into it, there was a lot to consider in terms of organization. This is because an author's view of CSS is strongly reflected in the order in which classes are explained and which classes are grouped together (for example, deciding that the z-index property and the isolation property should be explained back-to-back).
One thing I personally like is that the .sr-only class is explained immediately after the display and visibility properties. I feel that by placing it there, I was able to show the mindset that it should be used naturally as a method for showing or hiding elements, rather than isolating it in something like an "Accessibility" section.
So, that's what Chapter 4 is like, but you should probably think of this section as something like a dictionary or an illustrated guide. If you're reading the Kindle version, be careful not to get discouraged by trying to read it straight through from the beginning without knowing that.
Background and Acknowledgments
The reason I started writing this book was an introduction from @_yuheiy.
After @_yuheiy wrote a feature on Tailwind CSS for WEB+DB PRESS, he was unable to find the time to write an introductory book, and I was appointed to the task as someone who could write it instead. Thank you once again.
Also, this book was reviewed by the following people (in alphabetical order, titles omitted). I believe I was able to ask the strongest members imaginable to review a book on Tailwind CSS. I would like to express my gratitude to them once again as well.
Side Note
I am including some articles and scraps about the technology that supported this writing project as related links.
-
As of the date of writing, a search on Amazon.co.jp shows some self-published books or commercialized tech doujinshi that cover Tailwind CSS, but with various caveats, I think it's safe to say this is roughly the first in Japan (?). ↩︎
Discussion