WEBVTT
NOTE
This file was generated by Descript
00:00:05.000 --> 00:00:06.290
Mike Bifulco: This is Tiny Improvements.
00:00:06.320 --> 00:00:07.369
I'm Mike by ko
00:00:13.033 --> 00:00:14.623
I hate Tailwind CSS.
00:00:14.953 --> 00:00:15.853
Here's why I use it.
00:00:17.023 --> 00:00:19.603
In the first days of building craft
work, I made the decision to use
00:00:19.603 --> 00:00:21.643
tailwind CSS for our projects.
00:00:21.853 --> 00:00:24.463
This choice was driven by
tailwind's, adaptability, and
00:00:24.463 --> 00:00:26.023
its popularity among developers.
00:00:26.473 --> 00:00:29.143
Here's the thing, though, tailwind
and I don't really get along.
00:00:29.533 --> 00:00:32.923
I've spent years learning to create
design systems with traditional CSS.
00:00:33.313 --> 00:00:35.953
More recently, I found myself
building products using full blown
00:00:35.953 --> 00:00:39.613
UI libraries like Material UI because
they make it super fast to build a
00:00:39.613 --> 00:00:41.683
rich, functional, and accessible ui.
00:00:42.463 --> 00:00:45.703
By contrast, tailwind is somewhere
in the middle of these two things.
00:00:45.793 --> 00:00:49.303
On some level, it bypasses the
nuance to understanding and control
00:00:49.303 --> 00:00:51.073
that came with writing raw CSS.
00:00:51.463 --> 00:00:55.663
It's also not fully functional outta the
box like material UI or chakra are, and
00:00:55.663 --> 00:00:58.753
yet for so many reasons, it's really good
00:00:59.313 --> 00:01:01.593
for us Tailwind provides
some huge benefits.
00:01:01.683 --> 00:01:04.203
For example, speed tailwind's.
00:01:04.203 --> 00:01:07.113
Utility first approach allows
us to quickly implement designs
00:01:07.113 --> 00:01:09.093
without having to write custom CSS.
00:01:09.423 --> 00:01:12.003
This is especially useful when
we're iterating on designs and
00:01:12.003 --> 00:01:13.233
need to make changes quickly.
00:01:14.193 --> 00:01:18.243
Universality at Craftwork are
Stack includes Ruby on Rails next
00:01:18.243 --> 00:01:20.373
JS and React native tailwinds.
00:01:20.373 --> 00:01:23.493
Flexibility allows us to use the
same styling system across all these
00:01:23.493 --> 00:01:24.963
platforms, which is a huge win.
00:01:25.938 --> 00:01:29.778
Talent Craft work isn't just me
and it never will be tailwinds.
00:01:29.778 --> 00:01:32.748
Popularity across the industry
has made it almost trivial to find
00:01:32.748 --> 00:01:34.188
developers who are familiar with it.
00:01:34.548 --> 00:01:36.708
This is a huge win for
us as we grow our team.
00:01:38.043 --> 00:01:40.023
UI Libraries due to its popularity.
00:01:40.023 --> 00:01:44.043
There are many UI libraries that are
built around Tailwind, including Tailwind
00:01:44.043 --> 00:01:47.133
UI Shad, CN UI, and ACE Eternity.
00:01:47.523 --> 00:01:47.583
UI.
00:01:48.063 --> 00:01:49.263
Costs to license.
00:01:49.268 --> 00:01:50.673
Each of these libraries vary.
00:01:50.853 --> 00:01:54.303
Some are even free, and they're
essentially copy pastable components
00:01:54.303 --> 00:01:55.803
that you can use to build your products.
00:01:55.923 --> 00:01:56.553
That's very cool.
00:01:57.668 --> 00:01:59.958
What this means for us
in practice, tailwind's.
00:01:59.958 --> 00:02:02.628
Adaptability is what
really shines from day one.
00:02:02.628 --> 00:02:06.228
It has enabled us to onboard new teammates
and build interfaces more rapidly.
00:02:06.648 --> 00:02:10.098
It's consistent utility across our
entire stack means that regardless
00:02:10.098 --> 00:02:13.008
of the project, new team members
can quickly read, understand,
00:02:13.008 --> 00:02:14.418
and contribute to the code base.
00:02:14.928 --> 00:02:17.868
The decision to use tailwind
therefore wasn't just about adhering
00:02:17.868 --> 00:02:21.468
to current trends or sidestepping
the complexities of raw CSS.
00:02:21.693 --> 00:02:24.603
It was a strategic move to ensure
our team can hit the ground running,
00:02:24.813 --> 00:02:28.023
maintaining agility and coherence
across our diverse projects.
00:02:29.433 --> 00:02:32.073
This underscores a more important
principle in tech selection.
00:02:32.583 --> 00:02:36.483
Aligning tool choices with team dynamics
and project requirements is a skill.
00:02:36.873 --> 00:02:40.113
It's a delicate balancing act,
weighing the benefits of technological
00:02:40.113 --> 00:02:41.883
efficiency and team scalability
00:02:41.913 --> 00:02:44.823
against the richness of personal
expertise and the depth of
00:02:44.823 --> 00:02:45.963
traditional craftsmanship.
00:02:46.953 --> 00:02:50.073
It's a reminder that our growth as
developers is not just about keeping
00:02:50.073 --> 00:02:53.073
up with the latest tools or getting
entrenched in what we already know.
00:02:53.143 --> 00:02:56.533
It's also about valuing and
honing our foundational skills.
00:02:56.953 --> 00:02:58.933
Put another way for everything we build.
00:02:58.933 --> 00:03:00.973
We have to balance velocity and quality.
00:03:01.393 --> 00:03:03.943
Tailwind is a tool that gives
us wins in both columns.
00:03:03.943 --> 00:03:06.733
All that being said, I do still
have a wishlist for tailwind.
00:03:07.693 --> 00:03:11.473
I'd love to see better tooling
tailwind's approach to utility first,
00:03:11.478 --> 00:03:14.833
CSS is great for performance, but it
also means that we have to configure
00:03:14.833 --> 00:03:19.093
tailwind to compile per project so that
it only includes the styles we use.
00:03:20.003 --> 00:03:23.273
When this infrequently breaks, it can
be difficult to detect and debugging.
00:03:23.278 --> 00:03:24.473
It isn't always straightforward.
00:03:25.178 --> 00:03:27.188
I'd also like to see better IDE support.
00:03:27.788 --> 00:03:30.668
Tailwind provides a consistent
language for styling our apps.
00:03:30.728 --> 00:03:33.398
There are plugins for VS codes
and tele sense that make it
00:03:33.398 --> 00:03:36.008
easier to write tailwind classes,
but it doesn't always work.
00:03:36.668 --> 00:03:39.908
This can make it difficult to remember
the exact class names for certain styles
00:03:39.913 --> 00:03:41.738
and can slow down our development process.
00:03:42.908 --> 00:03:44.198
Prettier, prettier rules.
00:03:44.498 --> 00:03:47.468
Adding tailwind classes to HTML
means that we often have long lists
00:03:47.468 --> 00:03:49.178
of class names added to our HTML.
00:03:49.628 --> 00:03:52.728
This causes individual lines of code
to be very long, despite what many
00:03:52.733 --> 00:03:55.728
engineers will tell you, this is
demonstrably worse for UX than having
00:03:55.733 --> 00:03:57.528
class names listed on separate lines.
00:03:57.978 --> 00:04:00.138
There's lots of discussion about
building a prettier rule for
00:04:00.138 --> 00:04:02.658
this, but as far as I've seen,
there's not a great solution yet.
00:04:04.723 --> 00:04:06.763
So in the end, do I really hate Tailwind?
00:04:07.243 --> 00:04:08.653
Well, no, of course not.
00:04:09.163 --> 00:04:12.643
I've come to appreciate it for what it
is, a pragmatic choice that has helped
00:04:12.648 --> 00:04:15.658
us build better products faster, and
that's something I can get behind.
00:04:16.828 --> 00:04:17.728
I had love to hear from you.
00:04:17.818 --> 00:04:19.018
What are your thoughts on Tailwind?
00:04:19.168 --> 00:04:21.208
Do you have any tips for
using it more effectively?
00:04:21.388 --> 00:04:23.578
Is there a UI library
you love that I missed?
00:04:23.938 --> 00:04:25.378
Maybe you have a wishlist of your own.
00:04:26.008 --> 00:04:28.038
Let me on threads at irreverent mic.
NOTE
This file was generated by Descript
00:00:05.000 --> 00:00:06.290
Mike Bifulco: This is Tiny Improvements.
00:00:06.320 --> 00:00:07.369
I'm Mike by ko
00:00:13.033 --> 00:00:14.623
I hate Tailwind CSS.
00:00:14.953 --> 00:00:15.853
Here's why I use it.
00:00:17.023 --> 00:00:19.603
In the first days of building craft
work, I made the decision to use
00:00:19.603 --> 00:00:21.643
tailwind CSS for our projects.
00:00:21.853 --> 00:00:24.463
This choice was driven by
tailwind's, adaptability, and
00:00:24.463 --> 00:00:26.023
its popularity among developers.
00:00:26.473 --> 00:00:29.143
Here's the thing, though, tailwind
and I don't really get along.
00:00:29.533 --> 00:00:32.923
I've spent years learning to create
design systems with traditional CSS.
00:00:33.313 --> 00:00:35.953
More recently, I found myself
building products using full blown
00:00:35.953 --> 00:00:39.613
UI libraries like Material UI because
they make it super fast to build a
00:00:39.613 --> 00:00:41.683
rich, functional, and accessible ui.
00:00:42.463 --> 00:00:45.703
By contrast, tailwind is somewhere
in the middle of these two things.
00:00:45.793 --> 00:00:49.303
On some level, it bypasses the
nuance to understanding and control
00:00:49.303 --> 00:00:51.073
that came with writing raw CSS.
00:00:51.463 --> 00:00:55.663
It's also not fully functional outta the
box like material UI or chakra are, and
00:00:55.663 --> 00:00:58.753
yet for so many reasons, it's really good
00:00:59.313 --> 00:01:01.593
for us Tailwind provides
some huge benefits.
00:01:01.683 --> 00:01:04.203
For example, speed tailwind's.
00:01:04.203 --> 00:01:07.113
Utility first approach allows
us to quickly implement designs
00:01:07.113 --> 00:01:09.093
without having to write custom CSS.
00:01:09.423 --> 00:01:12.003
This is especially useful when
we're iterating on designs and
00:01:12.003 --> 00:01:13.233
need to make changes quickly.
00:01:14.193 --> 00:01:18.243
Universality at Craftwork are
Stack includes Ruby on Rails next
00:01:18.243 --> 00:01:20.373
JS and React native tailwinds.
00:01:20.373 --> 00:01:23.493
Flexibility allows us to use the
same styling system across all these
00:01:23.493 --> 00:01:24.963
platforms, which is a huge win.
00:01:25.938 --> 00:01:29.778
Talent Craft work isn't just me
and it never will be tailwinds.
00:01:29.778 --> 00:01:32.748
Popularity across the industry
has made it almost trivial to find
00:01:32.748 --> 00:01:34.188
developers who are familiar with it.
00:01:34.548 --> 00:01:36.708
This is a huge win for
us as we grow our team.
00:01:38.043 --> 00:01:40.023
UI Libraries due to its popularity.
00:01:40.023 --> 00:01:44.043
There are many UI libraries that are
built around Tailwind, including Tailwind
00:01:44.043 --> 00:01:47.133
UI Shad, CN UI, and ACE Eternity.
00:01:47.523 --> 00:01:47.583
UI.
00:01:48.063 --> 00:01:49.263
Costs to license.
00:01:49.268 --> 00:01:50.673
Each of these libraries vary.
00:01:50.853 --> 00:01:54.303
Some are even free, and they're
essentially copy pastable components
00:01:54.303 --> 00:01:55.803
that you can use to build your products.
00:01:55.923 --> 00:01:56.553
That's very cool.
00:01:57.668 --> 00:01:59.958
What this means for us
in practice, tailwind's.
00:01:59.958 --> 00:02:02.628
Adaptability is what
really shines from day one.
00:02:02.628 --> 00:02:06.228
It has enabled us to onboard new teammates
and build interfaces more rapidly.
00:02:06.648 --> 00:02:10.098
It's consistent utility across our
entire stack means that regardless
00:02:10.098 --> 00:02:13.008
of the project, new team members
can quickly read, understand,
00:02:13.008 --> 00:02:14.418
and contribute to the code base.
00:02:14.928 --> 00:02:17.868
The decision to use tailwind
therefore wasn't just about adhering
00:02:17.868 --> 00:02:21.468
to current trends or sidestepping
the complexities of raw CSS.
00:02:21.693 --> 00:02:24.603
It was a strategic move to ensure
our team can hit the ground running,
00:02:24.813 --> 00:02:28.023
maintaining agility and coherence
across our diverse projects.
00:02:29.433 --> 00:02:32.073
This underscores a more important
principle in tech selection.
00:02:32.583 --> 00:02:36.483
Aligning tool choices with team dynamics
and project requirements is a skill.
00:02:36.873 --> 00:02:40.113
It's a delicate balancing act,
weighing the benefits of technological
00:02:40.113 --> 00:02:41.883
efficiency and team scalability
00:02:41.913 --> 00:02:44.823
against the richness of personal
expertise and the depth of
00:02:44.823 --> 00:02:45.963
traditional craftsmanship.
00:02:46.953 --> 00:02:50.073
It's a reminder that our growth as
developers is not just about keeping
00:02:50.073 --> 00:02:53.073
up with the latest tools or getting
entrenched in what we already know.
00:02:53.143 --> 00:02:56.533
It's also about valuing and
honing our foundational skills.
00:02:56.953 --> 00:02:58.933
Put another way for everything we build.
00:02:58.933 --> 00:03:00.973
We have to balance velocity and quality.
00:03:01.393 --> 00:03:03.943
Tailwind is a tool that gives
us wins in both columns.
00:03:03.943 --> 00:03:06.733
All that being said, I do still
have a wishlist for tailwind.
00:03:07.693 --> 00:03:11.473
I'd love to see better tooling
tailwind's approach to utility first,
00:03:11.478 --> 00:03:14.833
CSS is great for performance, but it
also means that we have to configure
00:03:14.833 --> 00:03:19.093
tailwind to compile per project so that
it only includes the styles we use.
00:03:20.003 --> 00:03:23.273
When this infrequently breaks, it can
be difficult to detect and debugging.
00:03:23.278 --> 00:03:24.473
It isn't always straightforward.
00:03:25.178 --> 00:03:27.188
I'd also like to see better IDE support.
00:03:27.788 --> 00:03:30.668
Tailwind provides a consistent
language for styling our apps.
00:03:30.728 --> 00:03:33.398
There are plugins for VS codes
and tele sense that make it
00:03:33.398 --> 00:03:36.008
easier to write tailwind classes,
but it doesn't always work.
00:03:36.668 --> 00:03:39.908
This can make it difficult to remember
the exact class names for certain styles
00:03:39.913 --> 00:03:41.738
and can slow down our development process.
00:03:42.908 --> 00:03:44.198
Prettier, prettier rules.
00:03:44.498 --> 00:03:47.468
Adding tailwind classes to HTML
means that we often have long lists
00:03:47.468 --> 00:03:49.178
of class names added to our HTML.
00:03:49.628 --> 00:03:52.728
This causes individual lines of code
to be very long, despite what many
00:03:52.733 --> 00:03:55.728
engineers will tell you, this is
demonstrably worse for UX than having
00:03:55.733 --> 00:03:57.528
class names listed on separate lines.
00:03:57.978 --> 00:04:00.138
There's lots of discussion about
building a prettier rule for
00:04:00.138 --> 00:04:02.658
this, but as far as I've seen,
there's not a great solution yet.
00:04:04.723 --> 00:04:06.763
So in the end, do I really hate Tailwind?
00:04:07.243 --> 00:04:08.653
Well, no, of course not.
00:04:09.163 --> 00:04:12.643
I've come to appreciate it for what it
is, a pragmatic choice that has helped
00:04:12.648 --> 00:04:15.658
us build better products faster, and
that's something I can get behind.
00:04:16.828 --> 00:04:17.728
I had love to hear from you.
00:04:17.818 --> 00:04:19.018
What are your thoughts on Tailwind?
00:04:19.168 --> 00:04:21.208
Do you have any tips for
using it more effectively?
00:04:21.388 --> 00:04:23.578
Is there a UI library
you love that I missed?
00:04:23.938 --> 00:04:25.378
Maybe you have a wishlist of your own.
00:04:26.008 --> 00:04:28.038
Let me on threads at irreverent mic.
