A reference list of common CSS properties and their relative classes that you will use in Tailwind
I wrote this cheat sheet because I found myself constantly referencing Tailwind documents to remind certain classes (I’m just starting out and I don’t have enough memory yet)
This is what I use most often.
Margin and fill
Make up these 3 tables. Add a dash before the value (for example,pt-2,m-auto)
| Symbol |
description |
p |
filling |
m |
profit |
-m |
Negative margin |
| Symbol |
description |
| T |
optimal |
| [R |
correct |
| b |
bottom |
| Rise |
Left |
| X |
horizontal |
| ÿ |
vertical |
| value |
description |
| 0 |
0 |
| 1 |
0.25rem |
| 2 |
0.5rem |
| 3 |
0.75rem |
| 4 |
1rem |
| 5 |
1.25rem |
| 6 |
1.5rem |
| 8 |
2rem |
| 10 |
2.5rem |
| 12 |
3rem |
| 16 |
4rem |
| 20 |
5rem |
| twenty four |
6rem |
| 32 |
8rem |
| Pixel |
1px |
| car |
auto |
margin: 0 auto
I sometimes usemargin: 0 autoCenter things.
classmx-autoApply it.
width
| class |
CSS |
| w-1 |
width: 0.25rem |
| w-2 |
width: 0.5rem |
| w-3 |
width: 0.75rem |
| w-4 |
width: 1rem |
| w-6 |
width: 1.5rem |
| w-8 |
width: 2rem |
| w-10 |
width: 2.5rem |
| w-12 |
width: 3rem |
| 16 weeks |
width: 4rem |
| w-24 |
width: 6rem |
| w-32 |
width: 8rem |
| w-48 |
width: 12rem |
| w-64 |
width: 16rem |
| automatic |
width: auto |
| Wide pixels |
width: 1px |
| -1⁄2 |
width: 50% |
| -1⁄3 |
width: 33.33333% |
| -2⁄3 |
width: 66.66667% |
| -1⁄4 |
width: 25% |
| -3⁄4 |
width: 75% |
| -1⁄5 |
width: 20% |
| -2⁄5 |
width: 40% |
| -3⁄5 |
width: 60% |
| -4⁄5 |
width: 80% |
| -1⁄6 |
width: 16.66667% |
| -5⁄6 |
width: 83.33333% |
| Full |
width: 100% |
| screen |
width: 100vw |
Maximum width
| class |
CSS |
| Max wx |
max-width: 20rem |
| Max w-sm |
max-width: 30rem |
| Max w-md |
max-width: 40rem |
| Max w-lg |
max-width: 50rem |
| Max w xl |
max-width: 60rem |
| Max w-2xl |
max-width: 70rem |
| max-w-3xl |
max-width: 80rem |
| Max w-4xl |
max-width: 90rem |
| Max W-5XL |
max-width: 100rem |
| Max full |
max-width: 100% |
Minimum width
| class |
CSS |
| min-w-0 |
min-width: 0 |
| Minimum full |
min-width: 100% |
Font family
| class |
CSS |
| Font no |
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
| Font serif |
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; |
| Font list |
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; |
font size
| class |
CSS |
| Text-xs |
font-size: .75rem |
| SMS |
font-size: .875rem |
| Font library |
font-size: 1rem |
| Text lg |
font-size: 1.125rem |
| Text-xl |
font-size: 1.25rem |
| Text 2xl |
font-size: 1.5rem |
| Text 3xl |
font-size: 1.875rem |
| Text 4xl |
font-size: 2.25rem |
| Text 5xl |
font-size: 3rem |
Font thickness
| class |
CSS |
| Font-thin line |
font-weight: 100 |
| Thin font |
font-weight: 200 |
| Light font |
font-weight: 300 |
| Normal font |
font-weight: 400 |
| Medium font |
font-weight: 500 |
| Semi-bold |
font-weight: 600 |
| Bold |
font-weight: 700 |
| Font bold |
font-weight: 800 |
| Black font |
font-weight: 900 |
colour
Tailwind provides us with those classes that can be used to match the corresponding colors:
transparentblackgraywhiteredorangeyellowgreentealblueindigopurplepink
caveat:grayused to begreyBefore TailWind 1.0. If you have an older project, please keep this in mind.
Each color has a different level. you can use it-100depending on-900Change the color from less intense to more intense:
orange-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-900
Text color
Fronttext-any color
background color
Frontbg-any color
Center text
usetext-center
Line height
| class |
CSS |
| .leading-none |
line-height: 1 |
| . Lead |
line-height: 1.25 |
| .leading-normal |
line-height: 1.5 |
| .lead-loose |
line-height: 2 |
Flexible box
container
| class |
CSS |
| Flexible |
display: flex |
| Inline flexibility |
display: inline-flex |
project
direction
| class |
CSS |
| A row |
flex-direction: row |
| Reversal of retractable rows |
flex-direction: row-reverse |
| Elastic col |
flex-direction: column |
| flex-col-reverse |
flex-direction: column-reverse |
Wrapping paper
| class |
CSS |
| No entanglement |
flex-wrap: nowrap |
| Flexible packaging |
flex-wrap: wrap |
| flex-wrap-reverse |
flex-wrap: wrap-reverse |
Align items
| class |
CSS |
| Project stretch |
align-items: stretch |
| Project start |
align-items: flex-start |
| Item center |
align-items: center |
| End of the project |
align-items: flex-end |
| Project benchmark |
align-items: baseline |
Align content
| class |
CSS |
| Content starts |
align-content: flex-start |
| Content Center |
align-content: center |
| Content side |
align-content: flex-end |
| Between content |
align-content: space-between |
| Around content |
align-content: space-around |
Self-adjustment
| class |
CSS |
| automatic |
align-self: auto |
| Self-starting |
align-self: flex-start |
| Egocentric |
align-self: center |
| Self-end |
align-self: flex-end |
| Self-stretching |
align-self: stretch |
Proof that the content is reasonable
| class |
CSS |
| Proof begins |
justify-content: flex-start |
| Centered |
justify-content: center |
| End to end |
justify-content: flex-end |
| reasonable |
justify-content: space-between |
| Align left and right |
justify-content: space-around |
Bend, grow, shrink
| class |
CSS |
| Elastic initial |
flex: initial |
| flex-1 |
flex: 1 |
| Flexible automatic |
flex: auto |
| Inelastic |
flex: none |
| Flexible growth |
flex-grow: 1 |
| Bending contraction |
flex-shrink: 1 |
| Inelastic |
flex-grow: 0 |
| No shrinkage |
flex-shrink: 0 |
Modifier
Wandering
hover:
More CSS tutorials: