Tailwind CSS 1.9: What's New, Release History & EOL Status

What Is New in Tailwind CSS 1.9

How can I share design tokens across projects with the new presets option?

Tailwind CSS 1.9 introduces a presets key in tailwind.config.js that lets you import shared configuration objects.

In practice you create a base config file (e.g., shared-preset.js) and reference it:

// shared-preset.js
module.exports = {
  theme: {
    colors: {
      primary: '#1a202c',
      secondary: '#2d3748',
    },
  },
};

// tailwind.config.js
module.exports = {
  presets: [require('./shared-preset')],
  // your project-specific overrides here
};

This matters if you maintain a design system across multiple repositories; you only need to update the preset once.

What new grid-related utilities does Tailwind CSS 1.9 add?

Version 1.9 adds col-span-full, row-span-full, and utilities for grid-auto-columns and grid-auto-rows.

• col-span-full makes an element span every column in the grid.
• row-span-full makes an element span every row.
• auto-cols-{size} and auto-rows-{size} let you control the size of automatically generated tracks.

Example:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-full bg-gray-200 p-4">Full-width header</div>
  <div class="auto-cols-min bg-gray-100 p-2">Item 1</div>
  <div class="auto-cols-min bg-gray-100 p-2">Item 2</div>
</div>

Watch out for older browsers that may need a prefix for the new CSS properties.

Which new visual utilities (rotate, skew, border radius) are introduced in 1.9?

Tailwind CSS 1.9 ships with finer-grained rotate and skew steps as well as extra border-radius scales.

• Small rotate values: rotate-1, rotate-2, -rotate-1, etc.
• Small skew values: skew-x-1, skew-y-2, and their negative counterparts.
• Additional border radius utilities: rounded-xl, rounded-2xl, rounded-3xl.

Example usage:

<div class="rotate-2 skew-x-1 rounded-2xl bg-indigo-500 p-6">Styled box</div>

This matters if you need subtle visual tweaks without writing custom CSS.

How has outline support been improved for better accessibility in 1.9?

The outline utilities are now configurable and outline-none is more accessible by default, with new outline-black and outline-white helpers.

In practice you can enable outline utilities in the corePlugins section or customize the colors:

module.exports = {
  corePlugins: {
    outline: true,
  },
  theme: {
    outline: {
      black: ['2px solid #000'],
      white: ['2px solid #fff'],
    },
  },
};

Most teams will appreciate the explicit outline-black class for focus states on dark backgrounds.