Skip to content

Home

Jump to bottom
ShiftLimits edited this page Jan 10, 2022 · 10 revisions

Gridlines for Tailwind CSS is a significant reworking of the spacing scale which affects many utilities. It is advised to use Gridlines on a new project.

Why Gridlines?

Gridlines attempts to move design with Tailwind CSS from specifying spacing values in absolute units to specifying them as values relative to a single absolute unit which can be used as a controller for scaling. Your design's scaling can not only be adjusted for the whole document, but also on a per-element basis as well. This opens up the ability to scale a components size individually with one utility.

The tools that render websites are being used in increasingly diverse contexts, each with their own design requirements. Gridlines helps scale your design for applications that may be used in contexts where the user can be varying distances from the screen, such as a Smart Phone, Desktop Computer, or Smart TV.

Absolute Unit

The core unit of Gridlines is the Base Grid Cell Size. You can think of this as the equivalent of the 1cm in centimetre graph paper. Changing this value scales your layout proportionally.

Base Grid Cell Size Configuration

You can customize the base grid cell size by editing the theme.base value of your Tailwind config:

// tailwind.config.js

module.exports = {
  theme: {
    base: '28px' // Changes the base grid cell size to 28px
  },
  // ...
}

You can make the base unit responsive using the breakpoint names defined in the theme.screens object as keys:

// tailwind.config.js

module.exports = {
  theme: {
    base: {
      default: '20px', // Use a smaller grid cell size by default for smaller screens
      lg: '24px' // At the `lg` breakpoint, scale the grid size to 24px as these devices are probably held further away from the user
    }
  },
  // ...
}

New Utilities

Unit

Utility for controlling the grid cell size of an element.

Gridlines

Overlay a grid to help visually aid the design process.

Changed Utilities

Spacing

Gridlines is a complete overhaul of the spacing scale in Tailwind CSS.

With vanilla Tailwind, the spacing scale uses decimals and is equivalent to a grid with a base unit size of 4px. With Gridlines, the spacing scale uses fractions and you define the base unit size that the spacing scale is a fraction of. By default, Gridlines uses a base unit size of 24px.

Example of the fraction scale from 0 to 1 with a base unit of 24px:

Name Size Pixels
0 0 0px
px 1px 1px
1/8 0.125 3px
2/8 0.25 6px
3/8 0.375 9px
4/8 0.5 12px
5/8 0.625 15px
6/8 0.75 18px
7/8 0.875 21px
1/5 0.2 4.8px
2/5 0.4 9.6px
3/5 0.6 14.4px
4/5 0.8 19.12px
1/4 0.25 6px
2/4 0.5 12px
3/4 0.75 18px
1/3 0.333 7.992px
2/3 0.666 16.008px
1/2 0.5 12px
1 1 24px

Width / Max-Width / Min-Width

Height / Max-Height / Min-Height

Inset

In addition to the spacing scale values, the inset utility also includes negative spacing values.

Translate

In addition to the spacing scale values, the translate utility also includes negative spacing values.

Border Radius

Border Width

Stroke Width

Ring Offset

Ring Width

Outline Offset

Outline Width

Line Height / Leading

Text Indent

In addition to the line height values, the translate utility also includes negatives of each.

Clone this wiki locally