How Tailwind CSS came to be feat. Adam Wathan

Summary

Tailwind CSS was born out of a side project involving a CSS framework, initially designed to streamline styling for a web app. Created by Adam Wathan and his business partner Steve Schoger, the framework evolved from personal utility classes into an open-source project after gaining attention from live-stream viewers. Initially built with Less, it was eventually rewritten in PostCSS to support greater customization. Launched in 2017, Tailwind CSS rapidly grew in popularity, becoming a dominant framework used in modern web development, revolutionizing how developers approach styling with utility-first design principles.

Takeaways

• 😀 Tailwind CSS was initially created as a side project during a brainstorming session between Adam Wathan and Steve Schoger.
• 😀 Adam Wathan was a big fan of Bootstrap but switched to writing his own CSS using Less for flexibility and control.
• 😀 While working on his first project, Digest, Adam began using utility classes for common styling needs like padding, margin, and flexbox.
• 😀 The utility-first approach Adam developed became more prominent and practical with every side project he worked on.
• 😀 Adam live-streamed the development of his next project, KiteTail, and viewers frequently asked about the CSS framework he was using, sparking the idea to open-source it.
• 😀 Jonathan Reinink, a friend of Adam's, wanted to try out the utility-first approach on his own SaaS app, further driving Adam's decision to refine and release the system.
• 😀 The name 'Tailwind' for the CSS framework was chosen because it reflected the idea of making development faster and more efficient.
• 😀 Initially, Tailwind was built using Less, but as the project grew, it became clear that Less was not suitable for the complexity of the framework.
• 😀 With advice from David Hemphill, Adam transitioned the Tailwind codebase to PostCSS, a tool that provided more maintainability and customization.
• 😀 The first official version of Tailwind CSS was released on Halloween night in 2017, and its popularity grew rapidly after that.

Q & A

What inspired the creation of Tailwind CSS?

Tailwind CSS was created almost by accident. The framework's initial inspiration came from a side project that Adam Wathan was working on, where he began using utility-first CSS classes for styling, driven by his frustration with Bootstrap's transition from Less to Sass.

How did Adam Wathan's previous experience with Bootstrap influence the creation of Tailwind CSS?

Adam had been a fan of Bootstrap, but when it switched from using Less to Sass, he wanted to continue using Less. This led him to develop his own utility-first CSS approach, which became the foundation of Tailwind CSS.

What role did Steve Schoger play in the development of Tailwind CSS?

Steve Schoger, Adam's business partner and long-time friend, played a key role in brainstorming and developing Tailwind CSS. He also contributed to the project's evolution as they worked together on various side projects, including the early iterations of Tailwind.

How did live streaming on Twitch and YouTube contribute to the growth of Tailwind CSS?

While live-streaming his development work, Adam received numerous questions from viewers about the CSS framework he was using. This sparked interest and led Adam to consider open-sourcing the framework, which ultimately played a significant role in its growth.

Who was Jonathan Reinink, and what was his involvement in Tailwind CSS?

Jonathan Reinink, a friend of Adam Wathan, was one of the first to try out Tailwind CSS when he needed to redesign his SaaS product. His feedback helped Adam refine the framework, making it more flexible and customizable for different use cases.

What was the original purpose of the utility classes in Tailwind CSS?

The utility classes in Tailwind CSS were originally created to make it easier to apply low-level styles, such as margin, padding, and flexbox, without the need for overly opinionated components like buttons or cards. This approach aimed to give developers greater control over their designs.

Why did Adam Wathan decide to open-source Tailwind CSS?

After receiving consistent questions from his live stream viewers about the CSS framework he was using, Adam realized that others might benefit from his utility-first approach. This led to the decision to open-source Tailwind CSS, making it available for developers worldwide.

What challenges did Adam face when initially building Tailwind CSS, and how did he overcome them?

Adam initially faced challenges with using Less for the framework, as it wasn't designed for the level of complexity he needed. The switch to PostCSS, after advice from David Hemphill, allowed for more maintainability and flexibility, solving the issues with Less and improving the framework.

How did the name 'Tailwind' come about, and why was it chosen for the framework?

The name 'Tailwind' was inspired by the idea of a tailwind in aviation, which helps a plane move faster. This name reflected the framework's goal of helping developers move faster and more efficiently in their work. It was a natural fit for a CSS framework aimed at speeding up development.

What was the significance of the release date for the first version of Tailwind CSS?

The first official release of Tailwind CSS took place on Halloween night in 2017. This marked a major milestone in the development of the framework, and since then, it has rapidly gained popularity and become one of the most widely used CSS frameworks.