Koyaka
Patreon

Utilities

Text Colors

Preview Code
.text-base
.text-base-alt
.text-primary
.text-secondary
.text-accent
.text-info
.text-success
.text-warning
.text-danger

    <div class="flex gap-2 flex-wrap">
        <div class="x-content box"><div class="text-base">.text-base</div></div>
        <div class="x-content box">
            <div class="text-base-alt">.text-base-alt</div>
        </div>
        <div class="x-content box">
            <div class="text-primary">.text-primary</div>
        </div>
        <div class="x-content box">
            <div class="text-secondary">.text-secondary</div>
        </div>
        <div class="x-content box">
            <div class="text-accent">.text-accent</div>
        </div>
        <div class="x-content box"><div class="text-info">.text-info</div></div>
        <div class="x-content box">
            <div class="text-success">.text-success</div>
        </div>
        <div class="x-content box">
            <div class="text-warning">.text-warning</div>
        </div>
        <div class="x-content box">
            <div class="text-danger">.text-danger</div>
        </div>
    </div>

Background Colors

Preview Code
.bg-base-100
.bg-base-200
.bg-base-300
.bg-primary
.bg-secondary
.bg-accent
.bg-info
.bg-success
.bg-warning
.bg-danger

    <div class="flex flex-wrap gap-2">
        <div class="x-content box">
            <div class="bg-base-100 p-2">.bg-base-100</div>
        </div>
        <div class="x-content box">
            <div class="bg-base-200 p-2">.bg-base-200</div>
        </div>
        <div class="x-content box">
            <div class="bg-base-300 p-2">.bg-base-300</div>
        </div>
        <div class="x-content box">
            <div class="bg-primary p-2">.bg-primary</div>
        </div>
        <div class="x-content box">
            <div class="bg-secondary p-2">.bg-secondary</div>
        </div>
        <div class="x-content box">
            <div class="bg-accent p-2">.bg-accent</div>
        </div>
        <div class="x-content box"><div class="bg-info p-2">.bg-info</div></div>
        <div class="x-content box">
            <div class="bg-success p-2">.bg-success</div>
        </div>
        <div class="x-content box">
            <div class="bg-warning p-2">.bg-warning</div>
        </div>
        <div class="x-content box">
            <div class="bg-danger p-2">.bg-danger</div>
        </div>
    </div>

Font Sizes

Preview Code
.text-1
.text-2
.text-3
.text-4
.text-5
.text-6
.text-7

    <div class="flex flex-wrap gap-2 items-center">
        <div class="x-content box"><div class="text-1">.text-1</div></div>
        <div class="x-content box"><div class="text-2">.text-2</div></div>
        <div class="x-content box"><div class="text-3">.text-3</div></div>
        <div class="x-content box"><div class="text-4">.text-4</div></div>
        <div class="x-content box"><div class="text-5">.text-5</div></div>
        <div class="x-content box"><div class="text-6">.text-6</div></div>
        <div class="x-content box"><div class="text-7">.text-7</div></div>
    </div>

Font Weights

Preview Code
.font-thin
.font-extralight
.font-light
.font-normal
.font-medium
.font-semibold
.font-bold
.font-extrabold
.font-black

    <div class="flex gap-2 flex-wrap">
        <div class="x-content box"><div class="font-thin">.font-thin</div></div>
        <div class="x-content box">
            <div class="font-extralight">.font-extralight</div>
        </div>
        <div class="x-content box">
            <div class="font-light">.font-light</div>
        </div>
        <div class="x-content box">
            <div class="font-normal">.font-normal</div>
        </div>
        <div class="x-content box">
            <div class="font-medium">.font-medium</div>
        </div>
        <div class="x-content box">
            <div class="font-semibold">.font-semibold</div>
        </div>
        <div class="x-content box"><div class="font-bold">.font-bold</div></div>
        <div class="x-content box">
            <div class="font-extrabold">.font-extrabold</div>
        </div>
        <div class="x-content box">
            <div class="font-black">.font-black</div>
        </div>
    </div>

Text Align

Preview Code
.text-left
.text-center
.text-right
.text-justify

    <div class="flex flex-col gap-2">
        <div class="x-content box"><div class="text-left">.text-left</div></div>
        <div class="x-content box">
            <div class="text-center">.text-center</div>
        </div>
        <div class="x-content box">
            <div class="text-right">.text-right</div>
        </div>
        <div class="x-content box">
            <div class="text-justify">.text-justify</div>
        </div>
    </div>

Text Transform

Preview Code
.uppercase
.lowercase
.capitalize
.normal-case
.truncate

    <div class="flex flex-wrap gap-2">
        <div class="x-content box"><div class="uppercase">.uppercase</div></div>
        <div class="x-content box"><div class="lowercase">.lowercase</div></div>
        <div class="x-content box">
            <div class="capitalize">.capitalize</div>
        </div>
        <div class="x-content box">
            <div class="normal-case">.normal-case</div>
        </div>
        <div class="x-content box"><div class="truncate">.truncate</div></div>
    </div>

Position Types

Preview Code
.static
.relative
.absolute
.absolute-center
.fixed
.fixed-center
.sticky

    <div class="flex flex-wrap gap-2">
        <div class="x-content box">.static</div>
        <div class="x-content box">.relative</div>
        <div class="x-content box">.absolute</div>
        <div class="x-content box">.absolute-center</div>
        <div class="x-content box">.fixed</div>
        <div class="x-content box">.fixed-center</div>
        <div class="x-content box">.sticky</div>
    </div>

Position Offsets

Preview Code
.top-0
.left-0
.right-0
.bottom-0

    <div class="flex flex-wrap gap-2">
        <div class="x-content box">.top-0</div>
        <div class="x-content box">.left-0</div>
        <div class="x-content box">.right-0</div>
        <div class="x-content box">.bottom-0</div>
    </div>

Z-Index

Preview Code
.z-auto
.z--1
.z-0
.z-1
.z-max

    <div class="flex flex-col gap-2">
        <div class="x-content box">.z-auto</div>
        <div class="x-content box">.z--1</div>
        <div class="x-content box">.z-0</div>
        <div class="x-content box">.z-1</div>
        <div class="x-content box">.z-max</div>
    </div>

Margin Shorthand

Preview Code 

    <div class="flex flex-col gap-2">
        
        <div class="x-content box">
            
            <button class="button">.m-1</button>
            
            <button class="button">.m-2</button>
            
            <button class="button">.m-3</button>
            
            <button class="button">.m-4</button>
            
            <button class="button">.m-5</button>
            
            <button class="button">.m-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.my-1</button>
            
            <button class="button">.my-2</button>
            
            <button class="button">.my-3</button>
            
            <button class="button">.my-4</button>
            
            <button class="button">.my-5</button>
            
            <button class="button">.my-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.mx-1</button>
            
            <button class="button">.mx-2</button>
            
            <button class="button">.mx-3</button>
            
            <button class="button">.mx-4</button>
            
            <button class="button">.mx-5</button>
            
            <button class="button">.mx-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.mt-1</button>
            
            <button class="button">.mt-2</button>
            
            <button class="button">.mt-3</button>
            
            <button class="button">.mt-4</button>
            
            <button class="button">.mt-5</button>
            
            <button class="button">.mt-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.mr-1</button>
            
            <button class="button">.mr-2</button>
            
            <button class="button">.mr-3</button>
            
            <button class="button">.mr-4</button>
            
            <button class="button">.mr-5</button>
            
            <button class="button">.mr-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.mb-1</button>
            
            <button class="button">.mb-2</button>
            
            <button class="button">.mb-3</button>
            
            <button class="button">.mb-4</button>
            
            <button class="button">.mb-5</button>
            
            <button class="button">.mb-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.ml-1</button>
            
            <button class="button">.ml-2</button>
            
            <button class="button">.ml-3</button>
            
            <button class="button">.ml-4</button>
            
            <button class="button">.ml-5</button>
            
            <button class="button">.ml-6</button>
            
        </div>
        
    </div>

Padding Shorthand

Preview Code 

    <div class="flex flex-col gap-2">
        
        <div class="x-content box">
            
            <button class="button">.p-1</button>
            
            <button class="button">.p-2</button>
            
            <button class="button">.p-3</button>
            
            <button class="button">.p-4</button>
            
            <button class="button">.p-5</button>
            
            <button class="button">.p-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.py-1</button>
            
            <button class="button">.py-2</button>
            
            <button class="button">.py-3</button>
            
            <button class="button">.py-4</button>
            
            <button class="button">.py-5</button>
            
            <button class="button">.py-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.px-1</button>
            
            <button class="button">.px-2</button>
            
            <button class="button">.px-3</button>
            
            <button class="button">.px-4</button>
            
            <button class="button">.px-5</button>
            
            <button class="button">.px-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.pt-1</button>
            
            <button class="button">.pt-2</button>
            
            <button class="button">.pt-3</button>
            
            <button class="button">.pt-4</button>
            
            <button class="button">.pt-5</button>
            
            <button class="button">.pt-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.pr-1</button>
            
            <button class="button">.pr-2</button>
            
            <button class="button">.pr-3</button>
            
            <button class="button">.pr-4</button>
            
            <button class="button">.pr-5</button>
            
            <button class="button">.pr-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.pb-1</button>
            
            <button class="button">.pb-2</button>
            
            <button class="button">.pb-3</button>
            
            <button class="button">.pb-4</button>
            
            <button class="button">.pb-5</button>
            
            <button class="button">.pb-6</button>
            
        </div>
        
        <div class="x-content box">
            
            <button class="button">.pl-1</button>
            
            <button class="button">.pl-2</button>
            
            <button class="button">.pl-3</button>
            
            <button class="button">.pl-4</button>
            
            <button class="button">.pl-5</button>
            
            <button class="button">.pl-6</button>
            
        </div>
        
    </div>

Width

Preview Code
.w-auto
.w-full
.w-screen

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.w-auto</div></div>
        <div class="x-content"><div class="box">.w-full</div></div>
        <div class="x-content"><div class="box">.w-screen</div></div>
    </div>

Max Width

Preview Code
.max-w-none
.max-w-full
.max-w-screen

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.max-w-none</div></div>
        <div class="x-content"><div class="box">.max-w-full</div></div>
        <div class="x-content"><div class="box">.max-w-screen</div></div>
    </div>

Height

Preview Code
.h-auto
.h-full
.h-screen

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.h-auto</div></div>
        <div class="x-content"><div class="box">.h-full</div></div>
        <div class="x-content"><div class="box">.h-screen</div></div>
    </div>

Max Height

Preview Code
.max-h-none
.max-h-full
.max-h-screen

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.max-h-none</div></div>
        <div class="x-content"><div class="box">.max-h-full</div></div>
        <div class="x-content"><div class="box">.max-h-screen</div></div>
    </div>

Overflow

Preview Code
.overflow-visible
.overflow-hidden
.overflow-scroll
.overflow-auto
.overflow-x-visible
.overflow-x-hidden
.overflow-x-scroll
.overflow-x-auto
.overflow-y-visible
.overflow-y-hidden
.overflow-y-scroll
.overflow-y-auto

    <div class="flex flex-wrap gap-2">
        <!-- General Overflow -->
        <div class="x-content"><div class="box">.overflow-visible</div></div>
        <div class="x-content"><div class="box">.overflow-hidden</div></div>
        <div class="x-content"><div class="box">.overflow-scroll</div></div>
        <div class="x-content"><div class="box">.overflow-auto</div></div>

        <!-- Overflow X -->
        <div class="x-content"><div class="box">.overflow-x-visible</div></div>
        <div class="x-content"><div class="box">.overflow-x-hidden</div></div>
        <div class="x-content"><div class="box">.overflow-x-scroll</div></div>
        <div class="x-content"><div class="box">.overflow-x-auto</div></div>

        <!-- Overflow Y -->
        <div class="x-content"><div class="box">.overflow-y-visible</div></div>
        <div class="x-content"><div class="box">.overflow-y-hidden</div></div>
        <div class="x-content"><div class="box">.overflow-y-scroll</div></div>
        <div class="x-content"><div class="box">.overflow-y-auto</div></div>
    </div>

Border

Preview Code
.border-0
.border-none
.border-transparent

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.border-0</div></div>
        <div class="x-content"><div class="box">.border-none</div></div>
        <div class="x-content"><div class="box">.border-transparent</div></div>
    </div>

Border-Radius

Preview Code
.radius-0
.radius-xs
.radius-sm
.radius-md
.radius-lg
.radius-xl
.radius-2xl
.radius-3xl
.radius-full

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.radius-0</div></div>
        <div class="x-content"><div class="box">.radius-xs</div></div>
        <div class="x-content"><div class="box">.radius-sm</div></div>
        <div class="x-content"><div class="box">.radius-md</div></div>
        <div class="x-content"><div class="box">.radius-lg</div></div>
        <div class="x-content"><div class="box">.radius-xl</div></div>
        <div class="x-content"><div class="box">.radius-2xl</div></div>
        <div class="x-content"><div class="box">.radius-3xl</div></div>
        <div class="x-content"><div class="box">.radius-full</div></div>
    </div>

Cursor & Pointer Events

Preview Code
.clickable
.select-none
.pointer-none
.pointer-auto

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.clickable</div></div>
        <div class="x-content"><div class="box">.select-none</div></div>
        <div class="x-content"><div class="box">.pointer-none</div></div>
        <div class="x-content"><div class="box">.pointer-auto</div></div>
    </div>

Opacity

Preview Code
.opacity-0
.opacity-25
.opacity-50
.opacity-75
.opacity-100

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.opacity-0</div></div>
        <div class="x-content"><div class="box">.opacity-25</div></div>
        <div class="x-content"><div class="box">.opacity-50</div></div>
        <div class="x-content"><div class="box">.opacity-75</div></div>
        <div class="x-content"><div class="box">.opacity-100</div></div>
    </div>

Display

Preview Code
.block
.inline
.inline-block
.flex
.inline-flex
.grid
.inline-grid
.table
.table-row
.table-cell
.hidden
.contents
.list-item

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.block</div></div>
        <div class="x-content"><div class="box">.inline</div></div>
        <div class="x-content"><div class="box">.inline-block</div></div>
        <div class="x-content"><div class="box">.flex</div></div>
        <div class="x-content"><div class="box">.inline-flex</div></div>
        <div class="x-content"><div class="box">.grid</div></div>
        <div class="x-content"><div class="box">.inline-grid</div></div>
        <div class="x-content"><div class="box">.table</div></div>
        <div class="x-content"><div class="box">.table-row</div></div>
        <div class="x-content"><div class="box">.table-cell</div></div>
        <div class="x-content"><div class="box">.hidden</div></div>
        <div class="x-content"><div class="box">.contents</div></div>
        <div class="x-content"><div class="box">.list-item</div></div>
    </div>

Gap

Preview Code
.gap-0
.gap-1
.gap-2
.gap-3
.gap-4
.gap-5
.gap-6
.gap-x-0
.gap-x-1
.gap-x-2
.gap-x-3
.gap-x-4
.gap-x-5
.gap-x-6
.gap-y-0
.gap-y-1
.gap-y-2
.gap-y-3
.gap-y-4
.gap-y-5
.gap-y-6

    <div class="flex flex-wrap gap-2">
        <!-- General Gap -->
        <div class="x-content"><div class="box">.gap-0</div></div>
        <div class="x-content"><div class="box">.gap-1</div></div>
        <div class="x-content"><div class="box">.gap-2</div></div>
        <div class="x-content"><div class="box">.gap-3</div></div>
        <div class="x-content"><div class="box">.gap-4</div></div>
        <div class="x-content"><div class="box">.gap-5</div></div>
        <div class="x-content"><div class="box">.gap-6</div></div>

        <!-- Gap X -->
        <div class="x-content"><div class="box">.gap-x-0</div></div>
        <div class="x-content"><div class="box">.gap-x-1</div></div>
        <div class="x-content"><div class="box">.gap-x-2</div></div>
        <div class="x-content"><div class="box">.gap-x-3</div></div>
        <div class="x-content"><div class="box">.gap-x-4</div></div>
        <div class="x-content"><div class="box">.gap-x-5</div></div>
        <div class="x-content"><div class="box">.gap-x-6</div></div>

        <!-- Gap Y -->
        <div class="x-content"><div class="box">.gap-y-0</div></div>
        <div class="x-content"><div class="box">.gap-y-1</div></div>
        <div class="x-content"><div class="box">.gap-y-2</div></div>
        <div class="x-content"><div class="box">.gap-y-3</div></div>
        <div class="x-content"><div class="box">.gap-y-4</div></div>
        <div class="x-content"><div class="box">.gap-y-5</div></div>
        <div class="x-content"><div class="box">.gap-y-6</div></div>
    </div>

Flex Direction

Preview Code
.flex-row
.flex-row-reverse
.flex-col
.flex-col-reverse

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.flex-row</div></div>
        <div class="x-content"><div class="box">.flex-row-reverse</div></div>
        <div class="x-content"><div class="box">.flex-col</div></div>
        <div class="x-content"><div class="box">.flex-col-reverse</div></div>
    </div>

Flex Wrap

Preview Code
.flex-wrap
.flex-wrap-reverse
.flex-nowrap

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.flex-wrap</div></div>
        <div class="x-content"><div class="box">.flex-wrap-reverse</div></div>
        <div class="x-content"><div class="box">.flex-nowrap</div></div>
    </div>

Flex

Preview Code
.flex-1
.flex-2
.flex-3
.flex-4
.flex-5
.flex-6

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.flex-1</div></div>
        <div class="x-content"><div class="box">.flex-2</div></div>
        <div class="x-content"><div class="box">.flex-3</div></div>
        <div class="x-content"><div class="box">.flex-4</div></div>
        <div class="x-content"><div class="box">.flex-5</div></div>
        <div class="x-content"><div class="box">.flex-6</div></div>
    </div>

Flex Grow & Shrink

Preview Code
.flex-grow
.flex-grow-0
.flex-shrink
.flex-shrink-0

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.flex-grow</div></div>
        <div class="x-content"><div class="box">.flex-grow-0</div></div>
        <div class="x-content"><div class="box">.flex-shrink</div></div>
        <div class="x-content"><div class="box">.flex-shrink-0</div></div>
    </div>

Justify Content

Preview Code
.justify-start
.justify-end
.justify-center
.justify-between
.justify-around
.justify-evenly

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.justify-start</div></div>
        <div class="x-content"><div class="box">.justify-end</div></div>
        <div class="x-content"><div class="box">.justify-center</div></div>
        <div class="x-content"><div class="box">.justify-between</div></div>
        <div class="x-content"><div class="box">.justify-around</div></div>
        <div class="x-content"><div class="box">.justify-evenly</div></div>
    </div>

Align Items

Preview Code
.items-start
.items-end
.items-center
.items-baseline
.items-stretch

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.items-start</div></div>
        <div class="x-content"><div class="box">.items-end</div></div>
        <div class="x-content"><div class="box">.items-center</div></div>
        <div class="x-content"><div class="box">.items-baseline</div></div>
        <div class="x-content"><div class="box">.items-stretch</div></div>
    </div>

Align Content

Preview Code
.content-start
.content-end
.content-center
.content-between
.content-around
.content-evenly

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.content-start</div></div>
        <div class="x-content"><div class="box">.content-end</div></div>
        <div class="x-content"><div class="box">.content-center</div></div>
        <div class="x-content"><div class="box">.content-between</div></div>
        <div class="x-content"><div class="box">.content-around</div></div>
        <div class="x-content"><div class="box">.content-evenly</div></div>
    </div>

Align Self

Preview Code
.self-auto
.self-start
.self-end
.self-center
.self-stretch
.self-baseline

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.self-auto</div></div>
        <div class="x-content"><div class="box">.self-start</div></div>
        <div class="x-content"><div class="box">.self-end</div></div>
        <div class="x-content"><div class="box">.self-center</div></div>
        <div class="x-content"><div class="box">.self-stretch</div></div>
        <div class="x-content"><div class="box">.self-baseline</div></div>
    </div>

Flex Center

Preview Code
.flex-center

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.flex-center</div></div>
    </div>

Grid Columns

Preview Code
.cols-1
.cols-2
.cols-3
.cols-4
.cols-5
.cols-6
.cols-7
.cols-8
.cols-9
.cols-10
.cols-11
.cols-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-1</div></div>
        <div class="x-content"><div class="box">.cols-2</div></div>
        <div class="x-content"><div class="box">.cols-3</div></div>
        <div class="x-content"><div class="box">.cols-4</div></div>
        <div class="x-content"><div class="box">.cols-5</div></div>
        <div class="x-content"><div class="box">.cols-6</div></div>
        <div class="x-content"><div class="box">.cols-7</div></div>
        <div class="x-content"><div class="box">.cols-8</div></div>
        <div class="x-content"><div class="box">.cols-9</div></div>
        <div class="x-content"><div class="box">.cols-10</div></div>
        <div class="x-content"><div class="box">.cols-11</div></div>
        <div class="x-content"><div class="box">.cols-12</div></div>
    </div>

Grid Rows

Preview Code
.rows-1
.rows-2
.rows-3
.rows-4
.rows-5
.rows-6

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.rows-1</div></div>
        <div class="x-content"><div class="box">.rows-2</div></div>
        <div class="x-content"><div class="box">.rows-3</div></div>
        <div class="x-content"><div class="box">.rows-4</div></div>
        <div class="x-content"><div class="box">.rows-5</div></div>
        <div class="x-content"><div class="box">.rows-6</div></div>
    </div>

Column Span

Preview Code
.col-span-1
.col-span-2
.col-span-3
.col-span-4
.col-span-5
.col-span-6
.col-span-7
.col-span-8
.col-span-9
.col-span-10
.col-span-11
.col-span-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.col-span-1</div></div>
        <div class="x-content"><div class="box">.col-span-2</div></div>
        <div class="x-content"><div class="box">.col-span-3</div></div>
        <div class="x-content"><div class="box">.col-span-4</div></div>
        <div class="x-content"><div class="box">.col-span-5</div></div>
        <div class="x-content"><div class="box">.col-span-6</div></div>
        <div class="x-content"><div class="box">.col-span-7</div></div>
        <div class="x-content"><div class="box">.col-span-8</div></div>
        <div class="x-content"><div class="box">.col-span-9</div></div>
        <div class="x-content"><div class="box">.col-span-10</div></div>
        <div class="x-content"><div class="box">.col-span-11</div></div>
        <div class="x-content"><div class="box">.col-span-12</div></div>
    </div>

Row Span

Preview Code
.row-span-1
.row-span-2
.row-span-3
.row-span-4
.row-span-5
.row-span-6

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.row-span-1</div></div>
        <div class="x-content"><div class="box">.row-span-2</div></div>
        <div class="x-content"><div class="box">.row-span-3</div></div>
        <div class="x-content"><div class="box">.row-span-4</div></div>
        <div class="x-content"><div class="box">.row-span-5</div></div>
        <div class="x-content"><div class="box">.row-span-6</div></div>
    </div>

Mobile Columns

Preview Code
.cols-mobile-1
.cols-mobile-2
.cols-mobile-3
.cols-mobile-4
.cols-mobile-5
.cols-mobile-6
.cols-mobile-7
.cols-mobile-8
.cols-mobile-9
.cols-mobile-10
.cols-mobile-11
.cols-mobile-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-mobile-1</div></div>
        <div class="x-content"><div class="box">.cols-mobile-2</div></div>
        <div class="x-content"><div class="box">.cols-mobile-3</div></div>
        <div class="x-content"><div class="box">.cols-mobile-4</div></div>
        <div class="x-content"><div class="box">.cols-mobile-5</div></div>
        <div class="x-content"><div class="box">.cols-mobile-6</div></div>
        <div class="x-content"><div class="box">.cols-mobile-7</div></div>
        <div class="x-content"><div class="box">.cols-mobile-8</div></div>
        <div class="x-content"><div class="box">.cols-mobile-9</div></div>
        <div class="x-content"><div class="box">.cols-mobile-10</div></div>
        <div class="x-content"><div class="box">.cols-mobile-11</div></div>
        <div class="x-content"><div class="box">.cols-mobile-12</div></div>
    </div>

Tablet Columns

Preview Code
.cols-tablet-1
.cols-tablet-2
.cols-tablet-3
.cols-tablet-4
.cols-tablet-5
.cols-tablet-6
.cols-tablet-7
.cols-tablet-8
.cols-tablet-9
.cols-tablet-10
.cols-tablet-11
.cols-tablet-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-tablet-1</div></div>
        <div class="x-content"><div class="box">.cols-tablet-2</div></div>
        <div class="x-content"><div class="box">.cols-tablet-3</div></div>
        <div class="x-content"><div class="box">.cols-tablet-4</div></div>
        <div class="x-content"><div class="box">.cols-tablet-5</div></div>
        <div class="x-content"><div class="box">.cols-tablet-6</div></div>
        <div class="x-content"><div class="box">.cols-tablet-7</div></div>
        <div class="x-content"><div class="box">.cols-tablet-8</div></div>
        <div class="x-content"><div class="box">.cols-tablet-9</div></div>
        <div class="x-content"><div class="box">.cols-tablet-10</div></div>
        <div class="x-content"><div class="box">.cols-tablet-11</div></div>
        <div class="x-content"><div class="box">.cols-tablet-12</div></div>
    </div>

Desktop Columns

Preview Code
.cols-desktop-1
.cols-desktop-2
.cols-desktop-3
.cols-desktop-4
.cols-desktop-5
.cols-desktop-6
.cols-desktop-7
.cols-desktop-8
.cols-desktop-9
.cols-desktop-10
.cols-desktop-11
.cols-desktop-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-desktop-1</div></div>
        <div class="x-content"><div class="box">.cols-desktop-2</div></div>
        <div class="x-content"><div class="box">.cols-desktop-3</div></div>
        <div class="x-content"><div class="box">.cols-desktop-4</div></div>
        <div class="x-content"><div class="box">.cols-desktop-5</div></div>
        <div class="x-content"><div class="box">.cols-desktop-6</div></div>
        <div class="x-content"><div class="box">.cols-desktop-7</div></div>
        <div class="x-content"><div class="box">.cols-desktop-8</div></div>
        <div class="x-content"><div class="box">.cols-desktop-9</div></div>
        <div class="x-content"><div class="box">.cols-desktop-10</div></div>
        <div class="x-content"><div class="box">.cols-desktop-11</div></div>
        <div class="x-content"><div class="box">.cols-desktop-12</div></div>
    </div>

Widescreen Columns

Preview Code
.cols-widescreen-1
.cols-widescreen-2
.cols-widescreen-3
.cols-widescreen-4
.cols-widescreen-5
.cols-widescreen-6
.cols-widescreen-7
.cols-widescreen-8
.cols-widescreen-9
.cols-widescreen-10
.cols-widescreen-11
.cols-widescreen-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-widescreen-1</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-2</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-3</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-4</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-5</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-6</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-7</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-8</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-9</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-10</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-11</div></div>
        <div class="x-content"><div class="box">.cols-widescreen-12</div></div>
    </div>

FullHD Columns

Preview Code
.cols-fullhd-1
.cols-fullhd-2
.cols-fullhd-3
.cols-fullhd-4
.cols-fullhd-5
.cols-fullhd-6
.cols-fullhd-7
.cols-fullhd-8
.cols-fullhd-9
.cols-fullhd-10
.cols-fullhd-11
.cols-fullhd-12

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.cols-fullhd-1</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-2</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-3</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-4</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-5</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-6</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-7</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-8</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-9</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-10</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-11</div></div>
        <div class="x-content"><div class="box">.cols-fullhd-12</div></div>
    </div>

Hidden Breakpoints

Preview Code
.hidden-mobile-only
.hidden-tablet-only
.hidden-desktop-only
.hidden-widescreen-only
.hidden-fullhd-only

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.hidden-mobile-only</div></div>
        <div class="x-content"><div class="box">.hidden-tablet-only</div></div>
        <div class="x-content"><div class="box">.hidden-desktop-only</div></div>
        <div class="x-content">
            <div class="box">.hidden-widescreen-only</div>
        </div>
        <div class="x-content"><div class="box">.hidden-fullhd-only</div></div>
    </div>

Hidden Specific Breakpoints

Preview Code
.hidden-mobile
.hidden-tablet
.hidden-desktop
.hidden-widescreen
.hidden-fullhd

    <div class="flex flex-wrap gap-2">
        <div class="x-content"><div class="box">.hidden-mobile</div></div>
        <div class="x-content"><div class="box">.hidden-tablet</div></div>
        <div class="x-content"><div class="box">.hidden-desktop</div></div>
        <div class="x-content"><div class="box">.hidden-widescreen</div></div>
        <div class="x-content"><div class="box">.hidden-fullhd</div></div>
    </div>

Contents