Tail wind cheat sheet

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
-12 width: 50%
-13 width: 33.33333%
-23 width: 66.66667%
-14 width: 25%
-34 width: 75%
-15 width: 20%
-25 width: 40%
-35 width: 60%
-45 width: 80%
-16 width: 16.66667%
-56 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:

  • transparent
  • black
  • gray
  • white
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

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-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-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:

Download mine for freeCSS Manual


More CSS tutorials: