tailwindcss-logical

Float and Clear Utilities

Can I use... CSS property: float: Flow-relative values inline-start and inline-end

Can I use... CSS property: clear: Flow-relative values inline-start and inline-end

float-start

clear-start

float-end

clear-end

Text Align Utilities

Can I use... CSS property: text-align: Flow-relative values start and end

text-start

text-end

Resize Utilities

Can I use... CSS property: resize: Support for flow-relative values block and inline

Overscroll Behavior Utilities

Can I use... CSS property: overscroll-behavior-block

Can I use... CSS property: overscroll-behavior-inline

overscroll-b-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra tortor non augue lacinia, vel tempus nunc pellentesque. Nulla et posuere lectus. Suspendisse ac magna at dolor luctus placerat. Suspendisse porttitor fermentum nibh non porttitor. Morbi turpis ipsum, porttitor sit amet leo at, aliquet aliquet nibh.

overscroll-b-contain

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra tortor non augue lacinia, vel tempus nunc pellentesque. Nulla et posuere lectus. Suspendisse ac magna at dolor luctus placerat. Suspendisse porttitor fermentum nibh non porttitor. Morbi turpis ipsum, porttitor sit amet leo at, aliquet aliquet nibh.

overscroll-b-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra tortor non augue lacinia, vel tempus nunc pellentesque. Nulla et posuere lectus. Suspendisse ac magna at dolor luctus placerat. Suspendisse porttitor fermentum nibh non porttitor. Morbi turpis ipsum, porttitor sit amet leo at, aliquet aliquet nibh.

overscroll-i-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu.

overscroll-i-contain

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu.

overscroll-i-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis magna neque, ultricies tempus est mollis eu.

Block Size Utilities

Can I use... CSS property: block-size

Can I use... CSS property: min-block-size

Can I use... CSS property: max-block-size

bs-8

bs-16

bs-32

min-bs-0

min-bs-full

max-bs-full

Inline Size Utilities

Can I use... CSS property: inline-size

Can I use... CSS property: min-inline-size

Can I use... CSS property: max-inline-size

is-8

is-16

is-32

min-is-0

min-is-full

max-is-sm

max-is-md

max-is-lg

Margin Utilities

Can I use... CSS property: margin-block

Can I use... CSS property: margin-inline

Can I use... CSS property: margin-block-start

Can I use... CSS property: margin-block-end

Can I use... CSS property: margin-inline-start

Can I use... CSS property: margin-inline-end

mlb-16

mli-16

mbs-16

mbe-16

mis-16

mie-16

Padding Utilities

Can I use... CSS property: padding-block

Can I use... CSS property: padding-inline

Can I use... CSS property: padding-block-start

Can I use... CSS property: padding-block-end

Can I use... CSS property: padding-inline-start

Can I use... CSS property: padding-inline-end

plb-16

pli-16

pbs-16

pbe-16

pis-16

pie-16

Space Between Utilities

These use the Flow-relative Margin properties. See Margin Utilities for browser support details.

space-i-2

space-i-8

space-i-8 + space-i-reverse (with flex-row-reverse)

space-b-2

space-b-8

space-b-8 + space-b-reverse (plus flex-col-reverse)

Inset Utilities

Can I use... CSS property: inset-block

Can I use... CSS property: inset-inline

Can I use... CSS property: inset-block-start

Can I use... CSS property: inset-block-end

Can I use... CSS property: inset-inline-start

Can I use... CSS property: inset-inline-end

inset-block-1/2

inset-inline-1/2

block-start-4

block-end-4

inline-start-4

inline-end-4

Border Width Utilities

Can I use... CSS property: border-block-start

Can I use... CSS property: border-block-end

Can I use... CSS property: border-inline-start

Can I use... CSS property: border-inline-end

border-bs-8

border-be-8

border-is-8

border-ie-8

Divide Width Utilities

These use the Flow-relative Border Width properties. See Border Width Utilities for browser support details.

divide-i

divide-i-4

divide-i-4 + divide-i-reverse (with flex-row-reverse)

divide-b

divide-b-4

divide-b-4 + divide-b-reverse (plus flex-col-reverse)

Border Radius Utilities

Can I use... CSS property: border-start-start-radius

Can I use... CSS property: border-start-end-radius

Can I use... CSS property: border-end-start-radius

Can I use... CSS property: border-end-end-radius

rounded-bs-lg

rounded-be-lg

rounded-is-lg

rounded-ie-lg

rounded-ss-lg

rounded-se-lg

rounded-es-lg

rounded-ee-lg