Skip to content

Releases: tailwindlabs/tailwindcss

v1.2.0-canary.6

03 Feb 18:01
Compare
Choose a tag to compare
v1.2.0-canary.6 Pre-release
Pre-release
  • 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

08 Jan 20:29
Compare
Choose a tag to compare
v1.2.0-canary.5 Pre-release
Pre-release
  • Adds missing dependency resolve which is required for making config dependencies watchable

v1.2.0-canary.4

08 Jan 18:39
Compare
Choose a tag to compare
v1.2.0-canary.4 Pre-release
Pre-release

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 (#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...

Read more

v1.2.0-canary.2

08 Jan 15:41
Compare
Choose a tag to compare
v1.2.0-canary.2 Pre-release
Pre-release
  • Add new plugin and plugin.withOptions APIs for plugin developers (#1268)

v1.1.4

25 Nov 16:49
Compare
Choose a tag to compare
  • 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

22 Oct 14:04
Compare
Choose a tag to compare
v1.2.0-canary.1 Pre-release
Pre-release
  • Don't watch node_modules files for changes, fixed significant build performance regression in v1.2.0-canary.0 (#1179)

v1.1.3

22 Oct 17:05
Compare
Choose a tag to compare
  • 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

14 Oct 16:14
Compare
Choose a tag to compare
v1.2.0-canary.0 Pre-release
Pre-release
  • 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

14 Aug 12:03
Compare
Choose a tag to compare
  • 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

09 Aug 20:13
Compare
Choose a tag to compare
  • Fixes issue where values like auto would fail to make it through the default negative margin config (#1070)