mdxtools

Tool Categories

📊 Calculations✍ī¸ Text & Writing🔧 Utilities🎨 Image & Design⚡ Generators🔄 Converters

Quick Links

Privacy PolicyTerms of Service

Tailwind CSS Cheat Sheet

Tailwind CSS utility classes reference

Tailwind CSS Cheat Sheet

Quick reference guide for Tailwind CSS utility classes. Click the copy button to copy any class.

130
Total Commands
130
Filtered Results

Layout

CommandCopyDescription
containerResponsive container
blockDisplay block
inline-blockDisplay inline-block
inlineDisplay inline
flexDisplay flex
inline-flexDisplay inline-flex
gridDisplay grid
hiddenDisplay none

Flexbox

CommandCopyDescription
flex-rowFlex direction row
flex-colFlex direction column
flex-wrapFlex wrap
flex-nowrapFlex nowrap
justify-startJustify content start
justify-centerJustify content center
justify-endJustify content end
justify-betweenJustify content space-between
items-startAlign items start
items-centerAlign items center
items-endAlign items end
flex-1Flex grow 1
flex-autoFlex auto
flex-noneFlex none

Grid

CommandCopyDescription
grid-cols-11 column grid
grid-cols-22 column grid
grid-cols-33 column grid
grid-cols-44 column grid
grid-cols-1212 column grid
col-span-2Span 2 columns
gap-4Gap 1rem
gap-x-4Column gap 1rem
gap-y-4Row gap 1rem

Spacing - Padding

CommandCopyDescription
p-0Padding 0
p-1Padding 0.25rem
p-2Padding 0.5rem
p-4Padding 1rem
p-8Padding 2rem
px-4Padding left/right 1rem
py-4Padding top/bottom 1rem
pt-4Padding top 1rem
pr-4Padding right 1rem
pb-4Padding bottom 1rem
pl-4Padding left 1rem

Spacing - Margin

CommandCopyDescription
m-0Margin 0
m-autoMargin auto
m-4Margin 1rem
mx-4Margin left/right 1rem
my-4Margin top/bottom 1rem
mt-4Margin top 1rem
-mt-4Negative margin top 1rem

Sizing

CommandCopyDescription
w-fullWidth 100%
w-screenWidth 100vw
w-1/2Width 50%
w-64Width 16rem
h-fullHeight 100%
h-screenHeight 100vh
h-64Height 16rem
min-h-screenMin height 100vh
max-w-mdMax width 28rem
max-w-xlMax width 36rem

Typography

CommandCopyDescription
text-xsFont size 0.75rem
text-smFont size 0.875rem
text-baseFont size 1rem
text-lgFont size 1.125rem
text-xlFont size 1.25rem
text-2xlFont size 1.5rem
text-4xlFont size 2.25rem
font-thinFont weight 100
font-normalFont weight 400
font-boldFont weight 700
italicFont style italic
text-leftText align left
text-centerText align center
text-rightText align right
uppercaseText transform uppercase
lowercaseText transform lowercase
capitalizeText transform capitalize
underlineText decoration underline
line-throughText decoration line-through
leading-normalLine height 1.5
leading-tightLine height 1.25

Colors - Text

CommandCopyDescription
text-whiteText color white
text-blackText color black
text-gray-500Text color gray 500
text-red-500Text color red 500
text-blue-500Text color blue 500
text-green-500Text color green 500

Colors - Background

CommandCopyDescription
bg-whiteBackground white
bg-blackBackground black
bg-gray-100Background gray 100
bg-blue-500Background blue 500
bg-transparentBackground transparent

Borders

CommandCopyDescription
borderBorder 1px
border-2Border 2px
border-tBorder top
border-gray-300Border color gray 300
roundedBorder radius 0.25rem
rounded-lgBorder radius 0.5rem
rounded-fullBorder radius 9999px
rounded-noneBorder radius 0

Effects

CommandCopyDescription
shadowBox shadow small
shadow-mdBox shadow medium
shadow-lgBox shadow large
shadow-noneNo box shadow
opacity-0Opacity 0
opacity-50Opacity 0.5
opacity-100Opacity 1

Transitions

CommandCopyDescription
transitionBasic transition
transition-allTransition all properties
duration-300Duration 300ms
ease-inTiming function ease-in
ease-outTiming function ease-out

Hover States

CommandCopyDescription
hover:bg-blue-600Background on hover
hover:text-blue-600Text color on hover
hover:scale-105Scale up on hover

Responsive

CommandCopyDescription
sm:text-xlText xl on small screens (640px+)
md:flexFlex on medium screens (768px+)
lg:grid-cols-33 columns on large screens (1024px+)
xl:max-w-7xlMax width on xl screens (1280px+)

Position

CommandCopyDescription
relativePosition relative
absolutePosition absolute
fixedPosition fixed
stickyPosition sticky
top-0Top 0
right-0Right 0
z-10Z-index 10
z-50Z-index 50

Overflow

CommandCopyDescription
overflow-hiddenOverflow hidden
overflow-autoOverflow auto
overflow-scrollOverflow scroll
overflow-x-autoOverflow x auto

All operations are performed locally in your browser. No data is sent to any server.

About Tailwind CSS Cheat Sheet

This section will contain detailed, SEO-friendly content about the Tailwind CSS Cheat Sheet.

In the future, this content will be managed through a headless CMS, allowing you to:

  • Add detailed explanations about how to use this tool
  • Include examples and use cases
  • Provide tips and best practices
  • Add FAQs and troubleshooting guides
  • Update content without touching the code

How to Use

Step-by-step instructions for using the Tailwind CSS Cheat Sheet will appear here. This content will be fully customizable through the admin panel.

Features

Key features and benefits of this tool will be listed here. All content is editable via the CMS.