March 18, 2025 • 33 mins
Join us as we unravel the inspiring journey of Tailwind CSS with its creator, Adam Wathan. From its inception in 2017 as an open-source CSS framework to becoming a major player in web design, Tailwind has recently undergone a significant rebranding with the launch of Tailwind Plus. This episode provides listeners with insights into Adam's strategic choices, including the reasoning behind merging Tailwind UI into the broader Tailwind ecosystem.
Discover the challenges and outcomes of balancing community-driven development with commercial viability, as Adam shares how feedback shapes product improvements. Learn about the launch of "Build UIs That Don’t Suck," an initiative designed to foster user engagement and demonstrate Tailwind's quality. Adam also reflects on the importance of sustaining a business model while nurturing open-source passion, offering invaluable advice for anyone in the tech space.
Whether you're a developer, designer, or just interested in entrepreneurship, this episode is packed with insights, revealing the artistry behind code and the business. Don't miss it! Subscribe, share, and let us know what you've learned!
Honeybadger is an application health monitoring tool built by developers for developers.
Judoscale
Autoscaling that actually works. Take control of your cloud hosting.
Disclaimer: This post contains affiliate links. If you make a purchase, I may receive a commission at no extra cost to you.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:01):
Hello everyone and welcome to another episode of
Code and the Code Encoders.
Who Code it?
I'm your host, drew Bragg, andit's my honor today to be joined
by Adam Wathen from Tailwind.
Adam, for anyone who somehow isunfamiliar with you, would you
please introduce yourself?
Speaker 2 (00:14):
So I'm Adam.
I'm the guy who made TailwindCSS originally way back in 2017.
So I've been working onTailwind full-time, I think,
since beginning of 2019.
And over that time we've kindof built up a small team working
on it full-time.
There's like eight of us now.
So, yeah, day-to-day I'm kindof just like working on Tailwind
CSS and supporting the team andexploring different ways that
(00:38):
we can improve it and sort ofthe surrounding ecosystem.
Speaker 1 (00:42):
So, for anyone new to the show, the way this is going
to work is I'm going to askAdam three questions.
I'm going to ask him what he'sworking on, what kind of
blockers he has.
If he doesn't have a currentblocker, you can talk about the
most recent blocker he had andhow we went about solving it.
And then the last question iswhat's something cool, new or
interesting that you've recentlylearned or discovered coding
related?
But of course this is CodeEncoders, so it can be.
(01:03):
So let's dive in Adam what areyou working on?
Speaker 2 (01:11):
Yeah, so it's actually a really big day for us
because I think, like half anhour ago, we just shipped like a
big rebrand of Tailwind UI,which is like the commercial
sort of arm of Tailwind CSS.
So we renamed that wholeproduct from Tailwind UI to
Tailwind Plus with the plan tosort of open up the scope a
little bit.
So, instead of just purelybeing focused on UI components
(01:32):
and templates, which it has inthe past, make it something that
has some more potential for usto work on other interesting
things in that space.
But it was a really hugeproject because we had to
redesign the whole site.
We had to get everythingworking under the new brand.
One of the motivations fordoing it was we didn't want to
(01:52):
have two separate domainsanymore, so we wanted to have
everything hosted onTailwindCSScom so that when
someone searches for TailwindNavbar, for example, we get the
domain authority of the actualTailwind domain instead of
having to compete on this likefresh domain.
So that's kind of like thebiggest thing that we just
(02:13):
shipped today.
But also, at the exact same time, I just launched this little
mini course that I've beenworking on for the past couple
of weeks, which is another kindof marketing related project,
but I put together this thingthat I called build UIs that
Don't Suck.
So it's like six videos where Ikind of find a little common
lack of polish error detailmistake that I see people make
(02:35):
in different common UI patternsand walk through some sort of
different ways of solving it,which was pretty fun to put
together.
So we kind of finished thatofficially like on Friday I
think and pushed that up todaytoo.
The goal is to sort of use itto sort of build up some trust
and authority with, like peoplewho maybe are new to Tailwind
and get people more interestedin some of the commercial stuff,
(02:57):
because maybe they'll thinkI've learned a lot here.
These guys really know whatthey're doing.
I'll probably get a lot ofvalue out of, like all these
pre-built components and stufflike that to have all this same
level of attention and detailput into it.
But even for people who aren'tever going to be potential
customers, hopefully it's stilljust a cool resource where they
can learn some interesting stuff.
So, yeah, big shipping day forus today, good timing.
(03:20):
Yeah, all that stuff just wentlive in the last half hour.
So we're watching the serverlogs and the Twitter comments
and stuff.
We haven't even announced it onTwitter yet.
We're kind of just like puttingit out quietly to see what's
broken first.
So that's what we've been up to.
Speaker 1 (03:36):
Big day for Tailwind.
I mean, there's so many aspects, I guess, of Tailwind, like you
have the code and the actualCSS, but then Tailwind Plus,
your product, and now you'redoing video course.
How do you guys decide what todo next to enhance the Tailwind
brand?
Speaker 2 (03:55):
Yeah, I think generally we've kind of seesawed
back and forth between opensource improvements and then
stuff on the commercial side, tomake sure that the open source
stuff is still sustainable.
So we just released Tailwind 4in January still sustainable.
So we just released Tailwind 4in January and that was a big
year-long project basically,where we've been very focused on
that and haven't really beenable to put a lot of effort into
anything on the commercial sidethat whole time.
(04:15):
So it definitely felt like timeto circle back and breathe some
new life into the commercialstuff.
And I think we have a littlebit more of that to do going
forward and I've spoken aboutthis on my own podcast too where
the revenue and stuff for ushas been starting to shrink a
little bit too.
So we've had to prioritize thebusiness a little bit more than
(04:38):
we have in the past and think abit more strategically about
what do we need to do toactually get things growing
again, whereas in the pastthings have just worked out and
with no effort and we've justbeen able to kind of do whatever
we wanted, which we certainlydidn't take for granted.
But we're definitely having tothink a bit more strategically
and put some systems in place.
So that was kind of themotivation for doing the email
course if we can find some newcustomers for Tailwind Plus
(05:02):
there.
So now we're probably going tocontinue investing a bit more
into that side of things andmake sure that it still feels
kind of fresh and stuff.
So that's kind of like ourimmediate motivations.
But eventually we're definitelygoing to start to feel like,
okay, it's been a while sincethere's been a Tailwind release,
got to kind of keep the energyup there too.
(05:22):
So it's generally just beenkind of like a lot of seesawing
between those two sort offocuses at the business.
So it's definitely businessseason right now and I'm sure
probably come the fall we'll behardcore back in open source
season.
We do have some open sourcestuff we want to work on at the
same time.
That is kind of like supportingthe commercial stuff.
That's kind of the best placeto be, I find, is when we can
(05:45):
find something to do.
That lets us push both thingsforward at the same time, but
not always the case.
But yeah, that's kind of howwe're thinking about things
right now anyways.
Speaker 1 (05:53):
I guess the first question actually should be did
you see Tailwind becoming abusiness in 2017 when you first
started it?
Speaker 2 (05:59):
No, the goal of releasing Tailwind in the first
place was actually more of likean engineering as marketing
thing for another business I wastrying to build.
So I was working on like acheckout platform.
I'd been selling courses andbooks online and I kind of just
wanted to build exactly what Iwanted to be able to sell that
stuff.
So I started working on thatand I was live streaming my work
(06:22):
on it and everyone was reallyinterested in what I was doing
for styling things, which caughtme by surprise because I hadn't
really thought too much of it.
It was just like really earlyversion of Tailwind.
Before I would have ever calledit a framework, I thought of it
as just like custom CSS, but Iwas just using a lot of utility
classes and then, because somany people were interested in
it, I decided to open source itand the name Tailwind comes from
(06:43):
.
The original app was calledKite Tail, so I called it
Tailwind, so it would like betied into that.
The goal was make that opensource project popular, to bring
awareness to like the productthat it was sort of extracted
from.
But yeah, eventually I justlike abandoned that and Tailwind
became a business instead.
Yeah, but it was never theintention for Tailwind itself to
become the business.
It didn't really become clearthat that was the thing to do
(07:05):
until, I would say, late 2018,right around the time me and
Steve released the RefactoringUI book.
Tailwind had gotten quitepopular already and there's
already a lot of establishedpaths for that type of tool to
have a business built around it,like Bootstrap, heather Theme
Store sites like Theme Forestwere really big, so it felt like
(07:26):
we could build some stuff likethat and find a way to finance
the work on Tailwind that way,because that was really the goal
.
My goal has never been to builda business.
My goal has just been to havethe freedom to work on whatever
I want, and the thing I likedworking on the most was Tailwind
.
So finding some way to work onTailwind as much as possible was
definitely the goal, and that'sthe path that we took, and it's
(07:49):
definitely gotten bigger than Iever anticipated, both as an
open source project and as abusiness.
I don't think I ever expectedto have a team of people like we
have now Admittedly a smallteam, but still I never imagined
in my life I would be anemployer, so it's pretty wild,
preston.
Speaker 1 (08:06):
Pyshko.
That is very cool to go fromI'm working on one project to
I'm going to open source a partof that one project to now it's
my full-time job and I employpeople yeah for sure A little
daunting, I guess too at times.
If you've never really plannedon having employees and now you
suddenly do, that's a whole newworld outside of engineering.
So Tailwind wasn't evernecessarily supposed to be a
(08:28):
business, but eventually it did.
You wanted to make enough moneyto be able to work on it full
time.
So how do the various ideas Imean I guess the Tailwind UI
would now is Tailwind Plus as agiven, because that's how other
models do it?
Is that the only way you guysare making money with Tailwind?
Yeah, I mean effectively.
Speaker 2 (08:45):
We still sell, like Refractoring UI, the book I
wrote with Steve.
That's like an asset within thesame business, so that also
contributes.
It's like a smaller percentagefor sure, but that's kind of it.
So that's something I think wewant to figure out how to expand
in the future.
I mean kind of probably tyinginto the perfect answer to your
next question, like the blockersquestion.
(09:07):
Let's do it.
Speaker 1 (09:09):
Yeah.
Speaker 2 (09:09):
I don't know if this is quite a blocker in the sense
of how maybe other people wouldanswer this question in a more
technical sense, but definitelylike a challenge we're
constantly facing.
That I still just feel like Ihaven't cracked, is just trying
to figure out, is like there'ssomething we could do for
businesses, because I feel likewe have this weird reverse
business where we make our moneyselling a product to I wouldn't
(09:32):
say consumers, but they're likeindividuals, so like hobbyist
prosumer types, people who buyTailwind UI for side projects
and stuff like that.
That's the bulk of it.
We also do sell team licenses,but I think our biggest Tailwind
CSS users actually don't buyTailwind UI or Tailwind Plus
because they have big teams ofdesigners and they want to build
(09:56):
their own design systems, sothey don't really need the
development of Tailwind.
For companies like OpenAI andShopify to use the Tailwind as
(10:16):
an open source tool you knowwhich kind of feels like a
little bit backwards.
So it'd be cool to find somesort of way Like I'm always just
trying to think like what isthe obvious thing that I'm
missing that we could do that'dbe valuable for these bigger
companies that depend on theopen source stuff, and even just
thinking about like, how can wediversify the product lineup,
(10:36):
because it is sort of crazy thatwe just depend on selling this
one thing.
That's a one-time purchase withlike lifetime access.
There's just zero recurringrevenue, even though revenue is
quite stable and predictable.
But that's why we'reexperimenting with this email
course as maybe a way toincrease the conversion rate or
bring more awareness to theproduct from the same traffic
that we already have.
(10:56):
Because the Tailwind CSSwebsite.
It gets an insane amount oftraffic because people are just
going to the docs and stuff likethat.
I think if you told anyhardcore internet marketer
person the amount of trafficthat we get there compared to
the revenue that we make, theywould be I don't know.
I believe that someone whoknows what they're doing could
(11:17):
turn that traffic into a muchbigger business than what we
have.
Probably in ways that I wouldn'treally be that excited about
Selling dick enlargement pillsand stuff like that, that type
of thing, that level ofshadiness.
But that's something that's onmy mind a lot generally and
something like I'm trying tothink through a lot this year is
(11:37):
just like, what else can we do?
Especially, what else can we dowithout it being a too big of a
distraction from the opensource stuff, because I think
continuing to improve that'sreally important for the
business, but also that's likewhere we have the most fun.
And if this becomes somethingthat's really important for the
business but also that's likewhere we have the most fun, and
if this becomes something that'snot really fun anymore because
we're too hyper-focused ontrying to make the business work
, that just doesn't feel like asuccess to me, even if it's
(12:00):
financially successful.
So yeah, like we tried doing ajob board and that didn't really
work, because I don't thinkpeople really identify as, like,
tailwind developers.
I think like it's not like thecore part of your stack, like
being a rails developer or alaravel developer or a react
developer or something.
It's just kind of a tool thateveryone uses on the side, but
(12:20):
it's not a job title, which waskind of a bummer.
I thought that would have beencool if that worked out, but
didn't really work out.
But thankfully, like tailwindui slash tailwind plus pays the
bills, happily, but that's justa constant thing I'm trying to
crack is what else is out therefor us as a business?
Speaker 1 (12:39):
How do you go about coming up with those ideas?
Are you just going off on yourown and thinking maybe this
would work, or are you lookingat how other projects and teams
subsidize open source work, oryou work with someone who just
is brilliant marketer orsomething.
Speaker 2 (12:53):
Yeah, I would say a few different things.
One is just sitting around andthinking really hard.
Sometimes you come up withideas that way, definitely just
paying attention to all theinputs that you have as you just
live your life and noticingwhat are people doing in totally
different industries.
Is there anything to be learnedfrom this?
(13:14):
Just like running a smallbusiness like ours, you just
start to think about thingsdifferently.
Even when you go to the coffeeshop there's like my local
coffee shop for the longest time, if you wanted to use their
debit machine or tap to pay,they couldn't accept tips on
there.
They could only accept tips incash.
And it's like man, this is likeyour lowest hanging fruit at
the whole business is to replacethis machine because everyone
(13:37):
is paying with their card andnow no one can tip you.
You just start noticing thingslike that.
But I would say I do have a good, solid network of friends that
I like to bounce ideas off of.
I try to organize at least oneget-together a year where we'll
fly somewhere with some peoplethat I really respect and we
just talk business for threedays.
Those kind of really deepthings.
(13:59):
We always come out of that withsome good ideas.
I think a surprising one for meis I actually get a lot of
ideas from giving advice toother people.
It kind of just flips thingsaround and I don't know.
It's really easy to fix otherpeople's businesses and hard to
fix your own.
But sometimes you'll fixsomething for someone else and
(14:19):
realize I just told this guy todo this and we're not doing that
.
And that's where the idea forthis email course came from was
talking to somebody else andsuggesting you should do some
sort of lead magnet on yourwebsite so you can pitch this
thing to people more easily andI was like wait a minute, like
we don't even do that.
What are we doing?
Speaker 1 (14:36):
light bulb, that's cool.
Yeah, I like the giving adviceto others.
Yielding the light bulb momentfor you of like that was a great
idea.
I just gave wire 100 this idea.
That's awesome.
The other thing that youmentioned was Tailwind.
V4 just came out, big projectfor you guys.
Two questions what's yourfavorite part of V4?
(14:58):
Like your favorite change andwhat was the most challenging
part?
Speaker 2 (15:01):
I think my favorite user facing thing is the CSS
based configuration.
So we used to have thisJavaScript configuration file
where you configure all yourcustom colors and breakpoints
and all sorts of stuff, and inV4, we've kind of figured out
how to express all that stuff inCSS instead, which I think was
a weird change for a lot ofpeople.
(15:22):
But I think most people whohave tried it definitely prefer
it, because before you had tohave a CSS file anyways and some
things you kind of had to likedo half of it in the JavaScript
file, half of it in CSS file,like if you're adding a custom
font, you'd add the custom fontin your JavaScript file as part
of like your design system interms of like naming and stuff.
But you still had to add likethe CSS font face rule to your
(15:44):
CSS file.
So things were kind of justlike spread around but by doing
it all on the CSS file.
Now it's like one less file thatyou have to have and I kind of
like the limitations it puts onyou too.
You can't do like loops andcrazy stuff.
It forces you to be simpler,which is something I appreciate
more and more as I age Just likethe simplest, least clever
(16:07):
stuff that I can just come backto in six months and understand
right away.
I don't know, that's kind oflike my jam.
Speaker 1 (16:13):
The simplicity that I can read later on.
Speaker 2 (16:15):
It's sort of boring, but I know the older you get,
the nicer.
Like a nice little for looplooks over a chain of flat maps
and whatever, and I wrote awhole book on how excited I was
about those topics years ago,but I would say that's like my
favorite user facing feature.
I'm equally excited about justthe fact that we rewrote the
entire thing from scratch,though, and the code base makes
(16:35):
sense because it didn't used to.
It was just like bandaid afterbandaid painting on top of old
paint trying to like patchthings up, and once you've
worked on it for years and yearsand years, years, you just
start to like have a bettermental model of like what the
system needs to do and getting achance to just like write code
that actually expresses thatproperly.
(16:56):
It's nice to be proud of thecode base again, because it had
really spiraled into like chaosin terms of like most
challenging thing.
I'm trying to think it.
Generally.
It feels like we had like aworking prototype that was
basically good enough for us touse in a month, starting from
scratch, and then it took 11months until it was ready to
(17:17):
actually release.
A lot of it is quirky edgecases.
Our Vite plugin has been quitedifficult to get right because
we think it works and thensomeone opens a bug report that
it doesn't work in Astro,because Astro actually runs two
V builds and because there's twoseparate processes they can't
talk to each other, so half theclasses end up missing in the
(17:39):
production build of the CSS file.
Like you know, weird stuff likethat.
There was a lot of challengesaround just designing some of
the CSS based APIs and there'sstill like at least one feature
I can think of from v3 that wedon't have support for before
yet because of just not beingable to design the right API for
(17:59):
it that can be expressed in CSSyet.
So that's been some reallychallenging stuff, stuff.
Probably the biggest grind ofthe whole thing was updating the
entire documentation website,because it seemed like it
shouldn't have been a bigproject because it's all so
templated, but still somehow itwas an enormous effort.
That took like six people onthe team working full time on it
(18:21):
for like two months, because webasically had compete with MDN
in terms of like content.
Every CSS property has a pageand all of it needs to be gone
through and make sure it stillmakes sense with the changes and
stuff like that.
So it was a big project overalland we're still kind of ironing
out some of the wrinkles,issues that people are raising
(18:43):
and stuff.
But it's feeling pretty goodright now and it's nice to be
able to work on some new stufffor a change, because once
you're deep into something for ayear, it doesn't matter how fun
and how excited you are aboutit.
It becomes a death marcheventually.
Speaker 1 (19:00):
The one thing that I guess in my adventures in CSS
land and I am a full stackengineer, but I err more towards
the back end of things thething that always makes me beat
my head against the wall withCSS is like what browsers do and
don't support things, and Ithink it's gotten a little bit
better now that IE isn't a thinganymore, but Safari sometimes
(19:21):
bites me in the ass.
But how do you guys in thatbeing your main thing, how do
you keep on top of that or knowwhen it's appropriate to use x,
y or z a?
Speaker 2 (19:31):
couple different factors.
So there's this website.
Can I usecom, which is reallygreat for just yeah, I live
there checking which browserssupport different css features.
So, yeah, I'm on there all thetime trying to get data about
really modern features and wherethey're supported and stuff
like that.
In terms of adding stuff toTailwind, it depends on the
(19:51):
impact of the change.
So with v4, for example, wedepend on some pretty modern CSS
features.
Like add property is a very newway of like declaring typed CSS
custom properties.
The whole framework like justsimply won't work if the browser
doesn't support that feature,because it's like underpins a
lot of different things inTailwind and we also use the
color mix function to be able tochange the alpha value of
(20:15):
colors at runtime in the browserinstead of having to compute it
at build time, which lets usadjust the transparency of CSS
variable-based colors or thecurrent color keyword and stuff
like that.
So that's another feature thattouches a lot of the framework.
So for stuff like that, we'repretty careful about making sure
we're comfortable with thebrowser support, and Tailwind 4
(20:36):
is pretty aggressive in thatsense.
It only supports like Safari16.4 and up, which is like a
two-year-old version of Safarior two and a half-year-old
version of Safari.
So I would say that's still toocutting edge for like a lot of
people.
But we only do like a new majorversion of Tailwind every three
to four years.
So we try in the very earlyminor patch releases of a new
(20:59):
major version to be prettyaggressive so that the shelf
life of that major version isquite long.
So we don't have to likerelease V5 until whatever 2028
or something at this point, andby then everyone will be totally
fine with the browsers that arebeing targeted by v4.
It was the same thing with v2and v3.
(21:19):
I think it was v2 that starteddepending on CSS variables,
which at the time wascontroversial.
But now it's like are youkidding me?
What world are you building forwhere you can't use CSS
variables?
So we're always like on thebleeding edge with that stuff.
But then there's a lot of otherCSS features that only surface
in Tailwind through like anindividual utility class, like
(21:39):
TextRap Balance and TextRapPretty are pretty modern CSS
features that I'm not sure ifFirefox supports TextRap Balance
.
There's at least one browserthat doesn't support text wrap
pretty still, and I can'tremember which one it is.
But for those particular CSSfeatures, even if you use them,
if the browser doesn't supportit, it'll just gracefully
(22:00):
degrade to just not wrappingnicely and now you'll have an
orphaned word instead of yourheadline being balanced.
Site's not broken.
Maybe the design isn't exactlywhat you want, but it's not
broken.
And even for the stuff thatlike would be broken, you still
get to choose whether to use itor not.
So if there's a feature that'sonly supported by Chrome, well,
maybe you just like can't usethat utility if you're building
(22:22):
something for the web, but ifyou're building an electron app,
like, you can't because that'sonly Chrome anyways.
Or you're building an internalthing where you know like, yeah,
we all use chrome at work forour dashboard, or there might be
a feature that is supported bythe very bleeding edge version
of all three browsers and youjust know that your audience is
(22:43):
going to use those browsers, soyou just don't care, so you can
use it.
The other reason we try tosupport, like really modern
features in tailwind is just sothat if someone wants to play
with a new css feature, theydon't have to like go use
vanilla css to do it, if they'reusing tailwind all the time
anyways.
So even if you can't use it ina site, it's nice that you can
play with it and learn how itworks so that, like, you're
(23:05):
aware of it and can use it whenit is like more available.
So, yeah, we're not veryconservative, I guess is the
point when it comes to likeincluding features in tailwind.
And that, I think, has paid off, because if you compare us to
like bootstrap, for example,bootstrap has always been a lot
more conservative where it was.
Only in the past couple years, Ithink, that their grid has been
(23:26):
moved to css grid instead ofFlexbox because they just want
to make sure it works foreverybody, which is like a
totally noble, valid perspectiveand point of view, and that's
kind of the path that they chose, which I think is, again, a
totally valid one.
We kind of picked the oppositeone, which is to just like let
people do whatever they want andthankfully, because it's a
(23:48):
utility framework whereeverything is so low level, we
can support those things withoutit raising the browser
requirements for everyone,whereas Bootstrap can't do that
For them.
They're building abstractionson top of things.
In Tailwind, you can build aFlexbox grid or a CSS-based grid
.
It's up to you.
Just pick the Flexbox utilitiesor pick the grid utilities, but
(24:08):
in Bootstrap it's call spinwhatever.
You don't know under the hoodwhat they're using, you just
know that you want a grid, so itmakes sense that they're more
conservative there, because theywant to make sure that it works
for more people right?
Speaker 1 (24:21):
Yeah, cool.
Like I said, slightly more onthe back end of things, so don't
envy any of that, but it iscool to hear how much like even
CSS has those same like how dowe balance this and how do we
make this decision versus thatdecision?
Because I think some people dojust download bootstrap and
they're just like oh, I have acard, I'm done, I don't need to
think about anything else, it'seasy for us to take for granted
(24:43):
to like just like how deeply andintimately familiar we are with
, like what's happening with CSSand what browser support and
stuff.
Speaker 2 (24:50):
And I think we could do a better job in our docs
surfacing on different pageslike what is safe to use and
what browsers and stuff likethat for sure.
Because, yeah, a lot of peoplethey just see a feature, oh yeah
, this solves my problem and itworks in my browser and don't
even really think about checkingthe browser support.
Speaker 1 (25:08):
Yeah, just have to have a little link to can.
The last question in the showformat.
I'm sure I will ask yousomething else too, but it is my
favorite because I get such awide variety of answers.
What is something cool, new orinteresting that you want to
share with the audience?
Speaker 2 (25:24):
Yeah, so I think the thing that I've been kind of
like really pumped about thelast couple of weeks is because
I was recording that videocourse.
I've been really jazzed abouttrying to get my office set up
and gear set up, upgraded sothat I could actually do on
camera stuff, cause I come fromthe era of rails cast and
(25:46):
destroy all software, where ascreencast was just a recording
of your screen and audio trackin the background and that used
to be good enough, you know butin this day and age, everyone
wants the fancy on camera,highly produced video stuff.
So I've done a little bit of itin the past but was never really
super happy with the results.
So that's something I've beenlike super nerding out about and
(26:09):
getting into.
So I did a bunch of work in myoffice.
I went and bought some fakeplants and put up these like
acoustic panels behind me andhung a bunch of more acoustic
panels around the room.
I bought this like fancyAudio-Technica shotgun mic
that's like out of frame rightnow but sounds pretty good for
(26:30):
being out of frame, I think andupgraded my camera to this like
crazy Sonyx3 camera with thisfancy lens and I know this is a
podcast, so no one else can seewhat I'm saying but it looks
really good.
Yeah, it looks like figuring outall the lighting has been fun.
I really wanted it to look likedaylight in my office, not like
dark mode gamer room vibe thatso many people go for on youtube
(26:54):
, where everything's black withneon lights and stuff and that's
really tricky to nail.
So I still have natural lightcoming into my office but it's
very hard to control.
So I bought this other biglight and this giant soft box
that's four feet by three feetso I can totally black out the
windows and put that where thewindow is and try to simulate
(27:16):
like what the light coming fromthe window would look like.
I saw Steve Tenuto who doesvideo stuff with Aaron Francis.
I don't know if you're familiarwith him, but he posted like a
cool picture of his setup theother day.
The windows behind him in hisgarage he like put LED lights
that were the same size as thewindows outside of his house
(27:37):
pointing into the windows andthe pictures he took are in like
9pm at night but it looks likedaytime because there's like
this bright LED light comingthrough those windows and I got
excited about that because I waslike man.
I've always been trying tocrack this look of making it
look like it's daytime in theoffice and looking at his, I was
thinking, man, I think like oneof the secrets here is like
(27:59):
seeing a window, because, likeit's just subconsciously, if you
see a window and light iscoming through the window, you
just believe it's day.
And if there's no windows inthis shot, then it's hard to
know.
Now I don't have any windows inthis shot, but I was looking
into like getting like a fakeled window that I could put on
the wall like behind me, so youcould see it like a little bit
in the corner.
(28:19):
Ultimately I figured out thatit still just like works out, I
think, as long as, like there issome natural light.
But I'm looking forward toplaying with that other light.
And in some of the test shotswe were doing, just having like
really overexposed sectionshelps even to like if it looks
like there's a really brightlight shining on your desk and
there's like a section that'slike basically white and you
can't see anything.
(28:39):
It's another just like trickthat like tricks your mind into
thinking there's like somebright light coming through the
window or something.
So that's been like my worldfor the last like couple weeks
is just like nerding out aboutcamera gear and lighting and
Steve, my business partner, cameby for like a full day to like
set everything up with me, whichwas fun.
I don't know, you have to putthings in the weirdest places
(29:01):
for it to like look good oncamera.
Like my monitor is not in themiddle of my desk, it's like
shifted way to the front of mydesk and it's not straight, it's
like angled, because that'swhat was needed to make it look
straight on the camera.
And like the pictures on thewall are probably not at the
right height that they should befor just a room.
We just like sat here and likelooked at the camera and just
(29:23):
moved the pictures until theylike looked like a good spot,
stuff like that.
So none of it makes any sensein the room, but it looks good
on camera and it's just a funthing to sort of learn about
lighting and gear and playingaround with stuff, just like a
new thing to geek out about.
So yeah, that's what I've beendeep into recently.
Speaker 1 (29:46):
There you go.
I feel like everyone findssomething like that.
Some people geek out aboutfonts and they're always
rotating their fonts.
Some people do it withkeyboards, you do it with camera
and lighting gear.
It also plays a part in yourbusiness, so it's all right,
that's for sure, for sure.
Very cool.
Well, I greatly appreciate youspending time, taking time out
of your day to come on the showand talk about Tailwind and your
(30:09):
adventures with it.
Is there anything else youwanted to talk about before we
wrap?
Speaker 2 (30:13):
up.
No man, I mean happy to answerany other questions, but yeah,
I'm glad that we could do thisfinally.
I know we've been trying tolike make it happen for a while.
We're having some issues withmy power going out and in the
middle of calls and stuff likethat, but glad we can finally do
it today and I think probablyit worked out for the best
because I got had moreinteresting stuff to talk about
now that I did then.
Anyways, but yeah, I appreciateyour patience.
Speaker 1 (30:38):
No, that's cool and you had a huge day for you, for
sure.
And the nice thing about theshow format is the next time you
guys do something cool tailwindwe can have you on the show to
talk about it again, it's alwayswhat are you working on?
So I guess, as a wrap up, wherecan people find you?
And tailwind on the internet.
Speaker 2 (30:50):
So tailwind is just tailwindcsscom.
Speaker 1 (30:59):
Best place to find me is on Twitter or X, whatever we
call it now, Just X dot comslash Adam Watham, Cool man.
I again greatly appreciate yourtime and looking forward to
having you on again.
Speaker 2 (31:05):
Thanks, man, I really appreciate you.
Speaker 1 (31:07):
The invite?
Yeah, absolutely, and,listeners, we'll see you in the
next episode.
Bye.
Hello everyone and welcome to another episode of
Code and the Code Encoders.
Who Code it?
I'm your host, drew Bragg, andit's my honor today to be joined
by Adam Wathen from Tailwind.
Adam, for anyone who somehow isunfamiliar with you, would you
please introduce yourself?
Speaker 2 (00:14):
So I'm Adam.
I'm the guy who made TailwindCSS originally way back in 2017.
So I've been working onTailwind full-time, I think,
since beginning of 2019.
And over that time we've kindof built up a small team working
on it full-time.
There's like eight of us now.
So, yeah, day-to-day I'm kindof just like working on Tailwind
CSS and supporting the team andexploring different ways that
(00:38):
we can improve it and sort ofthe surrounding ecosystem.
Speaker 1 (00:42):
So, for anyone new to the show, the way this is going
to work is I'm going to askAdam three questions.
I'm going to ask him what he'sworking on, what kind of
blockers he has.
If he doesn't have a currentblocker, you can talk about the
most recent blocker he had andhow we went about solving it.
And then the last question iswhat's something cool, new or
interesting that you've recentlylearned or discovered coding
related?
But of course this is CodeEncoders, so it can be.
(01:03):
So let's dive in Adam what areyou working on?
Speaker 2 (01:11):
Yeah, so it's actually a really big day for us
because I think, like half anhour ago, we just shipped like a
big rebrand of Tailwind UI,which is like the commercial
sort of arm of Tailwind CSS.
So we renamed that wholeproduct from Tailwind UI to
Tailwind Plus with the plan tosort of open up the scope a
little bit.
So, instead of just purelybeing focused on UI components
(01:32):
and templates, which it has inthe past, make it something that
has some more potential for usto work on other interesting
things in that space.
But it was a really hugeproject because we had to
redesign the whole site.
We had to get everythingworking under the new brand.
One of the motivations fordoing it was we didn't want to
(01:52):
have two separate domainsanymore, so we wanted to have
everything hosted onTailwindCSScom so that when
someone searches for TailwindNavbar, for example, we get the
domain authority of the actualTailwind domain instead of
having to compete on this likefresh domain.
So that's kind of like thebiggest thing that we just
(02:13):
shipped today.
But also, at the exact same time, I just launched this little
mini course that I've beenworking on for the past couple
of weeks, which is another kindof marketing related project,
but I put together this thingthat I called build UIs that
Don't Suck.
So it's like six videos where Ikind of find a little common
lack of polish error detailmistake that I see people make
(02:35):
in different common UI patternsand walk through some sort of
different ways of solving it,which was pretty fun to put
together.
So we kind of finished thatofficially like on Friday I
think and pushed that up todaytoo.
The goal is to sort of use itto sort of build up some trust
and authority with, like peoplewho maybe are new to Tailwind
and get people more interestedin some of the commercial stuff,
(02:57):
because maybe they'll thinkI've learned a lot here.
These guys really know whatthey're doing.
I'll probably get a lot ofvalue out of, like all these
pre-built components and stufflike that to have all this same
level of attention and detailput into it.
But even for people who aren'tever going to be potential
customers, hopefully it's stilljust a cool resource where they
can learn some interesting stuff.
So, yeah, big shipping day forus today, good timing.
(03:20):
Yeah, all that stuff just wentlive in the last half hour.
So we're watching the serverlogs and the Twitter comments
and stuff.
We haven't even announced it onTwitter yet.
We're kind of just like puttingit out quietly to see what's
broken first.
So that's what we've been up to.
Speaker 1 (03:36):
Big day for Tailwind.
I mean, there's so many aspects, I guess, of Tailwind, like you
have the code and the actualCSS, but then Tailwind Plus,
your product, and now you'redoing video course.
How do you guys decide what todo next to enhance the Tailwind
brand?
Speaker 2 (03:55):
Yeah, I think generally we've kind of seesawed
back and forth between opensource improvements and then
stuff on the commercial side, tomake sure that the open source
stuff is still sustainable.
So we just released Tailwind 4in January still sustainable.
So we just released Tailwind 4in January and that was a big
year-long project basically,where we've been very focused on
that and haven't really beenable to put a lot of effort into
anything on the commercial sidethat whole time.
(04:15):
So it definitely felt like timeto circle back and breathe some
new life into the commercialstuff.
And I think we have a littlebit more of that to do going
forward and I've spoken aboutthis on my own podcast too where
the revenue and stuff for ushas been starting to shrink a
little bit too.
So we've had to prioritize thebusiness a little bit more than
(04:38):
we have in the past and think abit more strategically about
what do we need to do toactually get things growing
again, whereas in the pastthings have just worked out and
with no effort and we've justbeen able to kind of do whatever
we wanted, which we certainlydidn't take for granted.
But we're definitely having tothink a bit more strategically
and put some systems in place.
So that was kind of themotivation for doing the email
course if we can find some newcustomers for Tailwind Plus
(05:02):
there.
So now we're probably going tocontinue investing a bit more
into that side of things andmake sure that it still feels
kind of fresh and stuff.
So that's kind of like ourimmediate motivations.
But eventually we're definitelygoing to start to feel like,
okay, it's been a while sincethere's been a Tailwind release,
got to kind of keep the energyup there too.
(05:22):
So it's generally just beenkind of like a lot of seesawing
between those two sort offocuses at the business.
So it's definitely businessseason right now and I'm sure
probably come the fall we'll behardcore back in open source
season.
We do have some open sourcestuff we want to work on at the
same time.
That is kind of like supportingthe commercial stuff.
That's kind of the best placeto be, I find, is when we can
(05:45):
find something to do.
That lets us push both thingsforward at the same time, but
not always the case.
But yeah, that's kind of howwe're thinking about things
right now anyways.
Speaker 1 (05:53):
I guess the first question actually should be did
you see Tailwind becoming abusiness in 2017 when you first
started it?
Speaker 2 (05:59):
No, the goal of releasing Tailwind in the first
place was actually more of likean engineering as marketing
thing for another business I wastrying to build.
So I was working on like acheckout platform.
I'd been selling courses andbooks online and I kind of just
wanted to build exactly what Iwanted to be able to sell that
stuff.
So I started working on thatand I was live streaming my work
(06:22):
on it and everyone was reallyinterested in what I was doing
for styling things, which caughtme by surprise because I hadn't
really thought too much of it.
It was just like really earlyversion of Tailwind.
Before I would have ever calledit a framework, I thought of it
as just like custom CSS, but Iwas just using a lot of utility
classes and then, because somany people were interested in
it, I decided to open source itand the name Tailwind comes from
(06:43):
.
The original app was calledKite Tail, so I called it
Tailwind, so it would like betied into that.
The goal was make that opensource project popular, to bring
awareness to like the productthat it was sort of extracted
from.
But yeah, eventually I justlike abandoned that and Tailwind
became a business instead.
Yeah, but it was never theintention for Tailwind itself to
become the business.
It didn't really become clearthat that was the thing to do
(07:05):
until, I would say, late 2018,right around the time me and
Steve released the RefactoringUI book.
Tailwind had gotten quitepopular already and there's
already a lot of establishedpaths for that type of tool to
have a business built around it,like Bootstrap, heather Theme
Store sites like Theme Forestwere really big, so it felt like
(07:26):
we could build some stuff likethat and find a way to finance
the work on Tailwind that way,because that was really the goal
.
My goal has never been to builda business.
My goal has just been to havethe freedom to work on whatever
I want, and the thing I likedworking on the most was Tailwind
.
So finding some way to work onTailwind as much as possible was
definitely the goal, and that'sthe path that we took, and it's
(07:49):
definitely gotten bigger than Iever anticipated, both as an
open source project and as abusiness.
I don't think I ever expectedto have a team of people like we
have now Admittedly a smallteam, but still I never imagined
in my life I would be anemployer, so it's pretty wild,
preston.
Speaker 1 (08:06):
Pyshko.
That is very cool to go fromI'm working on one project to
I'm going to open source a partof that one project to now it's
my full-time job and I employpeople yeah for sure A little
daunting, I guess too at times.
If you've never really plannedon having employees and now you
suddenly do, that's a whole newworld outside of engineering.
So Tailwind wasn't evernecessarily supposed to be a
(08:28):
business, but eventually it did.
You wanted to make enough moneyto be able to work on it full
time.
So how do the various ideas Imean I guess the Tailwind UI
would now is Tailwind Plus as agiven, because that's how other
models do it?
Is that the only way you guysare making money with Tailwind?
Yeah, I mean effectively.
Speaker 2 (08:45):
We still sell, like Refractoring UI, the book I
wrote with Steve.
That's like an asset within thesame business, so that also
contributes.
It's like a smaller percentagefor sure, but that's kind of it.
So that's something I think wewant to figure out how to expand
in the future.
I mean kind of probably tyinginto the perfect answer to your
next question, like the blockersquestion.
(09:07):
Let's do it.
Speaker 1 (09:09):
Yeah.
Speaker 2 (09:09):
I don't know if this is quite a blocker in the sense
of how maybe other people wouldanswer this question in a more
technical sense, but definitelylike a challenge we're
constantly facing.
That I still just feel like Ihaven't cracked, is just trying
to figure out, is like there'ssomething we could do for
businesses, because I feel likewe have this weird reverse
business where we make our moneyselling a product to I wouldn't
(09:32):
say consumers, but they're likeindividuals, so like hobbyist
prosumer types, people who buyTailwind UI for side projects
and stuff like that.
That's the bulk of it.
We also do sell team licenses,but I think our biggest Tailwind
CSS users actually don't buyTailwind UI or Tailwind Plus
because they have big teams ofdesigners and they want to build
(09:56):
their own design systems, sothey don't really need the
development of Tailwind.
For companies like OpenAI andShopify to use the Tailwind as
(10:16):
an open source tool you knowwhich kind of feels like a
little bit backwards.
So it'd be cool to find somesort of way Like I'm always just
trying to think like what isthe obvious thing that I'm
missing that we could do that'dbe valuable for these bigger
companies that depend on theopen source stuff, and even just
thinking about like, how can wediversify the product lineup,
(10:36):
because it is sort of crazy thatwe just depend on selling this
one thing.
That's a one-time purchase withlike lifetime access.
There's just zero recurringrevenue, even though revenue is
quite stable and predictable.
But that's why we'reexperimenting with this email
course as maybe a way toincrease the conversion rate or
bring more awareness to theproduct from the same traffic
that we already have.
(10:56):
Because the Tailwind CSSwebsite.
It gets an insane amount oftraffic because people are just
going to the docs and stuff likethat.
I think if you told anyhardcore internet marketer
person the amount of trafficthat we get there compared to
the revenue that we make, theywould be I don't know.
I believe that someone whoknows what they're doing could
(11:17):
turn that traffic into a muchbigger business than what we
have.
Probably in ways that I wouldn'treally be that excited about
Selling dick enlargement pillsand stuff like that, that type
of thing, that level ofshadiness.
But that's something that's onmy mind a lot generally and
something like I'm trying tothink through a lot this year is
(11:37):
just like, what else can we do?
Especially, what else can we dowithout it being a too big of a
distraction from the opensource stuff, because I think
continuing to improve that'sreally important for the
business, but also that's likewhere we have the most fun.
And if this becomes somethingthat's really important for the
business but also that's likewhere we have the most fun, and
if this becomes something that'snot really fun anymore because
we're too hyper-focused ontrying to make the business work
, that just doesn't feel like asuccess to me, even if it's
(12:00):
financially successful.
So yeah, like we tried doing ajob board and that didn't really
work, because I don't thinkpeople really identify as, like,
tailwind developers.
I think like it's not like thecore part of your stack, like
being a rails developer or alaravel developer or a react
developer or something.
It's just kind of a tool thateveryone uses on the side, but
(12:20):
it's not a job title, which waskind of a bummer.
I thought that would have beencool if that worked out, but
didn't really work out.
But thankfully, like tailwindui slash tailwind plus pays the
bills, happily, but that's justa constant thing I'm trying to
crack is what else is out therefor us as a business?
Speaker 1 (12:39):
How do you go about coming up with those ideas?
Are you just going off on yourown and thinking maybe this
would work, or are you lookingat how other projects and teams
subsidize open source work, oryou work with someone who just
is brilliant marketer orsomething.
Speaker 2 (12:53):
Yeah, I would say a few different things.
One is just sitting around andthinking really hard.
Sometimes you come up withideas that way, definitely just
paying attention to all theinputs that you have as you just
live your life and noticingwhat are people doing in totally
different industries.
Is there anything to be learnedfrom this?
(13:14):
Just like running a smallbusiness like ours, you just
start to think about thingsdifferently.
Even when you go to the coffeeshop there's like my local
coffee shop for the longest time, if you wanted to use their
debit machine or tap to pay,they couldn't accept tips on
there.
They could only accept tips incash.
And it's like man, this is likeyour lowest hanging fruit at
the whole business is to replacethis machine because everyone
(13:37):
is paying with their card andnow no one can tip you.
You just start noticing thingslike that.
But I would say I do have a good, solid network of friends that
I like to bounce ideas off of.
I try to organize at least oneget-together a year where we'll
fly somewhere with some peoplethat I really respect and we
just talk business for threedays.
Those kind of really deepthings.
(13:59):
We always come out of that withsome good ideas.
I think a surprising one for meis I actually get a lot of
ideas from giving advice toother people.
It kind of just flips thingsaround and I don't know.
It's really easy to fix otherpeople's businesses and hard to
fix your own.
But sometimes you'll fixsomething for someone else and
(14:19):
realize I just told this guy todo this and we're not doing that
.
And that's where the idea forthis email course came from was
talking to somebody else andsuggesting you should do some
sort of lead magnet on yourwebsite so you can pitch this
thing to people more easily andI was like wait a minute, like
we don't even do that.
What are we doing?
Speaker 1 (14:36):
light bulb, that's cool.
Yeah, I like the giving adviceto others.
Yielding the light bulb momentfor you of like that was a great
idea.
I just gave wire 100 this idea.
That's awesome.
The other thing that youmentioned was Tailwind.
V4 just came out, big projectfor you guys.
Two questions what's yourfavorite part of V4?
(14:58):
Like your favorite change andwhat was the most challenging
part?
Speaker 2 (15:01):
I think my favorite user facing thing is the CSS
based configuration.
So we used to have thisJavaScript configuration file
where you configure all yourcustom colors and breakpoints
and all sorts of stuff, and inV4, we've kind of figured out
how to express all that stuff inCSS instead, which I think was
a weird change for a lot ofpeople.
(15:22):
But I think most people whohave tried it definitely prefer
it, because before you had tohave a CSS file anyways and some
things you kind of had to likedo half of it in the JavaScript
file, half of it in CSS file,like if you're adding a custom
font, you'd add the custom fontin your JavaScript file as part
of like your design system interms of like naming and stuff.
But you still had to add likethe CSS font face rule to your
(15:44):
CSS file.
So things were kind of justlike spread around but by doing
it all on the CSS file.
Now it's like one less file thatyou have to have and I kind of
like the limitations it puts onyou too.
You can't do like loops andcrazy stuff.
It forces you to be simpler,which is something I appreciate
more and more as I age Just likethe simplest, least clever
(16:07):
stuff that I can just come backto in six months and understand
right away.
I don't know, that's kind oflike my jam.
Speaker 1 (16:13):
The simplicity that I can read later on.
Speaker 2 (16:15):
It's sort of boring, but I know the older you get,
the nicer.
Like a nice little for looplooks over a chain of flat maps
and whatever, and I wrote awhole book on how excited I was
about those topics years ago,but I would say that's like my
favorite user facing feature.
I'm equally excited about justthe fact that we rewrote the
entire thing from scratch,though, and the code base makes
(16:35):
sense because it didn't used to.
It was just like bandaid afterbandaid painting on top of old
paint trying to like patchthings up, and once you've
worked on it for years and yearsand years, years, you just
start to like have a bettermental model of like what the
system needs to do and getting achance to just like write code
that actually expresses thatproperly.
(16:56):
It's nice to be proud of thecode base again, because it had
really spiraled into like chaosin terms of like most
challenging thing.
I'm trying to think it.
Generally.
It feels like we had like aworking prototype that was
basically good enough for us touse in a month, starting from
scratch, and then it took 11months until it was ready to
(17:17):
actually release.
A lot of it is quirky edgecases.
Our Vite plugin has been quitedifficult to get right because
we think it works and thensomeone opens a bug report that
it doesn't work in Astro,because Astro actually runs two
V builds and because there's twoseparate processes they can't
talk to each other, so half theclasses end up missing in the
(17:39):
production build of the CSS file.
Like you know, weird stuff likethat.
There was a lot of challengesaround just designing some of
the CSS based APIs and there'sstill like at least one feature
I can think of from v3 that wedon't have support for before
yet because of just not beingable to design the right API for
(17:59):
it that can be expressed in CSSyet.
So that's been some reallychallenging stuff, stuff.
Probably the biggest grind ofthe whole thing was updating the
entire documentation website,because it seemed like it
shouldn't have been a bigproject because it's all so
templated, but still somehow itwas an enormous effort.
That took like six people onthe team working full time on it
(18:21):
for like two months, because webasically had compete with MDN
in terms of like content.
Every CSS property has a pageand all of it needs to be gone
through and make sure it stillmakes sense with the changes and
stuff like that.
So it was a big project overalland we're still kind of ironing
out some of the wrinkles,issues that people are raising
(18:43):
and stuff.
But it's feeling pretty goodright now and it's nice to be
able to work on some new stufffor a change, because once
you're deep into something for ayear, it doesn't matter how fun
and how excited you are aboutit.
It becomes a death marcheventually.
Speaker 1 (19:00):
The one thing that I guess in my adventures in CSS
land and I am a full stackengineer, but I err more towards
the back end of things thething that always makes me beat
my head against the wall withCSS is like what browsers do and
don't support things, and Ithink it's gotten a little bit
better now that IE isn't a thinganymore, but Safari sometimes
(19:21):
bites me in the ass.
But how do you guys in thatbeing your main thing, how do
you keep on top of that or knowwhen it's appropriate to use x,
y or z a?
Speaker 2 (19:31):
couple different factors.
So there's this website.
Can I usecom, which is reallygreat for just yeah, I live
there checking which browserssupport different css features.
So, yeah, I'm on there all thetime trying to get data about
really modern features and wherethey're supported and stuff
like that.
In terms of adding stuff toTailwind, it depends on the
(19:51):
impact of the change.
So with v4, for example, wedepend on some pretty modern CSS
features.
Like add property is a very newway of like declaring typed CSS
custom properties.
The whole framework like justsimply won't work if the browser
doesn't support that feature,because it's like underpins a
lot of different things inTailwind and we also use the
color mix function to be able tochange the alpha value of
(20:15):
colors at runtime in the browserinstead of having to compute it
at build time, which lets usadjust the transparency of CSS
variable-based colors or thecurrent color keyword and stuff
like that.
So that's another feature thattouches a lot of the framework.
So for stuff like that, we'repretty careful about making sure
we're comfortable with thebrowser support, and Tailwind 4
(20:36):
is pretty aggressive in thatsense.
It only supports like Safari16.4 and up, which is like a
two-year-old version of Safarior two and a half-year-old
version of Safari.
So I would say that's still toocutting edge for like a lot of
people.
But we only do like a new majorversion of Tailwind every three
to four years.
So we try in the very earlyminor patch releases of a new
(20:59):
major version to be prettyaggressive so that the shelf
life of that major version isquite long.
So we don't have to likerelease V5 until whatever 2028
or something at this point, andby then everyone will be totally
fine with the browsers that arebeing targeted by v4.
It was the same thing with v2and v3.
(21:19):
I think it was v2 that starteddepending on CSS variables,
which at the time wascontroversial.
But now it's like are youkidding me?
What world are you building forwhere you can't use CSS
variables?
So we're always like on thebleeding edge with that stuff.
But then there's a lot of otherCSS features that only surface
in Tailwind through like anindividual utility class, like
(21:39):
TextRap Balance and TextRapPretty are pretty modern CSS
features that I'm not sure ifFirefox supports TextRap Balance
.
There's at least one browserthat doesn't support text wrap
pretty still, and I can'tremember which one it is.
But for those particular CSSfeatures, even if you use them,
if the browser doesn't supportit, it'll just gracefully
(22:00):
degrade to just not wrappingnicely and now you'll have an
orphaned word instead of yourheadline being balanced.
Site's not broken.
Maybe the design isn't exactlywhat you want, but it's not
broken.
And even for the stuff thatlike would be broken, you still
get to choose whether to use itor not.
So if there's a feature that'sonly supported by Chrome, well,
maybe you just like can't usethat utility if you're building
(22:22):
something for the web, but ifyou're building an electron app,
like, you can't because that'sonly Chrome anyways.
Or you're building an internalthing where you know like, yeah,
we all use chrome at work forour dashboard, or there might be
a feature that is supported bythe very bleeding edge version
of all three browsers and youjust know that your audience is
(22:43):
going to use those browsers, soyou just don't care, so you can
use it.
The other reason we try tosupport, like really modern
features in tailwind is just sothat if someone wants to play
with a new css feature, theydon't have to like go use
vanilla css to do it, if they'reusing tailwind all the time
anyways.
So even if you can't use it ina site, it's nice that you can
play with it and learn how itworks so that, like, you're
(23:05):
aware of it and can use it whenit is like more available.
So, yeah, we're not veryconservative, I guess is the
point when it comes to likeincluding features in tailwind.
And that, I think, has paid off, because if you compare us to
like bootstrap, for example,bootstrap has always been a lot
more conservative where it was.
Only in the past couple years, Ithink, that their grid has been
(23:26):
moved to css grid instead ofFlexbox because they just want
to make sure it works foreverybody, which is like a
totally noble, valid perspectiveand point of view, and that's
kind of the path that they chose, which I think is, again, a
totally valid one.
We kind of picked the oppositeone, which is to just like let
people do whatever they want andthankfully, because it's a
(23:48):
utility framework whereeverything is so low level, we
can support those things withoutit raising the browser
requirements for everyone,whereas Bootstrap can't do that
For them.
They're building abstractionson top of things.
In Tailwind, you can build aFlexbox grid or a CSS-based grid
.
It's up to you.
Just pick the Flexbox utilitiesor pick the grid utilities, but
(24:08):
in Bootstrap it's call spinwhatever.
You don't know under the hoodwhat they're using, you just
know that you want a grid, so itmakes sense that they're more
conservative there, because theywant to make sure that it works
for more people right?
Speaker 1 (24:21):
Yeah, cool.
Like I said, slightly more onthe back end of things, so don't
envy any of that, but it iscool to hear how much like even
CSS has those same like how dowe balance this and how do we
make this decision versus thatdecision?
Because I think some people dojust download bootstrap and
they're just like oh, I have acard, I'm done, I don't need to
think about anything else, it'seasy for us to take for granted
(24:43):
to like just like how deeply andintimately familiar we are with
, like what's happening with CSSand what browser support and
stuff.
Speaker 2 (24:50):
And I think we could do a better job in our docs
surfacing on different pageslike what is safe to use and
what browsers and stuff likethat for sure.
Because, yeah, a lot of peoplethey just see a feature, oh yeah
, this solves my problem and itworks in my browser and don't
even really think about checkingthe browser support.
Speaker 1 (25:08):
Yeah, just have to have a little link to can.
The last question in the showformat.
I'm sure I will ask yousomething else too, but it is my
favorite because I get such awide variety of answers.
What is something cool, new orinteresting that you want to
share with the audience?
Speaker 2 (25:24):
Yeah, so I think the thing that I've been kind of
like really pumped about thelast couple of weeks is because
I was recording that videocourse.
I've been really jazzed abouttrying to get my office set up
and gear set up, upgraded sothat I could actually do on
camera stuff, cause I come fromthe era of rails cast and
(25:46):
destroy all software, where ascreencast was just a recording
of your screen and audio trackin the background and that used
to be good enough, you know butin this day and age, everyone
wants the fancy on camera,highly produced video stuff.
So I've done a little bit of itin the past but was never really
super happy with the results.
So that's something I've beenlike super nerding out about and
(26:09):
getting into.
So I did a bunch of work in myoffice.
I went and bought some fakeplants and put up these like
acoustic panels behind me andhung a bunch of more acoustic
panels around the room.
I bought this like fancyAudio-Technica shotgun mic
that's like out of frame rightnow but sounds pretty good for
(26:30):
being out of frame, I think andupgraded my camera to this like
crazy Sonyx3 camera with thisfancy lens and I know this is a
podcast, so no one else can seewhat I'm saying but it looks
really good.
Yeah, it looks like figuring outall the lighting has been fun.
I really wanted it to look likedaylight in my office, not like
dark mode gamer room vibe thatso many people go for on youtube
(26:54):
, where everything's black withneon lights and stuff and that's
really tricky to nail.
So I still have natural lightcoming into my office but it's
very hard to control.
So I bought this other biglight and this giant soft box
that's four feet by three feetso I can totally black out the
windows and put that where thewindow is and try to simulate
(27:16):
like what the light coming fromthe window would look like.
I saw Steve Tenuto who doesvideo stuff with Aaron Francis.
I don't know if you're familiarwith him, but he posted like a
cool picture of his setup theother day.
The windows behind him in hisgarage he like put LED lights
that were the same size as thewindows outside of his house
(27:37):
pointing into the windows andthe pictures he took are in like
9pm at night but it looks likedaytime because there's like
this bright LED light comingthrough those windows and I got
excited about that because I waslike man.
I've always been trying tocrack this look of making it
look like it's daytime in theoffice and looking at his, I was
thinking, man, I think like oneof the secrets here is like
(27:59):
seeing a window, because, likeit's just subconsciously, if you
see a window and light iscoming through the window, you
just believe it's day.
And if there's no windows inthis shot, then it's hard to
know.
Now I don't have any windows inthis shot, but I was looking
into like getting like a fakeled window that I could put on
the wall like behind me, so youcould see it like a little bit
in the corner.
(28:19):
Ultimately I figured out thatit still just like works out, I
think, as long as, like there issome natural light.
But I'm looking forward toplaying with that other light.
And in some of the test shotswe were doing, just having like
really overexposed sectionshelps even to like if it looks
like there's a really brightlight shining on your desk and
there's like a section that'slike basically white and you
can't see anything.
(28:39):
It's another just like trickthat like tricks your mind into
thinking there's like somebright light coming through the
window or something.
So that's been like my worldfor the last like couple weeks
is just like nerding out aboutcamera gear and lighting and
Steve, my business partner, cameby for like a full day to like
set everything up with me, whichwas fun.
I don't know, you have to putthings in the weirdest places
(29:01):
for it to like look good oncamera.
Like my monitor is not in themiddle of my desk, it's like
shifted way to the front of mydesk and it's not straight, it's
like angled, because that'swhat was needed to make it look
straight on the camera.
And like the pictures on thewall are probably not at the
right height that they should befor just a room.
We just like sat here and likelooked at the camera and just
(29:23):
moved the pictures until theylike looked like a good spot,
stuff like that.
So none of it makes any sensein the room, but it looks good
on camera and it's just a funthing to sort of learn about
lighting and gear and playingaround with stuff, just like a
new thing to geek out about.
So yeah, that's what I've beendeep into recently.
Speaker 1 (29:46):
There you go.
I feel like everyone findssomething like that.
Some people geek out aboutfonts and they're always
rotating their fonts.
Some people do it withkeyboards, you do it with camera
and lighting gear.
It also plays a part in yourbusiness, so it's all right,
that's for sure, for sure.
Very cool.
Well, I greatly appreciate youspending time, taking time out
of your day to come on the showand talk about Tailwind and your
(30:09):
adventures with it.
Is there anything else youwanted to talk about before we
wrap?
Speaker 2 (30:13):
up.
No man, I mean happy to answerany other questions, but yeah,
I'm glad that we could do thisfinally.
I know we've been trying tolike make it happen for a while.
We're having some issues withmy power going out and in the
middle of calls and stuff likethat, but glad we can finally do
it today and I think probablyit worked out for the best
because I got had moreinteresting stuff to talk about
now that I did then.
Anyways, but yeah, I appreciateyour patience.
Speaker 1 (30:38):
No, that's cool and you had a huge day for you, for
sure.
And the nice thing about theshow format is the next time you
guys do something cool tailwindwe can have you on the show to
talk about it again, it's alwayswhat are you working on?
So I guess, as a wrap up, wherecan people find you?
And tailwind on the internet.
Speaker 2 (30:50):
So tailwind is just tailwindcsscom.
Speaker 1 (30:59):
Best place to find me is on Twitter or X, whatever we
call it now, Just X dot comslash Adam Watham, Cool man.
I again greatly appreciate yourtime and looking forward to
having you on again.
Speaker 2 (31:05):
Thanks, man, I really appreciate you.
Speaker 1 (31:07):
The invite?
Yeah, absolutely, and,listeners, we'll see you in the
next episode.
Bye.
Popular Podcasts
24/7 News: The Latest
The latest news in 4 minutes updated every hour, every day.
Therapy Gecko
An unlicensed lizard psychologist travels the universe talking to strangers about absolutely nothing. TO CALL THE GECKO: follow me on https://www.twitch.tv/lyleforever to get a notification for when I am taking calls. I am usually live Mondays, Wednesdays, and Fridays but lately a lot of other times too. I am a gecko.
The Joe Rogan Experience
The official podcast of comedian Joe Rogan.