Tailwind is a utility-first CSS framework for building websites. It takes a functional approach to web design by providing thousands of tiny classes to use directly in your HTML. Learn why web developers love tailwind in this quick breakdown.

🔗 Resources

Tailwind https://tailwindcss.com/
Tailwind Criticism https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:46:34.458Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
93e33c8e-81a6-42c9-a843-2ec72e5ff6d2
61de4085d6461f5d00a40b3d7b54740dcb137d71bcdbfd56e253d8e74271f413
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites.
CSS is hard.
Design is also hard.
But naming your CSS classes in a sane way is virtually impossible.
Frameworks like Boot Strap and Material address this challenge by creating styles for high level components.
Things like buttons, drop downs, and forms.
Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this.
Instead of using the card class like you might Bootstrap, you combine utility classes like flex to make it a flexbox, p to give it padding, m for margin, and hundreds of others to control things like color, shadows, and and so on.
In addition, every utility can be applied conditionally.
You have variants like small, medium, and large for responsive designs, along with a bunch of pseudo selectors like hover and focus to handle state changes, or dark to render different colors when dark mode is enabled.
This approach gives you a lot more freedom over your creativity compared to other CSS frameworks, while at the same time, following the rules of a design system that you don't get with plain CSS.
As it lives in the sweet spot between convention and configuration.
However, it does produce some ugly ass HTML.
You've got tons of hard to read duplicate Class names here.
As your UI grows in complexity, code duplication is inevitable.
But you can avoid it by creating reusable components with your favorite JavaScript framework, whereby using the apply directive in CSS to take Tailwind classes and compose them into a single concise class name.
Another concern you may have is performance, because Tailwind weighs in at over 35 100 kilobytes.
But when you go to build for production, It will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads.
But who has time to learn and memorize all these different utility classes.
Where Tailwind really shines is with its tooling.
You don't need to memorize much because Versus Code will auto complete every Tailwind class.
If you're not sure what it As just hover over it and it will show you the equivalent code in plain CSS.
And if you're not happy with what it does, you can easily customize Everything from the color palette to the spacing to build your own unique design system.
This has been Tailwind CSS in 100 seconds.
Make sure to like and subscribe if you wanna see more short videos like And if we hit 10,000 likes, I'll make a full tailwind tutorial.
Thanks for watching, and I will see you in the next one.

Speaker 0: Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites. CSS is hard. Design is also hard. But naming your CSS classes in a sane way is virtually impossible. Frameworks like Boot Strap and Material address this challenge by creating styles for high level components.

Things like buttons, drop downs, and forms. Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this. Instead of using the card class like you might Bootstrap, you combine utility classes like flex to make it a flexbox, p to give it padding, m for margin, and hundreds of others to control things like color, shadows, and and so on. In addition, every utility can be applied conditionally. You have variants like small, medium, and large for responsive designs, along with a bunch of pseudo selectors like hover and focus to handle state changes, or dark to render different colors when dark mode is enabled.

This approach gives you a lot more freedom over your creativity compared to other CSS frameworks, while at the same time, following the rules of a design system that you don't get with plain CSS. As it lives in the sweet spot between convention and configuration. However, it does produce some ugly ass HTML. You've got tons of hard to read duplicate Class names here. As your UI grows in complexity, code duplication is inevitable.

But you can avoid it by creating reusable components with your favorite JavaScript framework, whereby using the apply directive in CSS to take Tailwind classes and compose them into a single concise class name. Another concern you may have is performance, because Tailwind weighs in at over 35 100 kilobytes. But when you go to build for production, It will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads. But who has time to learn and memorize all these different utility classes. Where Tailwind really shines is with its tooling.

You don't need to memorize much because Versus Code will auto complete every Tailwind class. If you're not sure what it As just hover over it and it will show you the equivalent code in plain CSS. And if you're not happy with what it does, you can easily customize Everything from the color palette to the spacing to build your own unique design system. This has been Tailwind CSS in 100 seconds. Make sure to like and subscribe if you wanna see more short videos like And if we hit 10,000 likes, I'll make a full tailwind tutorial.

Thanks for watching, and I will see you in the next one.
Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites. CSS is hard. Design is also hard. But naming your CSS classes in a sane way is virtually impossible. Frameworks like Boot Strap and Material address this challenge by creating styles for high level components. Things like buttons, drop downs, and forms. Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this. Instead of using the card class like you might Bootstrap, you combine utility classes like flex to make it a flexbox, p to give it padding, m for margin, and hundreds of others to control things like color, shadows, and and so on.
graphic design
In addition, every utility can be applied conditionally. You have variants like small, medium, and large for responsive designs, along with a bunch of pseudo selectors like hover and focus to handle state changes, or dark to render different colors when dark mode is enabled. This approach gives you a lot more freedom over your creativity compared to other CSS frameworks, while at the same time, following the rules of a design system that you don't get with plain CSS. As it lives in the sweet spot between convention and configuration. However, it does produce some ugly ass HTML.
graphic design
You've got tons of hard to read duplicate Class names here. As your UI grows in complexity, code duplication is inevitable. But you can avoid it by creating reusable components with your favorite JavaScript framework, whereby using the apply directive in CSS to take Tailwind classes and compose them into a single concise class name. Another concern you may have is performance, because Tailwind weighs in at over 35 100 kilobytes. But when you go to build for production, It will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads. But who has time to learn and memorize all these different utility classes. Where Tailwind really shines is with its tooling. You don't need to memorize much because Versus Code will auto complete every Tailwind class. If you're not sure what it As just hover over it and it will show you the equivalent code in plain CSS. And if you're not happy with what it does, you can easily customize Everything from the color palette to the spacing to build your own unique design system.
This has been Tailwind CSS in 100 seconds. Make sure to like and subscribe if you wanna see more short videos like And if we hit 10,000 likes, I'll make a full tailwind tutorial. Thanks for watching, and I will see you in the next one.
youtube
Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites. CSS is hard. Design is also hard. But naming your CSS classes in a sane way is virtually impossible. Frameworks like Boot Strap and Material address this challenge by creating styles for high level components. Things like buttons, drop downs, and forms. Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this. Instead of using the card class like you might Bootstrap, you combine utility classes like flex to make it a flexbox, p to give it padding, m for margin, and hundreds of others to control things like color, shadows, and and so on. In addition, every utility can be applied conditionally. You have variants like small, medium, and large for responsive designs, along with a bunch of pseudo selectors like hover and focus to handle state changes, or dark to render different colors when dark mode is enabled. This approach gives you a lot more freedom over your creativity compared to other CSS frameworks, while at the same time, following the rules of a design system that you don't get with plain CSS. As it lives in the sweet spot between convention and configuration. However, it does produce some ugly ass HTML. You've got tons of hard to read duplicate Class names here. As your UI grows in complexity, code duplication is inevitable. But you can avoid it by creating reusable components with your favorite JavaScript framework, whereby using the apply directive in CSS to take Tailwind classes and compose them into a single concise class name. Another concern you may have is performance, because Tailwind weighs in at over 35 100 kilobytes. But when you go to build for production, It will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads. But who has time to learn and memorize all these different utility classes. Where Tailwind really shines is with its tooling. You don't need to memorize much because Versus Code will auto complete every Tailwind class. If you're not sure what it As just hover over it and it will show you the equivalent code in plain CSS. And if you're not happy with what it does, you can easily customize Everything from the color palette to the spacing to build your own unique design system. This has been Tailwind CSS in 100 seconds. Make sure to like and subscribe if you wanna see more short videos like And if we hit 10,000 likes, I'll make a full tailwind tutorial. Thanks for watching, and I will see you in the next one.
Tailwind,
tailwind
a
a
massive
massive
collection
collection
of
of
tiny
tiny
CSS
css
utility
utility
classes
classes
for
for
quickly
quickly
and
and
consistently
consistently
building
building
good
good
looking
looking
websites.
websites
CSS
css
is
is
hard.
hard
Design
design
is
is
also
also
hard.
hard
But
but
naming
naming
your
your
CSS
css
classes
classes
in
in
a
a
sane
sane
way
way
is
is
virtually
virtually
impossible.
impossible
Frameworks
frameworks
like
like
Boot
boot
Strap
strap
and
and
Material
material
address
address
this
this
challenge
challenge
by
by
creating
creating
styles
styles
for
for
high
high
level
level
components.
components
Things
things
like
like
buttons,
buttons
drop
drop
downs,
downs
and
and
forms.
forms
Tailwind
tailwind
takes
takes
a
a
more
more
functional
functional
approach
approach
by
by
providing
providing
you
you
with
with
utility
utility
classes
classes
that
that
can
can
be
be
composed
composed
together
together
to
to
build
build
components
components
like
like
this.
this
Instead
instead
of
of
using
using
the
the
card
card
class
class
like
like
you
you
might
might
Bootstrap,
bootstrap
you
you
combine
combine
utility
utility
classes
classes
like
like
flex
flex
to
to
make
make
it
it
a
a
flexbox,
flexbox
p
p
to
to
give
give
it
it
padding,
padding
m
m
for
for
margin,
margin
and
and
hundreds
hundreds
of
of
others
others
to
to
control
control
things
things
like
like
color,
color
shadows,
shadows
and
and
and
and
so
so
on.
on
In
in
addition,
addition
every
every
utility
utility
can
can
be
be
applied
applied
conditionally.
conditionally
You
you
have
have
variants
variants
like
like
small,
small
medium,
medium
and
and
large
large
for
for
responsive
responsive
designs,
designs
along
along
with
with
a
a
bunch
bunch
of
of
pseudo
pseudo
selectors
selectors
like
like
hover
hover
and
and
focus
focus
to
to
handle
handle
state
state
changes,
changes
or
or
dark
dark
to
to
render
render
different
different
colors
colors
when
when
dark
dark
mode
mode
is
is
enabled.
enabled
This
this
approach
approach
gives
gives
you
you
a
a
lot
lot
more
more
freedom
freedom
over
over
your
your
creativity
creativity
compared
compared
to
to
other
other
CSS
css
frameworks,
frameworks
while
while
at
at
the
the
same
same
time,
time
following
following
the
the
rules
rules
of
of
a
a
design
design
system
system
that
that
you
you
don't
don't
get
get
with
with
plain
plain
CSS.
css
As
as
it
it
lives
lives
in
in
the
the
sweet
sweet
spot
spot
between
between
convention
convention
and
and
configuration.
configuration
However,
however
it
it
does
does
produce
produce
some
some
ugly
ugly
ass
ass
HTML.
html
You've
you've
got
got
tons
tons
of
of
hard
hard
to
to
read
read
duplicate
duplicate
Class
class
names
names
here.
here
As
as
your
your
UI
ui
grows
grows
in
in
complexity,
complexity
code
code
duplication
duplication
is
is
inevitable.
inevitable
But
but
you
you
can
can
avoid
avoid
it
it
by
by
creating
creating
reusable
reusable
components
components
with
with
your
your
favorite
favorite
JavaScript
javascript
framework,
framework
whereby
whereby
using
using
the
the
apply
apply
directive
directive
in
in
CSS
css
to
to
take
take
Tailwind
tailwind
classes
classes
and
and
compose
compose
them
them
into
into
a
a
single
single
concise
concise
class
class
name.
name
Another
another
concern
concern
you
you
may
may
have
have
is
is
performance,
performance
because
because
Tailwind
tailwind
weighs
weighs
in
in
at
at
over
over
35
35
100
100
kilobytes.
kilobytes
But
but
when
when
you
you
go
go
to
to
build
build
for
for
production,
production
It
it
will
will
automatically
automatically
purge
purge
any
any
unused
unused
utility
utility
from
from
the
the
final
final
bundle,
bundle
resulting
resulting
in
in
minimal
minimal
dead
dead
code
code
and
and
thus
thus
faster
faster
page
page
loads.
loads
But
but
who
who
has
has
time
time
to
to
learn
learn
and
and
memorize
memorize
all
all
these
these
different
different
utility
utility
classes.
classes
Where
where
Tailwind
tailwind
really
really
shines
shines
is
is
with
with
its
its
tooling.
tooling
You
you
don't
don't
need
need
to
to
memorize
memorize
much
much
because
because
Versus
versus
Code
code
will
will
auto
auto
complete
complete
every
every
Tailwind
tailwind
class.
class
If
if
you're
you're
not
not
sure
sure
what
what
it
it
As
as
just
just
hover
hover
over
over
it
it
and
and
it
it
will
will
show
show
you
you
the
the
equivalent
equivalent
code
code
in
in
plain
plain
CSS.
css
And
and
if
if
you're
you're
not
not
happy
happy
with
with
what
what
it
it
does,
does
you
you
can
can
easily
easily
customize
customize
Everything
everything
from
from
the
the
color
color
palette
palette
to
to
the
the
spacing
spacing
to
to
build
build
your
your
own
own
unique
unique
design
design
system.
system
This
this
has
has
been
been
Tailwind
tailwind
CSS
css
in
in
100
100
seconds.
seconds
Make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
And
and
if
if
we
we
hit
hit
10,000
10,000
likes,
likes
I'll
i'll
make
make
a
a
full
full
tailwind
tailwind
tutorial.
tutorial
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 speaker discusses the limitations of naming CSS classes in a casual way, citing examples like William Shackle and the success of Tailwind as ways to create utility classes that can be directly combined with websites to create a more responsive design. The speaker also suggests avoiding duplicate class names and creating reusable components with popular JavaScript frameworks, as well as learning about the various utility classes and their impact on performance.
Tailwind in 100 Seconds
Tailwind, a massive collection of tiny CSS utility classes for quickly and consistently building good looking websites. CSS is hard. Design is also hard. But naming your CSS classes in a sane way is virtually impossible. Frameworks like Boot Strap and Material address this challenge by creating styles for high level components. Things like buttons, drop downs, and forms. Tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this. Instead of using the card class like you might Bootstrap, you combine utility classes like flex to make it a flexbox, p to give it padding, m for margin, and hundreds of others to control things like color, shadows, and and so on. In addition, every utility can be applied conditionally. You have variants like small, medium, and large for responsive designs, along with a bunch of pseudo selectors like hover and focus to handle state changes, or dark to render different colors when dark mode is enabled. This approach gives you a lot more freedom over your creativity compared to other CSS frameworks, while at the same time, following the rules of a design system that you don't get with plain CSS. As it lives in the sweet spot between convention and configuration. However, it does produce some ugly ass HTML. You've got tons of hard to read duplicate Class names here. As your UI grows in complexity, code duplication is inevitable. But you can avoid it by creating reusable components with your favorite JavaScript framework, whereby using the apply directive in CSS to take Tailwind classes and compose them into a single concise class name. Another concern you may have is performance, because Tailwind weighs in at over 35 100 kilobytes. But when you go to build for production, It will automatically purge any unused utility from the final bundle, resulting in minimal dead code and thus faster page loads. But who has time to learn and memorize all these different utility classes. Where Tailwind really shines is with its tooling. You don't need to memorize much because Versus Code will auto complete every Tailwind class. If you're not sure what it As just hover over it and it will show you the equivalent code in plain CSS. And if you're not happy with what it does, you can easily customize Everything from the color palette to the spacing to build your own unique design system. This has been Tailwind CSS in 100 seconds. Make sure to like and subscribe if you wanna see more short videos like And if we hit 10,000 likes, I'll make a full tailwind tutorial. Thanks for watching, and I will see you in the next one.
The speaker discusses the limitations of naming CSS classes in a casual way, citing examples like William Shackle and the success of Tailwind as ways to create utility classes that can be directly combined with websites to create a more responsive design. The speaker also suggests avoiding duplicate class names and creating reusable components with popular JavaScript frameworks, as well as learning about the various utility classes and their impact on performance.