lotte css

Utility Classes

Flexbox Layout

Display Flex

Item 1
Item 2
Item 3
<div class="flex">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Flex Row

Item 1
Item 2
Item 3
Item 4
<div class="flex flex-row">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
  <div class="bg-accent">Item 4</div>
</div>

Flex Column

Item 1
Item 2
Item 3
<div class="flex flex-col">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Justify Start

Item 1
Item 2
Item 3
<div class="flex justify-start">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Justify Center

Item 1
Item 2
Item 3
<div class="flex justify-center">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Justify End

Item 1
Item 2
Item 3
<div class="flex justify-end">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Justify Between

Item 1
Item 2
Item 3
<div class="flex justify-between">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Justify Around

Item 1
Item 2
Item 3
<div class="flex justify-around">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
</div>

Items Start

Item 1
Tall Item
Item 3
<div class="flex items-start">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent" style="height: 100px;">Tall Item</div>
  <div class="bg-accent">Item 3</div>
</div>

Items Center

Item 1
Tall Item
Item 3
<div class="flex items-center">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent" style="height: 100px;">Tall Item</div>
  <div class="bg-accent">Item 3</div>
</div>

Items End

Item 1
Tall Item
Item 3
<div class="flex items-end">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent" style="height: 100px;">Tall Item</div>
  <div class="bg-accent">Item 3</div>
</div>

Flex Wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="flex flex-wrap">
  <div class="bg-accent">Item 1</div>
  <div class="bg-accent">Item 2</div>
  <div class="bg-accent">Item 3</div>
  <div class="bg-accent">Item 4</div>
  <div class="bg-accent">Item 5</div>
  <div class="bg-accent">Item 6</div>
  <div class="bg-accent">Item 7</div>
  <div class="bg-accent">Item 8</div>
</div>

Grid Layout

Basic Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Column Spans

col-span-2
col-span-2
col-span-1
col-span-3
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">col-span-2</div>
  <div class="col-span-2">col-span-2</div>
  <div class="col-span-1">col-span-1</div>
  <div class="col-span-3">col-span-3</div>
</div>

Spacing Utilities

Margin

m-0
m-1
m-2
m-4
m-8
<div class="m-0 bg-accent">m-0</div>
<div class="m-1 bg-accent">m-1</div>
<div class="m-2 bg-accent">m-2</div>
<div class="m-4 bg-accent">m-4</div>
<div class="m-8 bg-accent">m-8</div>

Padding

p-0
p-1
p-2
p-4
p-8
<div class="p-0 bg-accent">p-0</div>
<div class="p-1 bg-accent">p-1</div>
<div class="p-2 bg-accent">p-2</div>
<div class="p-4 bg-accent">p-4</div>
<div class="p-8 bg-accent">p-8</div>

Display Utilities

Display Types

display: block
display: inline-block
display: inline
display: flex
display: grid
<div class="block">display: block</div>
<div class="inline-block">display: inline-block</div>
<div class="inline">display: inline</div>
<div class="flex">display: flex</div>
<div class="grid">display: grid</div>

Border Utilities

border (all sides)
border-t (top only)
border-r (right only)
border-b (bottom only)
border-l (left only)
<div class="border">border (all sides)</div>
<div class="border-t">border-t (top only)</div>
<div class="border-r">border-r (right only)</div>
<div class="border-b">border-b (bottom only)</div>
<div class="border-l">border-l (left only)</div>

Border Radius

rounded
rounded-lg
rounded-full
<div class="rounded">rounded</div>
<div class="rounded-lg">rounded-lg</div>
<div class="rounded-full">rounded-full</div>

Responsive Utilities

Container and Card

This container adapts to different screen sizes (resize browser)

<div class="container card">
  <p>Content here</p>
</div>

Responsive Display

Visible on small screens, hidden from medium screens
<div class="hidden md:block">Hidden on small screens, visible from medium screens</div>
<div class="block md:hidden">Visible on small screens, hidden from medium screens</div>