Extended documentation
Extended documentation with experimental components and functionalities.
2 columns layout
Use a responsive 2 columns layout with TW elements. A tutorial on how to simply create a 2 columns layout.
Background image
Use responsive Background image component with TW elements. With this tutorial, you'll learn how to seamlessly set an image as the background of an item.
Center text
Use responsive text center utilities with TW elements. Learn how to center text easily.
Display block
Use responsive display block layout with TW elements. Learn how to put the element on it's own line and fill its parent.
Display flex
Use responsive display flex utilities with TW elements. A simple and quick way to create a flexible element.
Display none
Use responsive display none utilities with TW elements. A tutorial on how to remove an element from a page layout.
Float right
Use responsive float utilities. See how to place an element to the right of its container.
Letter spacing
Use responsive letter spacing styles with TW elements. This is a simple example of how quickly you can change the spaces between letters.
Opacity
Use responsive Opacity utilities with TW elements. See how to easily and simply change the opacity.
Overflow
Use these shorthand utilities for quickly configuring how content overflows an element.
Overflow hidden
Learn how to make it easily and quickly clip any content within an element that overflows the bounds of that element.
Sticky footer
A sticky footer is a component that is pinned to the bottom of the viewport in desktop browsers. It stays visible when the user scrolls the page up or down.
Sticky header
A sticky navbar is a component that is pinned to the top of the viewport in desktop browsers. It stays visible when the user scrolls the page down or up
Text bold
Use responsive text bold styles with TW elements. This a simple example of how quickly you can change the font weight.
Text color
Use responsive text color styles with TW elements. See how to easily and simply change the text color.
Text size
Use responsive text size styles with TW elements. Learn how to change the text size easily and quickly.
Visibility
Use responsive Visibility utilities with TW elements. Control the visibility, without modifying the display, of elements with visibility utilities.
Z-index
Use responsive Z-index utilities to control the stack order. A simple way to put elements on top of others.
Color picker
Use native Color picker component to select different colors
Colors
Use TW elements colors styles to change your background color, text color with custom colors, or pick from the color palette
Flexbox
Use responsive flexbox component to control the initial size of flex items, how flex items grow and shrink
Hero Icons
Use responsive svg icons for Tailwind CSS and create better projects. Free for commercial use, no registration required.
Icons
Use responsive svg icons for Tailwind CSS and create better projects. Free for commercial use, no registration required.
Parallax
Use the responsive parallax component and control how a background image behaves when scrolling.
Theme
Customize Tailwind default theme or create a new theme for your projects