DEV Community

Cover image for Tailwind Commands Cheat Sheet
Madhav Ganesan
Madhav Ganesan

Posted on • Edited on

6 1 1

Tailwind Commands Cheat Sheet

#webdev #tailwindcss #css #beginners

Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Features:

Utility-first:

Tailwind css is a utility-first css framework that provides low-level utility classes to build custom designs without writing css.This approach allows us to implement a completely custom component design without writing a single line of custom CSS."You aren’t wasting energy inventing class names".

Content purging:

It is the process of removing unused CSS classes from the final CSS file that will be used in production environment.It is an optimization process in which the final CSS size is smaller, easier to maintain and shows improved performance.

Commands:

Underline:

underline 
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double
Enter fullscreen mode Exit fullscreen mode

Text Styling

text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text
Enter fullscreen mode Exit fullscreen mode

Background Color

bg-<color>-<shade>
Enter fullscreen mode Exit fullscreen mode

Gradient

bg-gradient-to-{direction} from-{color} via-{color} to-{color}
Enter fullscreen mode Exit fullscreen mode

Image covers the entire parent div

object-cover
Enter fullscreen mode Exit fullscreen mode

Border Radius

rounded-<size>
Enter fullscreen mode Exit fullscreen mode

Font Styling

font-<style> //mono, serif, sans
font-bold
font-thin
Enter fullscreen mode Exit fullscreen mode

Italic:

italic
Enter fullscreen mode Exit fullscreen mode

list:

list-<style> //none
Enter fullscreen mode Exit fullscreen mode

Visibility

Hide elements:

hidden
Enter fullscreen mode Exit fullscreen mode

Display (Opposite to hide):

block
Enter fullscreen mode Exit fullscreen mode

Padding

p-<size>   /* All sides */
px-<size>  /* Horizontal (left and right) */
py-<size>  /* Vertical (top and bottom) */
pl-<size>  /* Left */
pr-<size>  /* Right */
pt-<size>  /* Top */
pb-<size>  /* Bottom */
Enter fullscreen mode Exit fullscreen mode

Margin

m-<size>   /* All sides */
mx-<size>  /* Horizontal (left and right) */
my-<size>  /* Vertical (top and bottom) */
ml-<size>  /* Left */
mr-<size>  /* Right */
mt-<size>  /* Top */
mb-<size>  /* Bottom */
Enter fullscreen mode Exit fullscreen mode

Flexbox

flex
flex-<direction> // row or column
Enter fullscreen mode Exit fullscreen mode

Justify Content

justify-<option>
Enter fullscreen mode Exit fullscreen mode

Align Items

items-<option> //start,end,center
Enter fullscreen mode Exit fullscreen mode

Responsive Design

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */
Enter fullscreen mode Exit fullscreen mode

Sizing

h-<size>
w-<size>
Enter fullscreen mode Exit fullscreen mode

Borders

border
border-<size>
border-<color>
Enter fullscreen mode Exit fullscreen mode

All States

hover:<utility>
focus:<utility>
active:<utility>
Enter fullscreen mode Exit fullscreen mode

Input Box

outline-none
ring-<color>-<shade>
ring-<size>
Enter fullscreen mode Exit fullscreen mode
profile
Hostinger
 Promoted

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (2)

Collapse
 
dfarrell profile image
Daniel Farrell •

Nice breakdown! Great to see this put together in one place.

Collapse
 
madgan95 profile image
Madhav Ganesan •

Thx Daniel
Subscribe to get instant updates on ur mail
madhavganesan.hashnode.dev/newsletter

profile
Cloudinary
 Promoted

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

Read next

rishabh_raj_2b61a1c41b371 profile image

AI Agents Tutorial For Beginners: A Comprehensive Guide

Rishabh Raj -

alpira profile image

🚀 Introducing Odysseus-CLI: Simplified Deployment for Laravel, React and other Applications

alpira -

ssoad profile image

Create Different Type of Flavor on Flutter Application

Sohanuzzaman Soad -

tqbit profile image

Mastering Efficient Queue Structures in TypeScript: A Complete Guide

tq-bit -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay