People have been debating the merits of Tailwind on twitter recently, so let's look at the pros and cons of this popular CSS library. 

#css #webdevelopment #TheCodeReport

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

Tailwind Docs https://tailwindcss.com/
Source Tweet https://twitter.com/shadcn/status/1613595843059404800
Tailwind in 100 Seconds https://youtu.be/mr15Xzb1Ook
Pico CSS https://picocss.com/
VS Code Inline Fold https://github.com/moalamri/vscode-inline-fold


🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Should I use tailwind?
- Why is tailwind popular?
- Tailwind vs CSS?
- Tailwind pro tips
- Twitter drama about CSS and web development
2024-02-04T05:14:21.527Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d79cf270-af02-46e1-8a3d-5b7a3a3cb972
63be4bc700af50a2cbeb3ea357e930b75a496f1b4898e4afa35d2cc2f06c2f30
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is January 16, 2023, and you're watching the Code Report.
Tailwind is the worst way to do CSS, except for all the ways that have been tried.
An epic war erupted yesterday after somebody had the audacity to post a Tailwind snippet on Twitter.
The Allied Tailwind Alliance defended this code, while the unified CSS fundamentalists said horrible dehumanizing things about it, like it's not even real CSS.
As a result, many insecure nerds suffered slightly hurt feelings from hearing mild criticisms about technology choices that their clients will never care about.
It was truly horrific.
I decided to run a poll to see where you guys fall, and although most have never tried it, 4 other 5 people that have tried Tailwind love it.
Still though, it has its trade offs and may not be a good fit for every project.
In this video, I want to explain the problems Tailwind solves because it's obvious that many people don't understand them, yet still have no problem hating on a free and open source tool publicly.
I personally joined the Tailwind cult a couple years ago after refusing to drink the Kool Aid for quite a while.
In my experience, it's a tool like TypeScript or Svelte that makes it really hard to go back to the thing you were using before because it saves a ton of time, and becoming a productive developer other is all about using your time wisely.
The first problem with CSS is colocation.
The standard practice for the last 20 years has been to separate your CSS other markup to provide a good separation of concerns, and doing otherwise means you go to hell.
As programmers, we know the hardest part of the job is naming things, and this practice requires you to come up with a lot of arbitrary names that are often pointless.
A few weeks later when you come back to modify this code, it becomes difficult to figure out which styles actually apply to each element, because other totally forgotten what these class names do.
And you might have used these class names in multiple places, so if you try to change it, it could break unexpected parts of the UI.
Other Tailwind addresses this problem by giving you standard utility classes that are co located in the HTML.
This results in disgusting bloated HTML that looks like blasphemous inline styles at first glance, and that's a very valid criticism and likely the main turn off for people when they first look into using Tailwind.
However, the benefit is that you don't have all these arbitrary class names anymore and know exactly which styles apply to it.
And that just clears a ton of mental overhead from your plate.
You can make modifications safely without breaking other parts of the app.
Also, here's a little pro tip.
Pro tip.
Pro tip.
If you're using Tailwind and hate the way your HTML looks, the inline fold Versus Code extension can automatically minimize it for you.
Problem number 2 is that CSS is verbose.
Remember, everything in Tailwind is just CSS.
Hover over any class to view the actual CSS code.
What's cool about it though is that it uses clever naming conventions like inset 0 to do something in one line of code that would take 6 lines of CSS because it combines properties and values together.
I would estimate that tailwind results in approximately 1 third the total amount of code that you would have with vanilla CSS, CSS, and the best type of code is the code you never have to write.
However, a valid criticism of this approach is that you have to learn an abstraction on top of CSS, others, which is not ideal.
It's always best to use the platform natively, but the web platform is often cruel and vengeful.
Now problem 3 is that CSS gives you too much control over the UI, while frameworks like Bootstrap are too difficult to customize.
Tailwind falls right in the middle of these, giving you a standard set of constraints to make sure the UI looks good, but tends to be much easier to customize others, to accommodate any design.
Like, when you build a Bootstrap app, it always tends to look like a Bootstrap app.
With Tailwind, it's not so obvious.
Now the final problem I wanna talk about is zombie styles.
We have a tendency to write styles that never actually get used and just bloat the CSS bundle.
Tailwind will automatically purge all unused styles to kill the zombies and remove this dead code.
That's pretty cool, but the drawback is that Tailwind is a pretty heavy handed approach.
It takes, like, 5 steps to set up to install the Tailwind CLI, post CSS, and the Versus Code extension.
For that other reason, I only use it on big projects.
For smaller demos, I've been using pico CSS, which can make things look good with 0 effort, thanks to its classless approach.
Other.
As you can see, there are many pros and cons to a library like Tailwind.
Ultimately, here's a good rule you can go by.
If you like Tailwind, use it.
If you don't like Tailwind, don't use it.
Nobody cares.
Literally, otherly nobody cares about your technology choices except you.
This has been the CodeReport, thanks for watching, and I will see you in the next one.

Speaker 0: It is January 16, 2023, and you're watching the Code Report. Tailwind is the worst way to do CSS, except for all the ways that have been tried. An epic war erupted yesterday after somebody had the audacity to post a Tailwind snippet on Twitter. The Allied Tailwind Alliance defended this code, while the unified CSS fundamentalists said horrible dehumanizing things about it, like it's not even real CSS. As a result, many insecure nerds suffered slightly hurt feelings from hearing mild criticisms about technology choices that their clients will never care about.

It was truly horrific. I decided to run a poll to see where you guys fall, and although most have never tried it, 4 other 5 people that have tried Tailwind love it. Still though, it has its trade offs and may not be a good fit for every project. In this video, I want to explain the problems Tailwind solves because it's obvious that many people don't understand them, yet still have no problem hating on a free and open source tool publicly. I personally joined the Tailwind cult a couple years ago after refusing to drink the Kool Aid for quite a while.

In my experience, it's a tool like TypeScript or Svelte that makes it really hard to go back to the thing you were using before because it saves a ton of time, and becoming a productive developer other is all about using your time wisely. The first problem with CSS is colocation. The standard practice for the last 20 years has been to separate your CSS other markup to provide a good separation of concerns, and doing otherwise means you go to hell. As programmers, we know the hardest part of the job is naming things, and this practice requires you to come up with a lot of arbitrary names that are often pointless. A few weeks later when you come back to modify this code, it becomes difficult to figure out which styles actually apply to each element, because other totally forgotten what these class names do.

And you might have used these class names in multiple places, so if you try to change it, it could break unexpected parts of the UI. Other Tailwind addresses this problem by giving you standard utility classes that are co located in the HTML. This results in disgusting bloated HTML that looks like blasphemous inline styles at first glance, and that's a very valid criticism and likely the main turn off for people when they first look into using Tailwind. However, the benefit is that you don't have all these arbitrary class names anymore and know exactly which styles apply to it. And that just clears a ton of mental overhead from your plate.

You can make modifications safely without breaking other parts of the app. Also, here's a little pro tip. Pro tip. Pro tip. If you're using Tailwind and hate the way your HTML looks, the inline fold Versus Code extension can automatically minimize it for you.

Problem number 2 is that CSS is verbose. Remember, everything in Tailwind is just CSS. Hover over any class to view the actual CSS code. What's cool about it though is that it uses clever naming conventions like inset 0 to do something in one line of code that would take 6 lines of CSS because it combines properties and values together. I would estimate that tailwind results in approximately 1 third the total amount of code that you would have with vanilla CSS, CSS, and the best type of code is the code you never have to write.

However, a valid criticism of this approach is that you have to learn an abstraction on top of CSS, others, which is not ideal. It's always best to use the platform natively, but the web platform is often cruel and vengeful. Now problem 3 is that CSS gives you too much control over the UI, while frameworks like Bootstrap are too difficult to customize. Tailwind falls right in the middle of these, giving you a standard set of constraints to make sure the UI looks good, but tends to be much easier to customize others, to accommodate any design. Like, when you build a Bootstrap app, it always tends to look like a Bootstrap app.

With Tailwind, it's not so obvious. Now the final problem I wanna talk about is zombie styles. We have a tendency to write styles that never actually get used and just bloat the CSS bundle. Tailwind will automatically purge all unused styles to kill the zombies and remove this dead code. That's pretty cool, but the drawback is that Tailwind is a pretty heavy handed approach.

It takes, like, 5 steps to set up to install the Tailwind CLI, post CSS, and the Versus Code extension. For that other reason, I only use it on big projects. For smaller demos, I've been using pico CSS, which can make things look good with 0 effort, thanks to its classless approach. Other. As you can see, there are many pros and cons to a library like Tailwind.

Ultimately, here's a good rule you can go by. If you like Tailwind, use it. If you don't like Tailwind, don't use it. Nobody cares. Literally, otherly nobody cares about your technology choices except you.

This has been the CodeReport, thanks for watching, and I will see you in the next one.
It is January 16, 2023, and you're watching the Code Report. Tailwind is the worst way to do CSS, except for all the ways that have been tried.
An epic war erupted yesterday after somebody had the audacity to post a Tailwind snippet on Twitter. The Allied Tailwind Alliance defended this code, while the unified CSS fundamentalists said horrible dehumanizing things about it, like it's not even real CSS. As a result, many insecure nerds suffered slightly hurt feelings from hearing mild criticisms about technology choices that their clients will never care about.
war
terrorism
weapons
fascism
It was truly horrific. I decided to run a poll to see where you guys fall, and although most have never tried it, 4 other 5 people that have tried Tailwind love it. Still though, it has its trade offs and may not be a good fit for every project. In this video, I want to explain the problems Tailwind solves because it's obvious that many people don't understand them, yet still have no problem hating on a free and open source tool publicly. I personally joined the Tailwind cult a couple years ago after refusing to drink the Kool Aid for quite a while. In my experience, it's a tool like TypeScript or Svelte that makes it really hard to go back to the thing you were using before because it saves a ton of time, and becoming a productive developer other is all about using your time wisely. The first problem with CSS is colocation. The standard practice for the last 20 years has been to separate your CSS other markup to provide a good separation of concerns, and doing otherwise means you go to hell. As programmers, we know the hardest part of the job is naming things, and this practice requires you to come up with a lot of arbitrary names that are often pointless. A few weeks later when you come back to modify this code, it becomes difficult to figure out which styles actually apply to each element, because other totally forgotten what these class names do. And you might have used these class names in multiple places, so if you try to change it, it could break unexpected parts of the UI. Other Tailwind addresses this problem by giving you standard utility classes that are co located in the HTML. This results in disgusting bloated HTML that looks like blasphemous inline styles at first glance, and that's a very valid criticism and likely the main turn off for people when they first look into using Tailwind. However, the benefit is that you don't have all these arbitrary class names anymore and know exactly which styles apply to it. And that just clears a ton of mental overhead from your plate. You can make modifications safely without breaking other parts of the app. Also, here's a little pro tip. Pro tip. Pro tip. If you're using Tailwind and hate the way your HTML looks, the inline fold Versus Code extension can automatically minimize it for you. Problem number 2 is that CSS is verbose. Remember, everything in Tailwind is just CSS. Hover over any class to view the actual CSS code. What's cool about it though is that it uses clever naming conventions like inset 0 to do something in one line of code that would take 6 lines of CSS because it combines properties and values together. I would estimate that tailwind results in approximately 1 third the total amount of code that you would have with vanilla CSS, CSS, and the best type of code is the code you never have to write. However, a valid criticism of this approach is that you have to learn an abstraction on top of CSS, others, which is not ideal. It's always best to use the platform natively, but the web platform is often cruel and vengeful. Now problem 3 is that CSS gives you too much control over the UI, while frameworks like Bootstrap are too difficult to customize. Tailwind falls right in the middle of these, giving you a standard set of constraints to make sure the UI looks good, but tends to be much easier to customize others, to accommodate any design. Like, when you build a Bootstrap app, it always tends to look like a Bootstrap app. With Tailwind, it's not so obvious. Now the final problem I wanna talk about is zombie styles. We have a tendency to write styles that never actually get used and just bloat the CSS bundle. Tailwind will automatically purge all unused styles to kill the zombies and remove this dead code.
That's pretty cool, but the drawback is that Tailwind is a pretty heavy handed approach. It takes, like, 5 steps to set up to install the Tailwind CLI, post CSS, and the Versus Code extension. For that other reason, I only use it on big projects. For smaller demos, I've been using pico CSS, which can make things look good with 0 effort, thanks to its classless approach. Other. As you can see, there are many pros and cons to a library like Tailwind. Ultimately, here's a good rule you can go by.
graphic design
multimedia
visualization
video gaming
computer science
If you like Tailwind, use it. If you don't like Tailwind, don't use it. Nobody cares. Literally, otherly nobody cares about your technology choices except you. This has been the CodeReport, thanks for watching, and I will see you in the next one.
It is January 16, 2023, and you're watching the Code Report. Tailwind is the worst way to do CSS, except for all the ways that have been tried. An epic war erupted yesterday after somebody had the audacity to post a Tailwind snippet on Twitter. The Allied Tailwind Alliance defended this code, while the unified CSS fundamentalists said horrible dehumanizing things about it, like it's not even real CSS. As a result, many insecure nerds suffered slightly hurt feelings from hearing mild criticisms about technology choices that their clients will never care about. It was truly horrific. I decided to run a poll to see where you guys fall, and although most have never tried it, 4 other 5 people that have tried Tailwind love it. Still though, it has its trade offs and may not be a good fit for every project. In this video, I want to explain the problems Tailwind solves because it's obvious that many people don't understand them, yet still have no problem hating on a free and open source tool publicly. I personally joined the Tailwind cult a couple years ago after refusing to drink the Kool Aid for quite a while. In my experience, it's a tool like TypeScript or Svelte that makes it really hard to go back to the thing you were using before because it saves a ton of time, and becoming a productive developer other is all about using your time wisely. The first problem with CSS is colocation. The standard practice for the last 20 years has been to separate your CSS other markup to provide a good separation of concerns, and doing otherwise means you go to hell. As programmers, we know the hardest part of the job is naming things, and this practice requires you to come up with a lot of arbitrary names that are often pointless. A few weeks later when you come back to modify this code, it becomes difficult to figure out which styles actually apply to each element, because other totally forgotten what these class names do. And you might have used these class names in multiple places, so if you try to change it, it could break unexpected parts of the UI. Other Tailwind addresses this problem by giving you standard utility classes that are co located in the HTML. This results in disgusting bloated HTML that looks like blasphemous inline styles at first glance, and that's a very valid criticism and likely the main turn off for people when they first look into using Tailwind. However, the benefit is that you don't have all these arbitrary class names anymore and know exactly which styles apply to it. And that just clears a ton of mental overhead from your plate. You can make modifications safely without breaking other parts of the app. Also, here's a little pro tip. Pro tip. Pro tip. If you're using Tailwind and hate the way your HTML looks, the inline fold Versus Code extension can automatically minimize it for you. Problem number 2 is that CSS is verbose. Remember, everything in Tailwind is just CSS. Hover over any class to view the actual CSS code. What's cool about it though is that it uses clever naming conventions like inset 0 to do something in one line of code that would take 6 lines of CSS because it combines properties and values together. I would estimate that tailwind results in approximately 1 third the total amount of code that you would have with vanilla CSS, CSS, and the best type of code is the code you never have to write. However, a valid criticism of this approach is that you have to learn an abstraction on top of CSS, others, which is not ideal. It's always best to use the platform natively, but the web platform is often cruel and vengeful. Now problem 3 is that CSS gives you too much control over the UI, while frameworks like Bootstrap are too difficult to customize. Tailwind falls right in the middle of these, giving you a standard set of constraints to make sure the UI looks good, but tends to be much easier to customize others, to accommodate any design. Like, when you build a Bootstrap app, it always tends to look like a Bootstrap app. With Tailwind, it's not so obvious. Now the final problem I wanna talk about is zombie styles. We have a tendency to write styles that never actually get used and just bloat the CSS bundle. Tailwind will automatically purge all unused styles to kill the zombies and remove this dead code. That's pretty cool, but the drawback is that Tailwind is a pretty heavy handed approach. It takes, like, 5 steps to set up to install the Tailwind CLI, post CSS, and the Versus Code extension. For that other reason, I only use it on big projects. For smaller demos, I've been using pico CSS, which can make things look good with 0 effort, thanks to its classless approach. Other. As you can see, there are many pros and cons to a library like Tailwind. Ultimately, here's a good rule you can go by. If you like Tailwind, use it. If you don't like Tailwind, don't use it. Nobody cares. Literally, otherly nobody cares about your technology choices except you. This has been the CodeReport, thanks for watching, and I will see you in the next one.
It
it
is
is
January
january
16,
16
2023,
2023
and
and
you're
you're
watching
watching
the
the
Code
code
Report.
report
Tailwind
tailwind
is
is
the
the
worst
worst
way
way
to
to
do
do
CSS,
css
except
except
for
for
all
all
the
the
ways
ways
that
that
have
have
been
been
tried.
tried
An
an
epic
epic
war
war
erupted
erupted
yesterday
yesterday
after
after
somebody
somebody
had
had
the
the
audacity
audacity
to
to
post
post
a
a
Tailwind
tailwind
snippet
snippet
on
on
Twitter.
twitter
The
the
Allied
allied
Tailwind
tailwind
Alliance
alliance
defended
defended
this
this
code,
code
while
while
the
the
unified
unified
CSS
css
fundamentalists
fundamentalists
said
said
horrible
horrible
dehumanizing
dehumanizing
things
things
about
about
it,
it
like
like
it's
it's
not
not
even
even
real
real
CSS.
css
As
as
a
a
result,
result
many
many
insecure
insecure
nerds
nerds
suffered
suffered
slightly
slightly
hurt
hurt
feelings
feelings
from
from
hearing
hearing
mild
mild
criticisms
criticisms
about
about
technology
technology
choices
choices
that
that
their
their
clients
clients
will
will
never
never
care
care
about.
about
It
it
was
was
truly
truly
horrific.
horrific
I
i
decided
decided
to
to
run
run
a
a
poll
poll
to
to
see
see
where
where
you
you
guys
guys
fall,
fall
and
and
although
although
most
most
have
have
never
never
tried
tried
it,
it
4
4
other
other
5
5
people
people
that
that
have
have
tried
tried
Tailwind
tailwind
love
love
it.
it
Still
still
though,
though
it
it
has
has
its
its
trade
trade
offs
offs
and
and
may
may
not
not
be
be
a
a
good
good
fit
fit
for
for
every
every
project.
project
In
in
this
this
video,
video
I
i
want
want
to
to
explain
explain
the
the
problems
problems
Tailwind
tailwind
solves
solves
because
because
it's
it's
obvious
obvious
that
that
many
many
people
people
don't
don't
understand
understand
them,
them
yet
yet
still
still
have
have
no
no
problem
problem
hating
hating
on
on
a
a
free
free
and
and
open
open
source
source
tool
tool
publicly.
publicly
I
i
personally
personally
joined
joined
the
the
Tailwind
tailwind
cult
cult
a
a
couple
couple
years
years
ago
ago
after
after
refusing
refusing
to
to
drink
drink
the
the
Kool
kool
Aid
aid
for
for
quite
quite
a
a
while.
while
In
in
my
my
experience,
experience
it's
it's
a
a
tool
tool
like
like
TypeScript
typescript
or
or
Svelte
svelte
that
that
makes
makes
it
it
really
really
hard
hard
to
to
go
go
back
back
to
to
the
the
thing
thing
you
you
were
were
using
using
before
before
because
because
it
it
saves
saves
a
a
ton
ton
of
of
time,
time
and
and
becoming
becoming
a
a
productive
productive
developer
developer
other
other
is
is
all
all
about
about
using
using
your
your
time
time
wisely.
wisely
The
the
first
first
problem
problem
with
with
CSS
css
is
is
colocation.
colocation
The
the
standard
standard
practice
practice
for
for
the
the
last
last
20
20
years
years
has
has
been
been
to
to
separate
separate
your
your
CSS
css
other
other
markup
markup
to
to
provide
provide
a
a
good
good
separation
separation
of
of
concerns,
concerns
and
and
doing
doing
otherwise
otherwise
means
means
you
you
go
go
to
to
hell.
hell
As
as
programmers,
programmers
we
we
know
know
the
the
hardest
hardest
part
part
of
of
the
the
job
job
is
is
naming
naming
things,
things
and
and
this
this
practice
practice
requires
requires
you
you
to
to
come
come
up
up
with
with
a
a
lot
lot
of
of
arbitrary
arbitrary
names
names
that
that
are
are
often
often
pointless.
pointless
A
a
few
few
weeks
weeks
later
later
when
when
you
you
come
come
back
back
to
to
modify
modify
this
this
code,
code
it
it
becomes
becomes
difficult
difficult
to
to
figure
figure
out
out
which
which
styles
styles
actually
actually
apply
apply
to
to
each
each
element,
element
because
because
other
other
totally
totally
forgotten
forgotten
what
what
these
these
class
class
names
names
do.
do
And
and
you
you
might
might
have
have
used
used
these
these
class
class
names
names
in
in
multiple
multiple
places,
places
so
so
if
if
you
you
try
try
to
to
change
change
it,
it
it
it
could
could
break
break
unexpected
unexpected
parts
parts
of
of
the
the
UI.
ui
Other
other
Tailwind
tailwind
addresses
addresses
this
this
problem
problem
by
by
giving
giving
you
you
standard
standard
utility
utility
classes
classes
that
that
are
are
co
co
located
located
in
in
the
the
HTML.
html
This
this
results
results
in
in
disgusting
disgusting
bloated
bloated
HTML
html
that
that
looks
looks
like
like
blasphemous
blasphemous
inline
inline
styles
styles
at
at
first
first
glance,
glance
and
and
that's
that's
a
a
very
very
valid
valid
criticism
criticism
and
and
likely
likely
the
the
main
main
turn
turn
off
off
for
for
people
people
when
when
they
they
first
first
look
look
into
into
using
using
Tailwind.
tailwind
However,
however
the
the
benefit
benefit
is
is
that
that
you
you
don't
don't
have
have
all
all
these
these
arbitrary
arbitrary
class
class
names
names
anymore
anymore
and
and
know
know
exactly
exactly
which
which
styles
styles
apply
apply
to
to
it.
it
And
and
that
that
just
just
clears
clears
a
a
ton
ton
of
of
mental
mental
overhead
overhead
from
from
your
your
plate.
plate
You
you
can
can
make
make
modifications
modifications
safely
safely
without
without
breaking
breaking
other
other
parts
parts
of
of
the
the
app.
app
Also,
also
here's
here's
a
a
little
little
pro
pro
tip.
tip
Pro
pro
tip.
tip
Pro
pro
tip.
tip
If
if
you're
you're
using
using
Tailwind
tailwind
and
and
hate
hate
the
the
way
way
your
your
HTML
html
looks,
looks
the
the
inline
inline
fold
fold
Versus
versus
Code
code
extension
extension
can
can
automatically
automatically
minimize
minimize
it
it
for
for
you.
you
Problem
problem
number
number
2
2
is
is
that
that
CSS
css
is
is
verbose.
verbose
Remember,
remember
everything
everything
in
in
Tailwind
tailwind
is
is
just
just
CSS.
css
Hover
hover
over
over
any
any
class
class
to
to
view
view
the
the
actual
actual
CSS
css
code.
code
What's
what's
cool
cool
about
about
it
it
though
though
is
is
that
that
it
it
uses
uses
clever
clever
naming
naming
conventions
conventions
like
like
inset
inset
0
0
to
to
do
do
something
something
in
in
one
one
line
line
of
of
code
code
that
that
would
would
take
take
6
6
lines
lines
of
of
CSS
css
because
because
it
it
combines
combines
properties
properties
and
and
values
values
together.
together
I
i
would
would
estimate
estimate
that
that
tailwind
tailwind
results
results
in
in
approximately
approximately
1
1
third
third
the
the
total
total
amount
amount
of
of
code
code
that
that
you
you
would
would
have
have
with
with
vanilla
vanilla
CSS,
css
CSS,
css
and
and
the
the
best
best
type
type
of
of
code
code
is
is
the
the
code
code
you
you
never
never
have
have
to
to
write.
write
However,
however
a
a
valid
valid
criticism
criticism
of
of
this
this
approach
approach
is
is
that
that
you
you
have
have
to
to
learn
learn
an
an
abstraction
abstraction
on
on
top
top
of
of
CSS,
css
others,
others
which
which
is
is
not
not
ideal.
ideal
It's
it's
always
always
best
best
to
to
use
use
the
the
platform
platform
natively,
natively
but
but
the
the
web
web
platform
platform
is
is
often
often
cruel
cruel
and
and
vengeful.
vengeful
Now
now
problem
problem
3
3
is
is
that
that
CSS
css
gives
gives
you
you
too
too
much
much
control
control
over
over
the
the
UI,
ui
while
while
frameworks
frameworks
like
like
Bootstrap
bootstrap
are
are
too
too
difficult
difficult
to
to
customize.
customize
Tailwind
tailwind
falls
falls
right
right
in
in
the
the
middle
middle
of
of
these,
these
giving
giving
you
you
a
a
standard
standard
set
set
of
of
constraints
constraints
to
to
make
make
sure
sure
the
the
UI
ui
looks
looks
good,
good
but
but
tends
tends
to
to
be
be
much
much
easier
easier
to
to
customize
customize
others,
others
to
to
accommodate
accommodate
any
any
design.
design
Like,
like
when
when
you
you
build
build
a
a
Bootstrap
bootstrap
app,
app
it
it
always
always
tends
tends
to
to
look
look
like
like
a
a
Bootstrap
bootstrap
app.
app
With
with
Tailwind,
tailwind
it's
it's
not
not
so
so
obvious.
obvious
Now
now
the
the
final
final
problem
problem
I
i
wanna
wanna
talk
talk
about
about
is
is
zombie
zombie
styles.
styles
We
we
have
have
a
a
tendency
tendency
to
to
write
write
styles
styles
that
that
never
never
actually
actually
get
get
used
used
and
and
just
just
bloat
bloat
the
the
CSS
css
bundle.
bundle
Tailwind
tailwind
will
will
automatically
automatically
purge
purge
all
all
unused
unused
styles
styles
to
to
kill
kill
the
the
zombies
zombies
and
and
remove
remove
this
this
dead
dead
code.
code
That's
that's
pretty
pretty
cool,
cool
but
but
the
the
drawback
drawback
is
is
that
that
Tailwind
tailwind
is
is
a
a
pretty
pretty
heavy
heavy
handed
handed
approach.
approach
It
it
takes,
takes
like,
like
5
5
steps
steps
to
to
set
set
up
up
to
to
install
install
the
the
Tailwind
tailwind
CLI,
cli
post
post
CSS,
css
and
and
the
the
Versus
versus
Code
code
extension.
extension
For
for
that
that
other
other
reason,
reason
I
i
only
only
use
use
it
it
on
on
big
big
projects.
projects
For
for
smaller
smaller
demos,
demos
I've
i've
been
been
using
using
pico
pico
CSS,
css
which
which
can
can
make
make
things
things
look
look
good
good
with
with
0
0
effort,
effort
thanks
thanks
to
to
its
its
classless
classless
approach.
approach
Other.
other
As
as
you
you
can
can
see,
see
there
there
are
are
many
many
pros
pros
and
and
cons
cons
to
to
a
a
library
library
like
like
Tailwind.
tailwind
Ultimately,
ultimately
here's
here's
a
a
good
good
rule
rule
you
you
can
can
go
go
by.
by
If
if
you
you
like
like
Tailwind,
tailwind
use
use
it.
it
If
if
you
you
don't
don't
like
like
Tailwind,
tailwind
don't
don't
use
use
it.
it
Nobody
nobody
cares.
cares
Literally,
literally
otherly
otherly
nobody
nobody
cares
cares
about
about
your
your
technology
technology
choices
choices
except
except
you.
you
This
this
has
has
been
been
the
the
CodeReport,
codereport
thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The transcript discusses the problems caused by the Tailwind code, including colocation, mistakes, and poor UI. The transcript gives advice on how to use the code, including the importance of learning an abstraction on top of CSS and avoiding mistakes. The transcript also mentions the pros and cons of using the code, and gives a rule for not using it if one is not a fan of the technology.
Tailwind CSS is the worst…
It is January 16, 2023, and you're watching the Code Report. Tailwind is the worst way to do CSS, except for all the ways that have been tried. An epic war erupted yesterday after somebody had the audacity to post a Tailwind snippet on Twitter. The Allied Tailwind Alliance defended this code, while the unified CSS fundamentalists said horrible dehumanizing things about it, like it's not even real CSS. As a result, many insecure nerds suffered slightly hurt feelings from hearing mild criticisms about technology choices that their clients will never care about. It was truly horrific. I decided to run a poll to see where you guys fall, and although most have never tried it, 4 other 5 people that have tried Tailwind love it. Still though, it has its trade offs and may not be a good fit for every project. In this video, I want to explain the problems Tailwind solves because it's obvious that many people don't understand them, yet still have no problem hating on a free and open source tool publicly. I personally joined the Tailwind cult a couple years ago after refusing to drink the Kool Aid for quite a while. In my experience, it's a tool like TypeScript or Svelte that makes it really hard to go back to the thing you were using before because it saves a ton of time, and becoming a productive developer other is all about using your time wisely. The first problem with CSS is colocation. The standard practice for the last 20 years has been to separate your CSS other markup to provide a good separation of concerns, and doing otherwise means you go to hell. As programmers, we know the hardest part of the job is naming things, and this practice requires you to come up with a lot of arbitrary names that are often pointless. A few weeks later when you come back to modify this code, it becomes difficult to figure out which styles actually apply to each element, because other totally forgotten what these class names do. And you might have used these class names in multiple places, so if you try to change it, it could break unexpected parts of the UI. Other Tailwind addresses this problem by giving you standard utility classes that are co located in the HTML. This results in disgusting bloated HTML that looks like blasphemous inline styles at first glance, and that's a very valid criticism and likely the main turn off for people when they first look into using Tailwind. However, the benefit is that you don't have all these arbitrary class names anymore and know exactly which styles apply to it. And that just clears a ton of mental overhead from your plate. You can make modifications safely without breaking other parts of the app. Also, here's a little pro tip. Pro tip. Pro tip. If you're using Tailwind and hate the way your HTML looks, the inline fold Versus Code extension can automatically minimize it for you. Problem number 2 is that CSS is verbose. Remember, everything in Tailwind is just CSS. Hover over any class to view the actual CSS code. What's cool about it though is that it uses clever naming conventions like inset 0 to do something in one line of code that would take 6 lines of CSS because it combines properties and values together. I would estimate that tailwind results in approximately 1 third the total amount of code that you would have with vanilla CSS, CSS, and the best type of code is the code you never have to write. However, a valid criticism of this approach is that you have to learn an abstraction on top of CSS, others, which is not ideal. It's always best to use the platform natively, but the web platform is often cruel and vengeful. Now problem 3 is that CSS gives you too much control over the UI, while frameworks like Bootstrap are too difficult to customize. Tailwind falls right in the middle of these, giving you a standard set of constraints to make sure the UI looks good, but tends to be much easier to customize others, to accommodate any design. Like, when you build a Bootstrap app, it always tends to look like a Bootstrap app. With Tailwind, it's not so obvious. Now the final problem I wanna talk about is zombie styles. We have a tendency to write styles that never actually get used and just bloat the CSS bundle. Tailwind will automatically purge all unused styles to kill the zombies and remove this dead code. That's pretty cool, but the drawback is that Tailwind is a pretty heavy handed approach. It takes, like, 5 steps to set up to install the Tailwind CLI, post CSS, and the Versus Code extension. For that other reason, I only use it on big projects. For smaller demos, I've been using pico CSS, which can make things look good with 0 effort, thanks to its classless approach. Other. As you can see, there are many pros and cons to a library like Tailwind. Ultimately, here's a good rule you can go by. If you like Tailwind, use it. If you don't like Tailwind, don't use it. Nobody cares. Literally, otherly nobody cares about your technology choices except you. This has been the CodeReport, thanks for watching, and I will see you in the next one.
The transcript discusses the problems caused by the Tailwind code, including colocation, mistakes, and poor UI. The transcript gives advice on how to use the code, including the importance of learning an abstraction on top of CSS and avoiding mistakes. The transcript also mentions the pros and cons of using the code, and gives a rule for not using it if one is not a fan of the technology.