Tailwind Sheet

Layout & Container

CSS/SCSSTailwind Class
display: flexflex
display: gridgrid
flex-direction: rowflex-row
flex-direction: columnflex-col
flex-wrap: wrapflex-wrap
justify-content: centerjustify-center
justify-content: space-betweenjustify-between
align-items: centeritems-center
align-items: flex-startitems-start
position: absoluteabsolute
position: relativerelative
position: fixedfixed
position: stickysticky

Spacing

CSS/SCSSTailwind Class
margin: 0m-0
margin: 4pxm-1
margin: 20pxm-5
margin-left: automl-auto
margin-top: -1%mt-[-1%]
padding: 0p-0
padding: 10px 15pxpx-[10px] py-[15px]
padding: 16pxp-4
gap: 8pxgap-2

Typography

CSS/SCSSTailwind Class
font-size: 12pxtext-xs
font-size: 16pxtext-base
font-size: 1.4emtext-[1.4em]
font-size: 0.7emtext-[0.7em]
font-weight: boldfont-bold
font-weight: lightfont-light
text-align: centertext-center
color: #000000text-black
color: rgba(211,250,13,0.958)text-[rgba(211,250,13,0.958)]
line-height: 1.5leading-normal
text-decoration: underlineunderline

Colors & Backgrounds

CSS/SCSSTailwind Class
background: #202844bg-[#202844]
background: whitebg-white
background: linear-gradient(...)bg-gradient-to-b from-[#2f3757] to-[#202844]
background-opacity: 50%bg-opacity-50
color: #fffffftext-white
border-color: #5766a3c2border-[#5766a3c2]

Borders & Effects

CSS/SCSSTailwind Class
border: 1px solidborder
border: 1px solid #5766a3c2border border-[#5766a3c2]
border-radius: 4pxrounded
border-radius: 8pxrounded-lg
border-radius: 9999pxrounded-full
box-shadow: 0 1px 3px rgba(0,0,0,0.1)shadow-sm
box-shadow: 0 4px 6px rgba(0,0,0,0.1)shadow-md
opacity: 0.5opacity-50
visibility: hiddeninvisible

Sizing

CSS/SCSSTailwind Class
width: 100%w-full
width: 50%w-1/2
width: 79%w-[79%]
min-width: 100pxmin-w-[100px]
height: 100%h-full
height: 100vhh-screen
max-height: 90vhmax-h-[90vh]

Transforms & Transitions

CSS/SCSSTailwind Class
transform: scale(1.05)scale-105
transform: rotate(45deg)rotate-45
transition: all 0.3s easetransition-all duration-300 ease-in-out
transition: opacity 0.2stransition-opacity duration-200

Responsive

CSS/SCSSTailwind Class
@media (min-width: 640px)sm:[class]
@media (min-width: 768px)md:[class]
@media (min-width: 1024px)lg:[class]
@media (max-width: 768px)max-md:[class]
display: nonehidden
display: block (on mobile)block sm:hidden

Pseudo-classes

CSS/SCSSTailwind Class
&:hoverhover:[class]
&:focusfocus:[class]
&:activeactive:[class]
&:first-childfirst:[class]
&:last-childlast:[class]
&:odd-childodd:[class]

Custom Utilities

CSS/SCSSTailwind Class
clip-path: polygon(...)[clip-path:polygon(...)]
scroll-snap-type: x mandatorysnap-x snap-mandatory
aspect-ratio: 16/9aspect-video
backdrop-filter: blur(4px)backdrop-blur-sm