Scribd
Upload
152 views

Tailwind CSS Cheatsheet

This document provides an overview and examples of Tailwind CSS utilities for styling elements like buttons, text, backgrounds, layouts and more. It covers topics like hover states, responsive design, typography, flexbox, grid layout and other CSS properties that can be applied through Tailwind classes.

Uploaded by

Manga nimentai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
152 views

Tailwind CSS Cheatsheet

This document provides an overview and examples of Tailwind CSS utilities for styling elements like buttons, text, backgrounds, layouts and more. It covers topics like hover states, responsive design, typography, flexbox, grid layout and other CSS properties that can be applied through Tailwind classes.

Uploaded by

Manga nimentai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

TailwindCSS Cheat Sheet

Hover and Active State


.btn {
@apply bg-blue-500 hover:bg-blue-700 active:bg-blue-800 text-white
font-bold py-2 px-4 rounded;
}

Hover States
.hover-bg {
@apply hover:bg-gray-200 p-4;
}

Hover Animation
.transform\:hover\:scale-110:hover {
transform: scale(1.1);
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Focus and Active State


.input {
@apply focus:outline-none focus:ring focus:border-blue-300 p-2;
}

Responsive Design
.responsive {
@apply lg:w-1/2 xl:w-1/3;
}

Responsive Font Size


.sm:text-xl@sm {
font-size: 1.25rem;
}
.lg:text-2xl@lg {
font-size: 1.5rem;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Text Size
.text-xl {
font-size: 1.25rem;
}

Font Style
.italic {
font-style: italic;
}

Text Color
.text-green-500 {
color: #13ce66;
}

Font Weight
.font-extrabold {
font-weight: 800;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Text Center Alignment


.text-center {
text-align: center;
}

Flex Alignment
.flex:items-center {
align-items: center;
}.justify-between {
justify-content: space-between;
}

Dark Mode
.dark-mode {
@apply dark:bg-gray-800 dark:text-white p-4;
}

Custom Patterns
.custom-pattern {
@apply pattern-checkers-sm;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Theme Customization
.custom-theme {
@apply bg-primary text-secondary;
}

Arbitrary Values
.arbitrary-values {
@apply p-10 m-[20px];
}

Arbitrary Properties
.arbitrary-properties {
@apply rotate-45 translate-x-8;
}

Base Values
.base-values {
@apply container mx-auto;
}

Functions and Directives


.grid-example {
@apply grid grid-cols-2 gap-4; > div {
@apply col-span-2 sm:col-span-1;
}
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

@apply
.my-button {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

Flexbox
.flex-example {
@apply flex items-center justify-center h-16 bg-gray-200;
}

Grid Layout
.grid-layout {
@apply grid grid-cols-3 gap-4;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Typography
.bold-text {
@apply text-2xl font-bold text-blue-600;
}

Background Color
.bg-gray-300 {
background-color: #d3dce6;
}

Padding and Margin


.p-4 {
padding: 1rem;
}

.m-4 {
margin: 1rem;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Border
.border-2 {
border-width: 2px;
}

.border-blue-500 {
border-color: #1fb6ff;
}

Rounded Corners
.rounded-lg {
border-radius: 0.5rem;
}

Grid Container
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

Width and Height


.w-32 {
width: 8rem;
}

.h-32 {
height: 8rem;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Visibility
.invisible {
visibility: hidden;
}

Opacity
.opacity-75 {
opacity: 0.75;
}

Spacing
.space-x-4 {
margin-right: 1rem;
margin-left: 1rem;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Z-Index
.z-10 {
z-index: 10;
}

Positioning
.absolute {
position: absolute;
bottom: 0;
right: 0;
}

Shadow
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,
0, 0, 0.06);
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Container Width
.container {
width: 100%;
margin-right: 50%;
margin-left: 50%;
}

Placeholder Color
::placeholder {
color: #1b6ddf;
}

Breakpoint Visibility
.lg:hidden@lg {
display: none;
}

List Styling
.list-disc {
list-style-type: disc;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Table Styling
.table-auto {
width: 50%;
table-layout: auto;
}
.border {
border-width: 1px;
}

Gradient Background
.bg-gradient-to-r {
background: linear-gradient(to right, #1fb6ff, #13ce66);
}

Aspect Ratio
.aspect-w-16 {
width: 4rem;
}
.aspect-h-9 {
height: 2.25rem;
}

© Copyright Bizibots Solutions


https://browsee.io
TailwindCSS Cheat Sheet

Please send your feedback and suggestions at support@heroteck.com

© Copyright Bizibots Solutions


https://browsee.io

You might also like