Tailwind

Layouts

Use the Stack when you want to arrange elements one on top of another.

Things to note:

• The stack container will only stack direct childen. To stack elements which are nested deeper, you can nest stacks i.e. use the stack-l class on a child element which then becomes the stack container for its own direct children.
• You can split a stack using the split-after prop class which is useful when you want two visually separate sections within a stack.
• By default, applying the stack-l class to an element will give it a flexbox context. At times you might not want this—for example, when using the stack in combination with other layout primitives to compose a more complex layout. This can be achieved by applying the stack-l_no-flex prop class. Not that now, only block context child elements will be stacked. You can apply the block utility class to an inline child element to give it a block context. Also, you won’t be able to split the stack in this case.

Use the Box to help content stand out.

Things to note:

• The box is a simple container with a padding. You can theme the box using the text, bg and border prop classes.

• If you wish your box to not have a border but still be accessibly outlined in Windows High Contrast mode, you can use the border-hc utility.

  To see that in action, below, try unsetting the border class, and instead setting the border-hc class. Now your box will be borderless in normal mode, but a border will appear when you toggle on “High Contrast”.

• Frankly the box layout can be achieved with Tailwind’s native p, text, bg and border utilities by using them exactly in the same way as you’d use the box prop classes. Consider the box classes as a semantic alternative then.

Use the Center for all your horizontal centering needs.

Things to note:

• By default, all block-level elements occupy the full width of their container. But, for an element to look centered requires it to be of a smaller width than its container. To achieve this the center-l class sets the container’s max-width to the defined measure width (65ch in the default config). You can override this using the max-w prop class.
• You can also pad the centered column using the gutters prop class. Note that the width of the gutters will not contribute to the overall width of the centered column.
• If you want to also center the text within the container, you can use the text prop class.
• Finally, if you want the width of the container to be based on the intrinsic width of its contents instead of a defined maximum width, you can use the intrinsic prop class.

Use the Cluster when you want elements in a row and you want them to wrap.

Things to note:

• If you want to ensure that all elements are at least of a certain minimum width you can use the item-min-w prop class.
• If you want elements to be always centered use the center prop class.

Use the Sidebar when you want two elements—a side element and a main element—placed side-by-side, but when the width of the main element becomes narrower than a percentage of the whole width, you want the elements to stack one above the other.

Things to note:

• The width of the main element should be a percentage value and is 66.667% (two-thirds) by default. You can override this using the main-min-w prop class.

  Below, if you set the the minimum width of the main element to 80% by toggling on the sidebar-l_main-min-w-4/5, you will observe that the elements will stack vertically. This is because the the width of the main element is less than 80% of the container in a side-by-side orientation, so the elements must stack to satisfy the minimum width constraint.

• By default the side element is sized intrinsically. If you want to set a specific width use the side-w prop class.

  Do not use a percentage value for the side-w prop class. If you do that, stacking will never occur. You can use clamp (e.g. sidebar-l_side-w-[clamp(20ch,33.333%,100%)]) if you want a percentage-based preferred side element width. Read more about the technique here.

• By default the side element stretches to take up the full height of the main element. If you want heights to be intrinsic use the no-stretch prop.

• If the side element is on the right side of the main element, use sidebar-l-end instead of the sidebar-l. Prop classes work the same way.

Use the Switcher if you want to have elements arranged horizontally in a row under certain conditions, but want them to stack up one above the other under other conditions.

The elements will be arranged horizontally in a row if:

• The width of the container is greater than a specified threshold width. This width can be controlled via the threshold prop class.
• The number of elements is up to a specified maximum number of elements that can appear side by side. This number can be controlled via the limit prop class.

If either of these conditions are not met, the elements will be stacked vertically one above the other.

1. Below, the threshold width is set to xs so stacking triggers only when the container width is less than that width. You can observe this by toggling on “Narrow”.
2. If you set the prop class switcher-l_limit-3 stacking occurs as the number of elements is 4 which is greater than the limit of 3.

Use the Cover to vertically center a principal element with the option of having elements above and below it.

Things to note:

• To make it work apply the apply the cover-l class to the parent container. The parent must have defined minimum height. By default, this is the screen height i.e. 100vh. You can override this using the min-h prop class.
• Apply the cover-l_center class on the child element you want to center. This element must be a direct child of the parent container.
• The space prop allows you to specify the minimim space between and around child elements.
• If you want the container to not have any padding, apply the no-pad class to it.

Use the Grid if you want a grid of content where elements align to vertical and horizontal rules.

Items have a minimum allowed width (set using the item-min-w prop or picked up from the plugin config). Items will wrap as the available width of the container decreases and they shrink beyond the minimum allowed width.

Use the Frame to enforce a certain aspect ratio on the container.

The aspect ratio is specified using the aspect prop class or picked up from the plugin config.

A replaced child element with the tag img, iframe, video, embed, svg or canvas will fill the frame. If you want this behavior for some other element, apply the frame-l_frame class to it.

Use the Reel when you want elements in a row, but instead of wrapping, they should overflow and come into view as the user scrolls horizonatally.

Thinks to note:

• The width of the elements will be intrinsic by default. You can override this using the item-w prop class.
• You can set an explicit height for the container using the h prop class.
• The standard way the browser indicates to the user that scrolling is possible is to show a scrollbar. You can customize the scrollbar using the scrollbar utility class.
• If you want to hide the scrollbar, you can use the no-scrollbar utility class. If you do this, make sure you have a way to indicate to the user through other visual cues that the element is horizontally scrollable.
• If you want to pad the reel container, it is recommeded that you wrap the container and apply padding to the wrapper instead of directly to the reel container.

Use the Imposter when you want to superimpose content on top of other content.

Things to note:

• By default, the imposter will be positioned absolutely and will be positioned relative to the first parent element which has a position value other than static. To position the imposter relative to the viewport, apply the fixed prop class.
• You can control the margin between the imposter and the positioning container/viewport using the m prop class.

Consider using the native HTML <dialog> element as the imposter container. You get the benefit of the browser’s built-in usablity and accessibility features that must be replicated if using other elements for a similar purpose. Also, the ::backdrop CSS pseudo-element can be used to style the backdrop that is displayed behind a <dialog> element when the dialog is displayed with HTMLDialogElement.showModal().

Use the Icon for laying out icons.

Things to note:

• The element to which the icon-l class is applied should contain a <svg> element as a direct child or a direct child with the class icon-l_icon that in turn contains a <svg> element as a direct child.
• Depending on the icon family you are using, you may need to specify the iconSize in your config. This is 0.9em in the default config. You may also override this using the size prop on a case-by-case basis.
• The space between the icon and the text may also be set in your config via iconGap. It is 0.3em in the default config. You may also override this using the space prop on a case-by-case basis.
• Sometimes you need that extra bit of fine-tuning to get the icon and text to align perfectly. This is why the nudge prop class exists.

  For example, try toggling on the lowercase class. Now the icon is a little off. Toggle on the icon-l_nudge-sm class to fix the alignment.

• The nudge prop class works with negative values as well. For example, -icon-l_nudge-sm would’ve nudged the icon upwards.
• For a vertical orientation use the vertical prop class. In this case, the nudge prop class will operate on the horizontal axis.