Tailwind CSS Cheat Sheet
766 Words ~4 Minute Reading Time • Subscribe to receive updates on Cheat Sheets
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.
Installation
npm install tailwindcss
or
yarn add tailwindcss
Configuration
Create a configuration file tailwind.config.js in your project root:
module.exports = {
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Layout
Display
- block
- inline
- inline-block
- hidden
Position
- static
- fixed
- absolute
- relative
- sticky
Z-Index
- z-auto
- z-0
- z-10
- z-20
- ...
- z-50
Backgrounds
Background Color
- bg-{color}-{shade}
Background Gradient
- bg-gradient-to-{direction}
- from-{color}-{shade}
- via-{color}-{shade}
- to-{color}-{shade}
Typography
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
Spacing
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}
Flexbox
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
Grid Layout
- grid
- grid-cols-{columns}
- gap-{size}
Grid Items
- col-span-{span}
- col-start-{start}
- col-end-{end}
Borders
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}
Colors
Text Color
- text-{color}-{shade}
Placeholder Color
- placeholder-{color}-{shade}
Responsive Design
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.
Opacity
Control the opacity of an element:
- opacity-{value}
- bg-opacity-{value}
- text-opacity-{value}
Example
- opacity-0
- opacity-10
- opacity-20
- ...
- opacity-100
Shadows
Apply box-shadow effects:
- shadow
- shadow-md
- shadow-lg
- shadow-xl
- shadow-2xl
Transitions
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
Transforms
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}
Overflow
Control the overflow behavior of an element:
- overflow-{type}
- overflow-x-{type}
- overflow-y-{type}
Example
- overflow-auto
- overflow-hidden
- overflow-visible
- overflow-scroll
Cursors
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
Visibility
Control the visibility of an element:
- visible
- invisible
Sizing
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
That's It! 🎉
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.
Supporting My Work
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!
Contact