šŸ–– tailwindcss-logical

The following is an demonstration of every type of utility provided by tailwindcss-logical. You can read about installation, configuration, and more in the project's README.

This page is entirely styled with Tailwind classes, from a mostly unmodified Tailwind config file. To achieve better browser support, tailwindcss-logical's styles are run through some additional PostCSS plugins. Read more about browser compatibility.

To see how these utilities enable multi-directional layouts, click the Switch Text Direction button! All it does is flip the dir attribute on the <html> element from "ltr" to "rtl" and back again, and the rest is handled through the magic of logical properties and values.

Block Size

bs-12
bs-24
bs-36
min-bs-0
min-bs-full
max-bs-full

Border Color

border-lb-blue-400
border-li-blue-400
border-bs-blue-400
border-be-blue-400
border-is-blue-400
border-ie-blue-400

Border Radius

rounded-bs-xl
rounded-be-xl
rounded-is-xl
rounded-ie-xl
rounded-ss-xl
rounded-se-xl
rounded-es-xl
rounded-ee-xl

Border Width

border-lb-8
border-li-8
border-bs-8
border-be-8
border-is-8
border-ie-8

Divide Width

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)

Float and Clear

float-start
clear-start
float-end
clear-end

Inline Size

is-16
is-32
is-48
min-is-0
min-is-full
max-is-sm
max-is-md
max-is-lg

Inset

inline-start-4
inline-end-4
inset-inline-4
block-start-4
block-end-4
inset-block-4

Margin

mlb-16
mli-16
mbs-16
mbe-16
mis-16
mie-16

Overscroll Behavior

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.

Padding

plb-16
pli-16
pbs-16
pbe-16
pis-16
pie-16

Resize

Space Between

  • 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)

Text Align

text-start

text-end

Ready to get started? Check out the README for more info on usage and configuration.