Custom Widths Using Tailwind

In building this website, I realized that none of the existing width settings in Tailwind CSS were sufficient for a column of primary content, like the one this text is in. Fortunately, Tailwind allows you to set custom widths. In fact, they also allow you to set custom spacing, which can be used for widths or other things, like padding and margins. For flexibility, I opted for custom spacing.

Side note:
I am using Tailwind 3, as this is a brand new Rails 7 app, but this feature is also available in Tailwind 2, Tailwind 1, and the original Tailwind.

Assuming you already have Tailwind installed, all you need to do is add a small snippet to your Tailwind configuration:

# tailwind.config.js

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

You can set this key/value pair to pretty much anything you want. As you are aware, the optimal line length for readability is between 50 and 75 characters, meaning that a line of text should ideally not have more than 75 characters. A little informal research of my own showed that, using the default font size of 16 (aka 1em), this would be around 628px.

Another side note:
You will notice that the Tailwind configuration file uses rem instead of em. This is a relative em, which will be set relative to the font size of the containing element, instead of being based on the global font size (1em).

In the end, my setting looked like this:

# tailwind.config.js