v1.3.4

• Fix bug where divide-{x/y}-0 utilities didn't work due to missing unit in calc call

v1.3.3

• Fix bug where the divide-x utilities were not being applied correctly due to referencing --divide-y-reverse instead of --divide-x-reverse

v1.3.2

• Add forgotten responsive variants for space, divideWidth, and divideColor utilities

v1.3.1

• Fix bug where the space-x utilities were not being applied correctly due to referencing --space-y-reverse instead of --space-x-reverse

v1.3.0

Tailwind CSS v1.3.0

Holy crap a new Tailwind CSS release! We've got a few new goodies in this one, and I've made sure to put the most exciting ones at the top 🚀

New Features

• New space and divide layout utilities
• New transition-delay utilities
• New group-focus variant
• Support for specifying a default line-height for each font-size utility
• Support for breakpoint-specific padding for container class
• Added current to the default color palette
• New inline-grid utility
• New flow-root display utility
• New clear-none utility

New space and divide layout utilities (#1584, #1594)

Prior to Tailwind v1.3, if you wanted to add some space or a border between elements, you had to manually add the necessary margin/border to all but one of the children:

<!-- Before -->
<ul>
  <li>One</li>
  <li class="mt-4">Two</li>
  <li class="mt-4">Three</li>
</ul>

Tailwind v1.3 introduces new space-{x/y}-{n}, divide-{x/y}-{n}, and divide-{color} utilities for controlling this at the parent level instead, simplifying this common pattern into something concise and declarative that doesn't require all of that annoying duplication:

<!-- After -->
<ul class="space-y-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The space-x-{n} utilities add a left margin to all but the first element, and the space-y-{n} utilities add a top margin to all but the first element:

<!-- Horizontal stack with 8px of space between each item -->
<ul class="flex space-x-2">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Vertical stack with 16px of space between each item -->
<ul class="space-y-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The space utilities inherit their configuration from the global spacing configuration by default, and include negative variations like -space-x-2 to create overlapping effects.

The divide-x-{n} utilities add a left border to all but the first element, and the divide-y-{n} utilities add a top border to all but the first element:

<!-- Horizontal list with 1px border between each item -->
<ul class="flex divide-x">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Vertical list with 1px border between each item -->
<ul class="divide-y">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The divide utilities inherit their configuration from the borderWidth configuration, and support the default keyword (set to 1px out of the box, like with borderWidth) so you can use divide-y instead of divide-y-1.

The divide-{color} utilities are used to set the color of the dividing borders:

<!-- Vertical list with 1px blue border between each item -->
<ul class="divide-y divide-blue-500">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

We've also included space-{x/y}-reverse and divide-{x/y}-reverse utilities which can be useful if you are reversing the direction of items in a container using either flex-row-reverse or flex-col-reverse. These utilities swap left margins for right margins, top margins for bottom margins, left borders for right borders, and top borders for bottom borders to account for the items being in reverse order:

<!-- Reversed horizontal list with 8px space between each item -->
<ul class="flex flex-row-reverse space-x-2 space-x-reverse">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

There are a couple limitations of our implementation that are worth pointing out:

• They break down if your items wrap, you'll want to do something complicated with negative margins if you need to handle this
• They break down if you start manually changing the order of things using the order property

Despite these limitations, I think you'll still find these incredibly useful. Eventually gap will have universal support in flexbox layouts and we can all rejoice.

All of these utilities include responsive variants by default, and their values and variants can be customized using the space, divideWidth, and divideColor configuration keys respectively.

New transition-delay utilities (#1462)

Tailwind v1.3 introduces new delay-{amount} utilities for the transition-delay property:

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

We include the same values we do for the duration-{amount} utilities and generate responsive variants by default:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
    transitionDelay: {
      '75': '75ms',
      '100': '100ms',
      '150': '150ms',
      '200': '200ms',
      '300': '300ms',
      '500': '500ms',
      '700': '700ms',
      '1000': '1000ms',
    },
  },
  variants: {
    // ...
    transitionDelay: ['responsive'],
  },
  // ...
}

New group-focus variant (#1577)

We've added a new group-focus variant that works just like the existing group-hover variant, but for focus states.

This is useful when you want to add custom focus style to a button or link that has some nested child you want to style in a specific way, for example, changing the color of an icon inside of a button when the button is focused:

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

This variant not enabled for any utilities by default, but can be enabled in the variants section of your config file.

Support for specifying a default line-height for each font-size utility (#1532)

A common pattern we've run into in our own Tailwind projects is repeatedly pairing a font-size utility with a particular line-height utility, for example always using text-sm with leading-5.

Tailwind v1.3 now lets you specify a default line-height for each font-size utility in your config file, using a tuple of the form [fontSize, lineHeight]:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      // Will embed no line-height value
      sm: '12px',

      // Will use `font-size: 16px` and `line-height: 24px`
      md: ['16px', '24px'],
    },
  },
}

.text-sm {
  font-size: 12px;
}

.text-md {
  font-size: 16px;
  line-height: 24px;
}

The font-size utilities are generated before the line-height utilities in the final CSS, so you can still override the line-height for a particular font-size by simply adding a leading-{size} utility:

<!-- Will still be `line-height: 1`, even though the default line-height for `text-md` is `24px` (as per the example config above) -->
<div class="text-md leading-none"></div>

We haven't changed the default config to include default line-heights as that would be a breaking change, but this is a feature we will likely take advantage of in Tailwind 2.0 sometime in the future.

Support for breakpoint-specific padding for container class (#1398)

Prior to v1.3, you could configure the container class to have built-in horizontal padding like so:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

Tailwind v1.3 enhances this functionality to allow you to specify a different amount of padding for each breakpoint:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}

Added current to the default color palette (#1438)

The default color palette now includes current for currentColor, which simplifies some situations like creating buttons where the border color should match the text color:

<!-- Before -->
<button
  class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-gray-500 hover:border-gray-700 focus:border-gray-700"
>
  <!-- ... -->
</button>

<!-- Now -->
<button class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-current">
  <!-- ... -->
</button>

Since this color has been added to the default color palette, it is available for textColor, borderColor, backgroundColor, and placeholderColor utilities automatically.

New inline-grid utility (#1375)

We've added an inline-grid utility for setting display: inline-grid. This probably should've been included in v1.2 and somehow got missed, but it's here now baby.

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

Will you ever use this? I never have, but it should still be there dammit.

New flow-root display utility (#1247)

We've added a new flow-root utility for display: flow-root. Never heard of it? Me neither until it was PR'd.

It behaves exactly like display: block with one magic...

v1.2.0

Tailwind CSS v1.2.0

This is probably the most exciting feature release in the history of Tailwind, so put on your seat belts.

New Features

• CSS Transition support
• CSS Transform support
• CSS Grid support
• Added max-w-{screen} utilities
• Added max-w-none utility
• Added rounded-md utility
• Added shadow-sm utility
• Added shadow-xs utility
• Added stroke-width utilities
• Added fixed line-height utilities
• Added additional display utilities for table elements
• Added box-sizing utilities
• Added clear utilities
• Config file dependencies are now watchable
• Allow plugins to extend the user's config
• Added new plugin and plugin.withOptions APIs

CSS Transition support (#1273)

Tailwind now includes utilities for setting the transition-property, transition-duration, and transition-timing-function properties.

<button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...</button>

Expand to see the default values for these utilities

// tailwind.config.js
module.exports = {
  theme: {

    // .transition-{property}
    transitionProperty: {
      none: 'none',
      all: 'all',
      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
      colors: 'background-color, border-color, color, fill, stroke',
      opacity: 'opacity',
      shadow: 'box-shadow',
      transform: 'transform',
    },

    // .ease-{timingFunction}
    transitionTimingFunction: {
      linear: 'linear',
      in: 'cubic-bezier(0.4, 0, 1, 1)',
      out: 'cubic-bezier(0, 0, 0.2, 1)',
      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
    },

    // .duration-{duration}
    transitionDuration: {
      '75': '75ms',
      '100': '100ms',
      '150': '150ms',
      '200': '200ms',
      '300': '300ms',
      '500': '500ms',
      '700': '700ms',
      '1000': '1000ms',
    },
  }
}

For more information, check out the documentation.

CSS Transform support (#1272)

Tailwind now includes utilities for scaling, rotating, translating, and skewing elements.

<span class="transform scale-150 rotate-45 translate-x-full origin-center"></span>

Expand to see the default values for these utilities

// tailwind.config.js
module.exports = {
  theme: {

    // .origin-{origin}
    transformOrigin: {
      center: 'center',
      top: 'top',
      'top-right': 'top right',
      right: 'right',
      'bottom-right': 'bottom right',
      bottom: 'bottom',
      'bottom-left': 'bottom left',
      left: 'left',
      'top-left': 'top left',
    },

    // .scale-{scale}
    // .scale-x-{scale}
    // .scale-y-{scale}
    scale: {
      '0': '0',
      '50': '.5',
      '75': '.75',
      '90': '.9',
      '95': '.95',
      '100': '1',
      '105': '1.05',
      '110': '1.1',
      '125': '1.25',
      '150': '1.5',
    },

    // .rotate-{angle}
    rotate: {
      '-180': '-180deg',
      '-90': '-90deg',
      '-45': '-45deg',
      '0': '0',
      '45': '45deg',
      '90': '90deg',
      '180': '180deg',
    },

    // .translate-x-{distance}
    // .translate-y-{distance}
    // .-translate-x-{distance}
    // .-translate-y-{distance}
    translate: (theme, { negative }) => ({
      ...theme('spacing'),
      ...negative(theme('spacing')),
      '-full': '-100%',
      '-1/2': '-50%',
      '1/2': '50%',
      full: '100%',
    }),

    // .skew-x-{amount}
    // .skew-y-{amount}
    skew: {
      '-12': '-12deg',
      '-6': '-6deg',
      '-3': '-3deg',
      '0': '0',
      '3': '3deg',
      '6': '6deg',
      '12': '12deg',
    },
  }
}

One notable difference in how this works vs. other utilities in Tailwind is that the transform utility acts sort of like a "toggle" — you need to add that class to "enable" transforms on an element but on its own it doesn't actually apply any transforms.

You apply the actual transforms by stacking additional utilities for the types of transforms you'd like to apply, like scale-150 to scale an element to 150% of its size, or rotate-45 to rotate it 45 degrees.

To make it possible to compose multiple transforms like this, we've implemented this feature using CSS custom properties, which means transforms in Tailwind are not supported in IE11. If you need to support IE11 and would like to use transforms in your project, you'll need to write custom CSS as you would have in earlier versions of Tailwind.

For more information, check out the documentation.

CSS Grid utilities (#1274)

Tailwind now includes utilities for CSS Grid Layout.

<div class="grid grid-cols-2 lg:grid-cols-8 gap-6">
  <div class="col-span-1 lg:col-span-3"></div>
  <div class="col-span-1 lg:col-span-3"></div>
  <div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div>
  <div class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div>
  <div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div>
</div>

Expand to see the default values for these utilities

// tailwind.config.js
module.exports = {
  theme: {

    // .gap-{spacing}, .row-gap-{spacing}, .col-gap-{spacing}
    gap: theme => theme('spacing'),

    // .grid-cols-{cols}
    gridTemplateColumns: {
      none: 'none',
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
      '7': 'repeat(7, minmax(0, 1fr))',
      '8': 'repeat(8, minmax(0, 1fr))',
      '9': 'repeat(9, minmax(0, 1fr))',
      '10': 'repeat(10, minmax(0, 1fr))',
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },

    // .col-{value}
    gridColumn: {
      auto: 'auto',
      'span-1': 'span 1 / span 1',
      'span-2': 'span 2 / span 2',
      'span-3': 'span 3 / span 3',
      'span-4': 'span 4 / span 4',
      'span-5': 'span 5 / span 5',
      'span-6': 'span 6 / span 6',
      'span-7': 'span 7 / span 7',
      'span-8': 'span 8 / span 8',
      'span-9': 'span 9 / span 9',
      'span-10': 'span 10 / span 10',
      'span-11': 'span 11 / span 11',
      'span-12': 'span 12 / span 12',
    },

    // .col-start-{value}
    gridColumnStart: {
      auto: 'auto',
      '1': '1',
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
      '8': '8',
      '9': '9',
      '10': '10',
      '11': '11',
      '12': '12',
      '13': '13',
    },

    // .col-end-{value}
    gridColumnEnd: {
      auto: 'auto',
      '1': '1',
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
      '8': '8',
      '9': '9',
      '10': '10',
      '11': '11',
      '12': '12',
      '13': '13',
    },

    // .grid-rows-{rows}
    gridTemplateRows: {
      none: 'none',
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
    },

    // .row-{value}
    gridRow: {
      auto: 'auto',
      'span-1': 'span 1 / span 1',
      'span-2': 'span 2 / span 2',
      'span-3': 'span 3 / span 3',
      'span-4': 'span 4 / span 4',
      'span-5': 'span 5 / span 5',
      'span-6': 'span 6 / span 6',
    },

    // .row-start-{value}
    gridRowStart: {
      auto: 'auto',
      '1': '1',
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
    },

    // .row-end-{value}
    gridRowEnd: {
      auto: 'auto',
      '1': '1',
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
    },
  }
}

By default we ship the necessary utilities to construct grids with 1–12 explicit columns and 1-6 explicit rows and place elements anywhere in that grid.

Note that the approach we've taken to supporting CSS Grid **is not compatible with I...

v1.2.0-canary.8

• Add additional fixed-size line-height utilities (#1362)

v1.2.0-canary.7

• Remove Inter from font-sans, plan to add later under new class

v1.2.0-canary.6

• Add system-ui to default font stack (#1326)
• Add shadow-xs, increase shadow-sm alpha to 0.05 (#1333)
• Support import syntax even without postcss-import (#1336)
• Alias tailwind bin to tailwindcss (e988185)
• Add fill/stroke to transition-colors (#1351)
• Add transition-shadow, add box-shadow to default transition (#1352)
• Combine gap/columnGap/rowGap (#1353)
• Add grid row utilities (#1355)
• Add skew utilities (#1356)
• Use font-sans as default font (#1357)

v1.2.0-canary.5

• Adds missing dependency resolve which is required for making config dependencies watchable