Tailwind Utilities
The space-separated classes accepted by tw(). Unrecognised classes are ignored.
php
Container::make()->tw('vertical gap-1 p-2 border-rounded bg-slate-800')Sizing
| Class | Equivalent |
|---|---|
grow grow-x grow-y | grow() growX() growY() |
fit fit-x fit-y | fit() fitX() fitY() |
fixed-x-{n} fixed-y-{n} | fixedX(n) fixedY(n) |
percent-x-{n} percent-y-{n} | percentX(n) percentY(n) |
min-x-{n} min-y-{n} | minSizeX(n) minSizeY(n) |
max-x-{n} max-y-{n} | maxSizeX(n) maxSizeY(n) |
Spacing
| Class | Equivalent |
|---|---|
p-{n} | padding(n) |
px-{n} py-{n} | paddingX(n) paddingY(n) |
pt-{n} pr-{n} pb-{n} pl-{n} | padding() on one edge |
m-{n} | margin(n) |
mx-{n} my-{n} | marginX(n) marginY(n) |
mt-{n} mr-{n} mb-{n} ml-{n} | margin() on one edge |
gap-{n} | gap(n) |
Layout
| Class | Equivalent |
|---|---|
horizontal vertical | axis() |
align-x-start align-x-center align-x-end | alignX() |
align-y-start align-y-center align-y-end | alignY() |
scroll scroll-x scroll-y | scroll() scrollX() scrollY() |
Borders
| Class | Equivalent |
|---|---|
border | border() |
border-square border-square-heavy | border(BorderCharSet::square()) and its heavy form |
border-rounded border-rounded-heavy | border(BorderCharSet::rounded()) and its heavy form |
border-double | border(BorderCharSet::double()) |
border-none | border(null) |
Text
| Class | Equivalent |
|---|---|
bold italic underline strikethrough dim reverse | The matching Text decoration |
text-left text-center text-right | align() |
wrap-word wrap-char wrap-none | wrap() |
Colour
Colour classes take a palette name and a shade, as {prefix}-{name}-{shade}.
| Prefix | Equivalent |
|---|---|
text-{name}-{shade} | colour() |
bg-{name}-{shade} | bgColour() |
border-{name}-{shade} | borderColour(line:) |
scroll-thumb-colour-{name}-{shade} | scrollColour(thumb:) |
scroll-track-colour-{name}-{shade} | scrollColour(track:) |
scroll-x-thumb-colour-{name}-{shade} | scrollXColour(thumb:) |
scroll-y-thumb-colour-{name}-{shade} | scrollYColour(thumb:) |
text-white text-black bg-white bg-black border-white and border-black are also accepted.
Names: slate gray zinc neutral stone red orange amberyellow lime green emerald teal cyan sky blue indigo violetpurple fuchsia pink rose
Shades: 50 100 200 300 400 500 600 700 800 900 950