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

v1.2.0-canary.4

Please note: This is a pre-release, which means (although I'm not planning on it) these new features could change before the stable version of 1.2.0 is released.

Tailwind CSS v1.2.0-canary.4

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

Installation

While v1.2.0 is in pre-release, install it using:

# Using npm
npm install tailwindcss@canary

# Using yarn
yarn add tailwindcss@canary

New Features

• CSS Transition support
• CSS Transform support
• CSS Grid support
• New max-w-{screen} utilities
• Added max-w-none utility
• Added "Inter" to the default sans-serif font stack
• Add rounded-md utility
• Add shadow-sm utility
• Added stroke-width 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
• Add 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, opacity, transform',
      colors: 'background-color, border-color, color',
      opacity: 'opacity',
      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 pull request.

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-{distance}
    // .translate-x-{distance}
    // .translate-y-{distance}
    // .-translate-{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: {},
  }
}

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.

Note that while we have provided sensible defaults for scale, rotate, and translate, we do not include any default values for skew. If you'd like to add skew utilities to your project, add the values you need under the skew key in your theme.

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 pull request.

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}
    gap: theme => theme('spacing'),

    // .row-gap-{spacing}
    rowGap: {},

    // .col-gap-{spacing}
    columnGap: {},

    // .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: {},

    // .row-{value}
    gridRow: {},

    // .row-start-{value}
    gridRowStart: {},

    // .row-end-{value}
    gridRowEnd: {},
  }
}

By default we ship the necessary utilities to construct grids with 1–12 columns and place elements anywhere in that grid, but we don't include any default utilities for controlling rows or row placement. Those utilities are supported out of the box though, you just need to add the values you need to your config file.

Note that the approach we've taken to supporting CSS Grid is not compatible with IE11. For building grid layouts in older browsers, we recommend using Flexbox instead of CSS Grid.

For more information, check out the pull request.

New max-w-{screen} utilities (#1284)

Tailwind's default max-width scale now includes values to match your b...

v1.2.0-canary.2

• Add new plugin and plugin.withOptions APIs for plugin developers (#1268)

v1.1.4

• Fixes a bug where the .group class was not receiving the user's configured prefix when using the prefix option (#1216).

  Note: Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the .group class. I'm sorry 😞

v1.2.0-canary.1

• Don't watch node_modules files for changes, fixed significant build performance regression in v1.2.0-canary.0 (#1179)

v1.1.3

• Fixes an issue where in some cases function properties in the user's theme config didn't receive the second utils argument (#1180)

v1.2.0-canary.0

• Automatically watch all config file dependencies (plugins, design tokens imported from other files, etc.) for changes when build watcher is running (#1072)
• Add justify-evenly utility (#1083)
• Allow plugins to add their own config file to be resolved with the user's custom config (#1162)

v1.1.2

• Fixes a bug with horizontal rules where they were displayed with a 2px border instead of a 1px border (#1079)
• Fixes a bug with horizontal rules where they were rendered with default top/bottom margin (#1079)

v1.1.1

• Fixes issue where values like auto would fail to make it through the default negative margin config (#1070)