We’re creating documentaries to tell the tech stories that inspire people to keep creating and learning, and ultimately, unlock more potential in both themselves and software. Check out the YouTube Channel!
Here, Tailwind Labs CEO and open-source author Adam Wathan talks about how Tailwind CSS came to be.
Transcript
So TailwindCSS was sort of born by accident as sort of a byproduct of another project that I was working on.
So Steve Schoger, who’s actually my business partner, in Tailwind Labs, me and him have been buddies for years and years and years, hacking on a little side projects and stuff together actually introduced to each other by a friend of mine that I met in college. And one day in one of our sort of just hanging out at Starbucks, we’re brainstorming our side project ideas. I was telling him about this idea I had for an app that the goal was sort of like help you share interesting articles with other people on your team. And he thought it was a really cool idea.
So I decided I was going to take a week off work just a week on vacation to try and like prototype this and have some fun with it. And the first thing that I did was try and figure out how I was going to kind of do all the styling and build out the actual site.
And up until then, I’d always be using Bootstrap for everything, and I was a huge fan of bootstrap and love to Bootstrap. But the the version of Bootstrap that I’ve just come out at the time, which I think was Bootstrap 4, they switched everything over to SAss and they were using Less before.
And I just like dogmatically loved Less and I didn’t want to stop using Less. I really liked Less as a CSS pre-processor, so I thought, “Well, if I want to keep using Less, then I have to write CSS myself.”
So I just tried to figure out a way to sort of structure everything in a way that made sense to me. And it was kind of pretty Bootstrap inspired at the time. You know, there was like button classes and card classes and stuff like that.
That was a very sort of specific to the design of this project. But over time, I also found myself introducing these little utility classes for adding a little bit of padding here, a little bit of margin or centering some text or kind of turning something into a flexbox container and stuff like that.
And. That project and end up going anywhere. Like all side projects do, it just went to the side project graveyard. But on the next kind of side project, which was this this sort of check-out as a service tool called KiteTail that me and Steve were trying to build, I needed to start somewhere with the styles on that, too.
The first thing that I did is I went over to the the project and we were working on before, which is called Digest, and I just grabbed all the style sheets and pasted them into this new project, used it as a starting point and started deleting the stuff that didn’t make sense, keeping the stuff that did.
And what I found every time I sort of was bringing this like collection of style sheets from project to project is that the only thing that always survived that was always the same from project to project was these little utilities for things like margin and padding and flexbox, and these really low level things that weren’t doing opinionated things like saying what a button should look like or what a card should look like. And what I was doing with this KiteTail project is I was live streaming all of my work on it, on Twitch and YouTube.
And, you know, I’d get like 100 people watching or whatever, and I’d just be building it. And the way I sort of pitched the live streams was like, “Come watch me TDD, a Laravel app and do some cool stuff with Vue and Laravel and whatever,” didn’t think twice about sort of the CSS side of things.
I just kind of was doing what I was doing, and I didn’t see that as like the exciting or interesting part. And inevitably, what happened is that during these live streams, everyone was always asking me, like, “What’s CSS framework is this? What is this approach to styling? I’ve never seen this before.” And that kind of encouraged me to to do a little bit more with it and to think about open-sourcing it.
So around the same time, a friend of mine, Jonathan Reinink, who I now work with at Tailwind Labs, was about to do a big redesign of his SaaS product that he was working on. And he said t o me, “What is this like utility CSS stuff that you’ve been doing? I want to try it out on on this app.”
And this was right at the same time that I was trying to take the CSS stuff that I’ve been doing and sort of extract it into a library that I can actually release. So that’s kind of where things started in terms of actually turning it into something that could be reused because he was trying to use those style sheets to build his app. I was trying to use them to build my app and that was like a forcing function for making sure that it could be used in like two totally different contexts and support two totally different looking applications. And that sort of drove out like, “What do we need to make customizable? What do we need to include out of the box?” All that sort of stuff? “What is like too high of a level of abstraction? What’s the right level of abstraction?”
So we kind of tacked on that and kind of fine tuned it. And yeah, then we decided to sort of open-source it, and I was trying to think of a name for it. And at the time, my focus was still this KiteTail app like, that’s what I thought my future was going to be. I thought, We’re going to build this app, we’re going to try and grow. It turned into a real thing.
So I thought, I want to open-source this under the sort of KiteTail brand. And I was trying to think, “What’s a cool name like KiteTail? Maybe I could start with tail tail, white tail, Tailwind. That’s a cool name. That kind of makes sense because it’s kind of helping you do stuff faster.”
And I was like the first name that I came up with and I thought, “Man, this is like a really good name for a CSS framework.”
So that’s where that kind of kind of came from, and we kind of kept riffing on it and improving it until it was ready to sort of open-source and release in a sort of v0.1.0 state.
Originally, it was like all built with Less like a kind of I was saying, right. The whole motivation for even doing this whole thing was that I wanted to write all my success with Less instead of SaaS. But as the framework got more and more complicated and we needed to support all these customisation use cases, it just became unmaintainable because like the Less, it’s not designed to be used in that way. Like I was doing things with it that I don’t think the creators of the tool ever intended to work. They just like, worked by coincidence.
And if I ever told them that I was doing it, they would have said, “Please don’t do that. And that’ll probably break and a minor update or a patch release one day without us even realizing.”
So when I was kind of trying to figure out like, “Man, how do we like make this more maintainable? Like, I feel like I can’t even write tests for this thing.” And it’s terrifying me because there’s no Less testing. It doesn’t doesn’t even make sense, you know, because no one was doing anything sophisticated with it.
So around this time, David Hemphill, who is also a really well-known person in the Laravel community, mentioned to me that I should try building it with PostCSS, which is like a tool for parsing CSS into an abstract syntax tree and sort of manipulating that AST and then kind of regenerating the CSS based on the manipulated AST.
I didn’t really understand how I could use that to build this tool.But David had seen a bunch of cool things that people were doing with it, and he kind of helped me understand what was possible in terms of like, “OK, well, what you want to do is you want to create custom at-rules that when you’re walking the AST, you can see, ‘Oh, there’s an at Tailwind rule.’” Like, let’s generate a bunch of CSS with JavaScript, remove that rule and put in your custom generated CSS. And I was like, “Oh man, I’m starting to really see how I could use this to build like a CSS framework.”
So he really helped me kind of get started and learn how all that stuff worked and ended up becoming really involved in the early days of the project, helping us kind of get that stuff out the door. So it was probably like a month before we ended up actually releasing it, but we scrapped all the stuff that we wrote with Less. I rewrote the entire thing.
We rewrote the entire thing with PostCSS in like two days and then we just kept iterating on it, iterating on it. And then I think it was like Halloween night, 2017. We released the very first version of it, and since then it’s just kind of grown like crazy, faster and faster and at this point.
Almost every new website end up seeing on the internet is built with TailwindCSS, which is completely crazy to me.
Related content
- Laravel Origins: The Documentary by OfferZen
- Why OfferZen is Making Documentaries about Open-source tech
- Taylor Otwell Tells the Story behind Laravel Forge
- Taylor Otwell on how he Decides what PRs to Merge into Laravel
- Jeffrey Way Tells the Story of Laracasts
- Nuno Maduro Tells the Story of Pest PHP
- Larabelles and Inclusivity in the Laravel community
- PHP Isn’t Dead ft. Jeffrey Way, Erika Heidi and others
