Tailwind CSS Testing Page
Flex Layouts
Item 1
Item 2
Item 3
Testing 4 - item item space item
Blue
Green
Purple
Testing 3.2 - Left, center , right
Relative without flex, require set parent size, items-center (v-center)
Left
Center: (absolute left-1/2 transform -translate-x-1/2)
Right: (ml-auto)
Blue
Blue
Purple
Blue
Green
Purple
Testing 3.1 - Left, center , right
Relative, items-center (v-center)
Left
Center: (absolute left-1/2 transform -translate-x-1/2)
Right: (ml-auto)
Blue
Blue
Purple
Blue
Green
Purple
Testing 2 - Left, right (justify-between)
Blue
Purple
Testing 1 - Widget
Blue
Green
Purple
Note
vertically center
items-center
flex-col justify-center
items-center
flex-col justify-center
horizontally center
justify-center
flex-row items-center
justify-center
flex-row items-center
Basic Flex Row
Item 1
Item 2
Item 3
Flex Column: flex-col
Item 1
Item 2
Item 3
Justify Content
justify-start
Item
Item
Item
justify-center
Item
Item
Item
justify-end
Item
Item
Item
justify-between
Item
Item
Item
Align Items
items-start
Short
Tall Item
Short
items-center
Short
Tall Item
Short
items-end
Short
Tall Item
Short
Mixed alignment: first two items-start, last item items-end
Short (self-start)
Tall Item (self-start)
Short (self-end)
Flex Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7 (flex-1)
Item 8 (flex-2)
Flex Grow
flex-grow-0 (default)
Fixed Width
Fixed Width
Fixed Width
flex-grow-1 (grows to fill space)
Fixed Width
flex-grow (fills remaining space)
Fixed Width
Multiple flex-grow items (proportional growth)
flex-grow (1x)
flex-grow (1x)
flex-grow (1x)
Different flex-grow values
flex-grow (1x)
flex-grow-2 (2x)
flex-grow (1x)
Instructions
A live gallery of Tailwind utilities: every panel is real markup rendered with the classes it names, so you can see what a utility does before using it.
- Pick a section from the tabs — flex, grid, spacing, colour, effects, positioning.
- Scroll the panels; each one shows a rendered result next to the classes that produced it.
- Copy the class list you want straight into your own markup.
Tips
- Nothing here is saved or sent anywhere — it is a rendering surface, so it is also the fastest way to check that a Tailwind build is picking up your config.
- React Test is a scratch section for checking component behaviour, not a Tailwind reference.
- Need a number rather than a class? Use Pixel Calc to convert between Tailwind units, px and rem.
- Hit Example and click any highlighted tab to jump straight into that gallery.