Skip to content

/ tailwindcss

Apr 5, 2021

v2.1.1 

2.1.1
Latest release
v2.1.0
Latest release

@adamwathan adamwathan released this Apr 5, 2021

Tailwind CSS v2.1.0

The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff!

New features

JIT engine in core (#3905)

The brand-new JIT engine we announced in March has now been merged into core, and is available as an opt-in feature using a new mode option in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    // ...
  ],
  // ...
}

This feature is still in preview which means some details may change as we iron out the kinks, and it's not subject to semantic versioning.

If you were using @tailwindcss/jit before, you can now migrate to Tailwind CSS v2.1 instead, as that's where all new development on the engine will happen.

New filter and backdrop-filter utilities (#3923)

This is a huge one — we've finally added first-class support for CSS filters!

They work a lot like our transform utilities, where you use filter to enable filters, and combine it with utilities like grayscale, blur-lg, or saturate-200 to compose filters on the fly.

Here's what filter looks like:

<div class="filter blur-md grayscale invert ...">
  <!-- ... -->
</div>

...and here's what backdrop-filter looks like:

<div class="backdrop-filter backdrop-blur backdrop-brightness-50 ...">
  <!-- ... -->
</div>

Check out the filter and backdrop-filter to learn more. We'll add a bunch of helpful visual examples there soon!

New blending mode utilities (#3920)

We've added brand new utilities for mix-blend-mode and background-blend-mode:

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

Check out the documentation to learn more.

New isolation utilities (#3914)

We've added new isolate and isolation-auto utilities for working with the isolation property:

<div class="isolate ...">
  <!-- ... -->
</div>

This can be really helpful for scoping blending mode features or z-index adjustments and is super powerful. Check out the documentation to learn more.

I also highly recommend this great article by Josh Comeau to see it in action.

New box-decoration-break utilities (#3911)

We've added brand new utilities for the box-decoration-break property:

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

It's a bit of an obscure one but it can be really useful alongside text gradients. Learn more in our documentation and in the MDN article.

New inline-table and list-item display utilities (#3563, #3929)

We've added a couple display utilities we were missing:

<div class="inline-table ...">
  <!-- ... -->
</div>

<div class="list-item ...">
  <!-- ... -->
</div>

Maybe not quite as exciting as the rest but a welcome addition nonetheless.

Assets 2
v2.0.4

@adamwathan adamwathan released this Mar 17, 2021

Fixed

  • Pass full var(--bg-opacity) value as opacityValue when defining colors as functions (d98f2f8)
Assets 2
v2.0.3

@adamwathan adamwathan released this Feb 7, 2021

Fixed

  • Ensure sourcemap input is deterministic when using @apply in Vue components (#3356)
  • Ensure placeholder opacity is consistent across browsers (#3308)
  • Fix issue where theme() didn't work with colors defined as functions (#2919)
  • Enable dark variants by default for color opacity utilities (#2975)

Added

  • Add support for a tailwind.config.cjs file in Node ESM projects (#3181)
  • Add version comment to Preflight (#3255)
  • Add cursor-help by default (#3199)
Assets 2
v2.0.2

@adamwathan adamwathan released this Feb 7, 2021

Fixed

  • Fix issue with @apply not working as expected with !important inside an atrule (#2824)
  • Fix issue with @apply not working as expected with defined classes (#2832)
  • Fix memory leak, and broken @apply when splitting up files (#3032)

Added

  • Add default values for the ring utility (#2951)
Assets 2
v2.0.1

@adamwathan adamwathan released this Nov 18, 2020

  • Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags.
Assets 2
Nov 18, 2020

v2.0.1-compat 

2.0.1-compat
v2.0.0

@adamwathan adamwathan released this Nov 18, 2020

Tailwind CSS v2.0, woohoo!

Read the blog post for more details.

Added

  • Add redesigned color palette (#2623, 700866c, #2633)
  • Add dark mode support (#2279, #2631)
  • Add overflow-ellipsis and overflow-clip utilities (#1289)
  • Add transform-gpu to force hardware acceleration on transforms when desired (#1380)
  • Extend default spacing scale (#2630, 7f05204)
  • Add spacing scale to inset plugin (#2630)
  • Add percentage sizes to translate, inset, and height plugins (#2630, 5259560)
  • Extend default font size scale (#2609, #2619)
  • Support using @apply with complex classes, including variants like lg:hover:bg-blue-500 (#2159)
  • Add new 2xl breakpoint at 1536px by default (#2609)
  • Add default line-height values for font-size utilities (#2609)
  • Support defining theme values using arrays for CSS properties that support comma separated values (e13f083c4)
  • Enable group-hover for color plugins, boxShadow, and textDecoration by default (28985b6, f6923b1)
  • Enable focus for z-index utilities by default (ae5b3d3)
  • Support extend in variants configuration (#2651)
  • Add max-w-prose class by default (#2574)
  • Support flattening deeply nested color objects (#2148)
  • Support defining presets as functions (#2680)
  • Support deep merging of objects under extend (#2679, #2700)
  • Enable focus-within for all plugins that have focus enabled by default (1a21f072, f6923b1)
  • Added new ring utilities for creating outline/focus rings using box shadows (#2747, 879f088, e0788ef)
  • Added 5 and 95 to opacity scale (#2747)
  • Add support for default duration and timing function values whenever enabling transitions (#2755)

Changed

  • Completely redesign color palette (#2623, 700866c, #2633)
  • Drop support for Node 8 and 10 (#2582)
  • Removed target feature and dropped any compatibility with IE 11 (#2571)
  • Upgrade to PostCSS 8 (but include PostCSS 7 compatibility build) (729b400, 1d8679d, c238ed1)
  • Removed shadow-outline, shadow-solid, and shadow-xs by default in favor of new ring API (#2747)
  • Switch normalize.css to modern-normalize (#2572)
  • Rename whitespace-no-wrap to whitespace-nowrap (#2664)
  • Rename flex-no-wrap to flex-nowrap (#2676)
  • Remove clearfix utility, recommend flow-root instead (#2766)
  • Disable hover and focus for fontWeight utilities by default (f6923b1)
  • Remove grid-gap fallbacks needed for old versions of Safari (5ec45fa)
  • Change special use of 'default' in config to 'DEFAULT' (#2580)
  • New @apply implementation, slight backwards incompatibilities with previous behavior (#2159)
  • Make theme retrieve the expected resolved value when theme value is complex (e13f083c4)
  • Move truncate class to textOverflow core plugin (#2562)
  • Remove scrolling-touch and scrolling-auto utilities (#2573)
  • Modernize default system font stacks (#1711)
  • Upgrade to PurgeCSS 3.0 (8e4e0a0)
  • Change default text-6xl font-size to 3.75rem instead of 4rem (#2619)
  • Ignore [hidden] elements within space and divide utilities instead of template elements (#2642)
  • Automatically prefix keyframes and animation names when a prefix is configured (#2621, #2641)
  • Merge extend objects deeply by default (#2679)
  • Respect preserveHtmlElements option even when using custom PurgeCSS extractor (#2704)
  • Namespace all internal custom properties under tw- to avoid collisions with end-user custom properties (#2771)
Assets 2
Nov 18, 2020

v2.0.0-compat 

2.0.0-compat
Pre-release
v2.0.0-alpha.25
Pre-release

@adamwathan adamwathan released this Nov 17, 2020

Fixed

  • Fix issue where ring-offset-0 didn't work due to unitless 0 in calc function (3de0c48)
Assets 2