Using CSS Grid is easy with Tailwind.
Use the grid
class to set a container class to use CSS Grid for its children.
Then you can set for example the grid to have 3 columns using grid-cols-3
.
And a gap between elements using gap-3
Same for Flexbox.
Use the flex
class, then you can set flex-col
to position elements vertically, for example.
And you have a ton of classes to work with, to apply any flexbox property you may want to use:
Items
Direction
Class | CSS |
---|---|
flex-row | flex-direction: row |
flex-row-reverse | flex-direction: row-reverse |
flex-col | flex-direction: column |
flex-col-reverse | flex-direction: column-reverse |
Wrapping
Class | CSS |
---|---|
flex-no-wrap | flex-wrap: nowrap |
flex-wrap | flex-wrap: wrap |
flex-wrap-reverse | flex-wrap: wrap-reverse |
Align items
Class | CSS |
---|---|
items-stretch | align-items: stretch |
items-start | align-items: flex-start |
items-center | align-items: center |
items-end | align-items: flex-end |
items-baseline | align-items: baseline |
Align content
Class | CSS |
---|---|
content-start | align-content: flex-start |
content-center | align-content: center |
content-end | align-content: flex-end |
content-between | align-content: space-between |
content-around | align-content: space-around |
Align self
Class | CSS |
---|---|
self-auto | align-self: auto |
self-start | align-self: flex-start |
self-center | align-self: center |
self-end | align-self: flex-end |
self-stretch | align-self: stretch |
Justify content
Class | CSS |
---|---|
justify-start | justify-content: flex-start |
justify-center | justify-content: center |
justify-end | justify-content: flex-end |
justify-between | justify-content: space-between |
justify-around | justify-content: space-around |
Flex, grow, shrink
Class | CSS |
---|---|
flex-initial | flex: initial |
flex-1 | flex: 1 |
flex-auto | flex: auto |
flex-none | flex: none |
flex-grow | flex-grow: 1 |
flex-shrink | flex-shrink: 1 |
flex-no-grow | flex-grow: 0 |
flex-no-shrink | flex-shrink: 0 |
Lessons in this unit:
0: | Introduction |
1: | Box model properties |
2: | Colors |
3: | Typography |
4: | ▶︎ Flexbox and Grid in Tailwind |
5: | Modifiers |
6: | Responsive design in Tailwind |
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!