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

What Is New in Tailwind CSS 1.3

How do I add consistent spacing or borders between sibling elements without extra markup?

Use the new space- and divide- utilities on the parent container.

• space-x-4 adds horizontal margin between children.
• space-y-4 adds vertical margin between children.
• Negative variants like -space-x-2 create overlapping effects.
• divide-x and divide-y insert 1 px borders between children, with color utilities such as divide-blue-500.
• Reverse utilities (space-x-reverse, divide-y-reverse) handle flex-row-reverse or flex-col-reverse layouts.

<ul class="flex space-x-2">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="divide-y divide-gray-200">
  <li>Item A</li>
  <li>Item B</li>
</ul>

How can I control transition delays directly in Tailwind?

Tailwind 1.3 adds delay-{amount} utilities for the transition-delay property.

• Values mirror the duration scale (e.g., delay-75, delay-1000).
• Responsive variants are generated automatically.

<div class="transition ease-in-out duration-500 delay-200">
  <!-- content -->
</div>

What new state variant lets me style children when a parent receives focus?

The group-focus variant works like group-hover but triggers on focus.

• Enable it in variants.groupFocus of your config.
• Useful for changing icons or inner text when the parent button is focused.

<button class="group text-gray-600 focus:bg-gray-100">
  <svg class="h-5 w-5 text-gray-400 group-focus:text-gray-500"></svg>
  Submit
</button>

How does Tailwind 1.3 simplify typography defaults and container padding?

You can now define a default line-height for each font-size and set breakpoint-specific padding for the container class.

• Font size with line-height: md: ['16px','24px'] generates .text-md { font-size:16px; line-height:24px; }.
• Container padding example: padding: { default:'1rem', sm:'2rem', lg:'4rem' } applies different horizontal padding at each breakpoint.
• The palette now includes current for currentColor, simplifying border-color matching.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: '12px',
      md: ['16px', '24px'],
    },
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}

Which new display utilities are available for layout edge cases?

Tailwind 1.3 introduces inline-grid, flow-root, and clear-none utilities.

• inline-grid sets display: inline-grid for grid items that need to flow inline.
• flow-root creates a new block formatting context, eliminating margin-collapsing (a modern clearfix).
• clear-none resets the clear property, useful with responsive utilities.

<span class="inline-grid grid-cols-3 gap-4">...</span>

<div class="flow-root">...</div>

<p class="clear-left md:clear-none">...</p>