Tailwind CSS Cheat Sheet
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. This cheat sheet covers the most commonly used classes and their usage.
npm install tailwindcss
or
yarn add tailwindcss
Create a configuration file tailwind.config.js in your project root:
module.exports = {
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Display
- block
- inline
- inline-block
- hidden
Position
- static
- fixed
- absolute
- relative
- sticky
Z-Index
- z-auto
- z-0
- z-10
- z-20
- ...
- z-50
Background Color
- bg-{color}-{shade}
Background Gradient
- bg-gradient-to-{direction}
- from-{color}-{shade}
- via-{color}-{shade}
- to-{color}-{shade}
Font Family
font-sans
font-serif
font-mono
Font Size
- text-xs
- text-sm
- text-base
- text-lg
- text-xl
- text-2xl
- ...
- text-9xl
Font Weight
- font-thin
- font-extralight
- font-light
- font-normal
- font-medium
- font-semibold
- font-bold
- font-extrabold
- font-black
Text Alignment
- text-left
- text-center
- text-right
- text-justify
Margin
- m-{size}
- mt-{size}
- mr-{size}
- mb-{size}
- ml-{size}
- mx-{size}
- my-{size}
Padding
- p-{size}
- pt-{size}
- pr-{size}
- pb-{size}
- pl-{size}
- px-{size}
- py-{size}
Display
- flex
- inline-flex
Direction
- flex-row
- flex-row-reverse
- flex-col
- flex-col-reverse
Align Items
- items-start
- items-center
- items-end
- items-baseline
- items-stretch
Grid Layout
- grid
- grid-cols-{columns}
- gap-{size}
Grid Items
- col-span-{span}
- col-start-{start}
- col-end-{end}
Border Style
- border-{style}
- border-t-{style}
- border-r-{style}
- border-b-{style}
- border-l-{style}
Border Width
- border-{width}
- border-t-{width}
- border-r-{width}
- border-b-{width}
- border-l-{width}
Border Radius
- rounded
- rounded-{size}
- rounded-t-{size}
- rounded-r-{size}
- rounded-b-{size}
- rounded-l-{size}
Border Color
- border-{color}-{shade}
Text Color
- text-{color}-{shade}
Placeholder Color
- placeholder-{color}-{shade}
Tailwind CSS provides responsive design using breakpoints:
- {breakpoint}:{class}
Breakpoints
- sm
- md
- lg
- xl
- 2xl
Example
- sm:text-base
- md:text-lg
- lg:text-xl
- xl:text-2xl
- 2xl:text-3xl
This will apply different text sizes based on the viewport width.
Control the opacity of an element:
- opacity-{value}
- bg-opacity-{value}
- text-opacity-{value}
Example
- opacity-0
- opacity-10
- opacity-20
- ...
- opacity-100
Apply box-shadow effects:
- shadow
- shadow-md
- shadow-lg
- shadow-xl
- shadow-2xl
Control the duration and easing of CSS transitions:
- duration-{value}
- ease-{type}
Example
- duration-75
- duration-100
- duration-150
- ...
- duration-1000
- ease-linear
- ease-in
- ease-out
- ease-in-out
Apply CSS transforms:
Scale
- scale-{value}
- scale-x-{value}
- scale-y-{value}
Rotate
- rotate-{value}
Translate
- translate-x-{value}
- translate-y-{value}
Skew
- skew-x-{value}
- skew-y-{value}
Control the overflow behavior of an element:
- overflow-{type}
- overflow-x-{type}
- overflow-y-{type}
Example
- overflow-auto
- overflow-hidden
- overflow-visible
- overflow-scroll
Set the cursor type when hovering over an element:
- cursor-{type}
Example
- cursor-auto
- cursor-default
- cursor-pointer
- cursor-wait
- cursor-text
- cursor-move
- cursor-help
- cursor-not-allowed
Control the visibility of an element:
- visible
- invisible
Set the width and height of elements: Width
- w-{value}
Height
- h-{value}
Example
- w-auto
- w-px
- w-0
- w-1
- ...
- w-96
- w-full
- w-screen
- h-auto
- h-px
- h-0
- h-1
- ...
- h-96
- h-full
- h-screen
With this cheat sheet, you should now have a good understanding of the most commonly used Tailwind CSS classes and how to use them in your projects. Remember that the full documentation can be found on the Tailwind CSS official website. If you have any questions, feel free to reach out to me on Twitter or YouTube.
Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!