Scribd Logo
Upload

Welcome to Scribd!

  • 57 views

    Tailwind CSS Cheatsheet

    Uploaded by

    Manga nimentai
    Cheatsheet tailwind

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Tailwind CSS Cheatsheet

    Uploaded by

    Manga nimentai
    57 views13 pages
    Cheatsheet tailwind

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Cheatsheet tailwind

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    57 views13 pages

    Tailwind CSS Cheatsheet

    Uploaded by

    Manga nimentai
    Cheatsheet tailwind

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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 [email protected]

    © Copyright Bizibots Solutions


    https://browsee.io

    You might also like