Layouts preset

The layouts preset extends Tailwind default configurations to help you out with layouts. It also contains plugins that work together with Splendid Layouts.

Extended Spacing values for Tailwind

Tailwind is kinda irritating because it has a weird spacing scale. We fixed that by introducing a consistent spacing scale for most of the units you’ll ever need.

inherit
1px to 8px
0ch to 100ch in steps of 0.25ch
0em to 100em in steps of 0.25em
0rem to 100rem in steps of 0.25rem
0 to 100 in steps of 0.25. (Each integer is 1rem according to tailwind’s convention).

No more [] for ch em, and rem values from 0 to 100!

<div class="w-inherit">...</div>  <!-- inherit -->
<div class="w-1px">...</div>      <!-- 1px     -->
<div class="w-1ch">...</div>      <!-- 1ch     -->
<div class="w-1em">...</div>      <!-- 1em     -->
<div class="w-1rem">...</div>     <!-- 1rem    -->
<div class="w-4">...</div>        <!-- 1rem    -->

More breakpoints for you to use as well

It’s a best practice to change your breakpoints according to your design. Unfortunately, Tailwind only provides device-breakpoints like 768px.

We fixed this by giving you a whole slew of breakpoints (from 50px to 2000px) so you can design to your hearts’ content ❤️!

Breakpoints

<div class="bp2:class">...</div>  <!-- 200px -->
<div class="bp3:class">...</div>  <!-- 300px -->
<div class="bp4:class">...</div>  <!-- 400px -->
<div class="bp5:class">...</div>  <!-- 500px -->

Container Breakpoints

<div class="@bp2:class">...</div>  <!-- 200px -->
<div class="@bp3:class">...</div>  <!-- 300px -->
<div class="@bp4:class">...</div>  <!-- 400px -->
<div class="@bp5:class">...</div>  <!-- 500px -->

Sensible Border Width values

Why does Tailwind only give us 0, 1px, 2px, 4px, and 8px values for border widths? We don’t understand and we find that to be a problem.

We fixed this by making all spacing values available for border-width.

<div class="border-3px">...</div>   <!-- 3px  -->
<div class="border-1em">...</div>   <!-- 1em -->
<div class="border-1rem">...</div>  <!-- 1rem -->
<div class="border-4">...</div>     <!-- 1rem -->

Now you can use any unit you like. Without [] too!

Installation

You can use the layouts preset in your Tailwind config.js file like this.

import { layouts } from '@splendidlabz/tailwind/presets'

export default {
  presets: [layouts],
}

Extended Values

This preset adds the following values to your Tailwind config

Spacing values

inherit
1px to 8px
0ch to 100ch in steps of 0.25ch
0em to 100em in steps of 0.25em
0rem to 100rem in steps of 0.25rem
0 to 100 in steps of 0.25. (Each integer represents 1rem according to tailwind’s convention).

<div class="w-inherit">...</div>  <!-- inherit -->
<div class="w-1px">...</div>      <!-- 1px     -->
<div class="w-1ch">...</div>      <!-- 1ch     -->
<div class="w-1em">...</div>      <!-- 1em     -->
<div class="w-1rem">...</div>     <!-- 1rem    -->
<div class="w-4">...</div>        <!-- 1rem    -->

Border Width values

All spacing values

<div class="border-3px">...</div>   <!-- 3px  -->
<div class="border-1em">...</div>   <!-- 1em -->
<div class="border-1rem">...</div>  <!-- 1rem -->
<div class="border-4">...</div>     <!-- 1rem -->

Border Radius Values

All spacing values
0.5r
radius
1.5r to 3r, in steps of 0.5r

r represents the CSS variable --radius that you may use in Splendid Layouts and Splendid Styles. The integers represent the multiple used.

<div class="rounded-3px">...</div>     <!-- border-radius: 3px  -->
<div class="rounded-1em">...</div>     <!-- border-radius: 1em  -->
<div class="rounded-1rem">...</div>    <!-- border-radius: 1rem -->
<div class="rounded-4">...</div>       <!-- border-radius: 1rem -->
<div class="rounded-radius">...</div>  <!-- border-radius: calc(var(--radius))     -->
<div class="rounded-2r">...</div>      <!-- border-radius: calc(var(--radius) * 2) -->

Breakpoint values

bp0.5 to bp20 in steps of 0.5

Each integer value represents 100px.

<div class="bp2:class">...</div>  <!-- Breakpoint at 200px -->
<div class="bp3:class">...</div>  <!-- Breakpoint at 300px -->
<div class="bp4:class">...</div>  <!-- Breakpoint at 400px -->
<div class="bp5:class">...</div>  <!-- Breakpoint at 500px -->

Container Query Breakpoints

All breakpoint values

To use container breakpoints, you need to prefix @ before the breakpoint value.

<div class="@bp2:class">...</div>  <!-- Container breakpoint at 200px -->
<div class="@bp3:class">...</div>  <!-- Container breakpoint at 300px -->
<div class="@bp4:class">...</div>  <!-- Container breakpoint at 400px -->
<div class="@bp5:class">...</div>  <!-- Container breakpoint at 500px -->

Included Plugins

The following plugins are included in this preset:

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.