v3.0.3

Added

• Warn about invalid globs in content (#6449)
• Add standalone tailwindcss CLI (#6506)
• Add li to list-style reset (00f60e6)

Fixed

• Don't output unparsable values (#6469)
• Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier (#6378)
• Move defaults to their own always-on layer (#6500)
• Support negative values in safelist patterns (6480)

---

• Linux (x64)
• macOS (arm64)
• macOS (x64)
• Windows (x64)

v3.0.2

Fixed

• Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being @apply-able in CSS modules/Svelte components/Vue components (#6461)

v3.0.1

Fixed

• Ensure complex variants with multiple classes work (#6311)
• Re-add default interop to public available functions (#6348)
• Detect circular dependencies when using @apply (#6365)
• Fix defaults optimization when vendor prefixes are involved (#6369)

v3.0.0

Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.

Read the announcement post for all the details.

Added

• Add colored box shadow utilities (#5979)
• Add native aspect-ratio utilities (#5359)
• Add column utilities (#5457)
• Add break-before, break-inside and break-after utilities (#5530)
• Add text-indent utilities (#5449)
• Add text-decoration-{color/style/thickness/offset} utilities (#5760, #6004)
• Add outline-style, outline-color, outline-width and outline-offset utilities (#5887)
• Add align-sub and align-super vertical-align utilities (#5486)
• Add accent-color utilities (#5387)
• Add scroll-snap utilities (#5637)
• Add scroll-behavior utilities (#5388)
• Add touch-action utilities (#5603, #6115)
• Add flex-basis utilities (#5671)
• Add grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-* (#5733)
• Add border-x and border-y width and color utilities (#5639)
• Add border-hidden utility (#5485)
• Add overflow-clip, overflow-x-clip and overflow-y-clip utilities (#5630)
• Add inherit to default color palette (#5597)
• Add full color palette for fill-* and stroke-* utilities (#5933)
• Add fit-content values for min/max-width/height utilities (#5638)
• Add min/max-content values for min/max-height utilities (#5729)
• Add will-change utilities (#5448)
• Add all standard cursor-* values by default (#5734)
• Add print variant for targeting printed media (#5885)
• Add placeholder variant (#6106)
• Add file variant for ::file-selector-button pseudo element (#4936)
• Add [open] variant (#5627)
• Add portrait and landscape variants (#6046)
• Add menu reset to preflight (#6213)
• Add comprehensive "arbitrary value" support (#5568, #6233, #6259, #6258, #6283)
• Add "arbitrary properties" support (#6161)
• Add first-class negative value support (#5709, c48e629)
• Add new declarative addVariant API (#5809)

Changed

• Remove AOT engine, make JIT the default (#5340)
• Enable extended color palette by default with updated color names (#5384)
• Rename overflow-clip to text-clip and overflow-ellipsis to text-ellipsis (#5630)
• Deprecate decoration-slice and decoration-break in favor box-decoration-slice and box-decoration-break (#6004)
• Move vertical-align values to config file instead of hard-coding (#5487)
• Throw when trying to @apply the group class (#4666)
• Remove dependency on modern-normalize, inline and consolidate with Preflight (#5358)
• Remove prefix as a function (#5829)
• Don't use pointer cursor on disabled buttons by default (#5772)
• Set default content value in preflight instead of within each before/after utility (#5820)
• Preserve original color format when adding opacity whenever possible (#5154)
• Unify config callback helpers into single object (#5382)

---

Thanks to everyone who contributed to this release: @95jonpet, @AviAvinav, @DavydeVries, @DoctorDerek, @MatteoGauthier, @MichaelAllenWarner, @RobinMalfait, @TCatinaud, @adamwathan, @bradlc, @bytedance, @codytooker, @dance2die, @dcastil, @ericbf, @geshii, @hardfist, @htunnicliff, @iksaku, @innocenzi, @kwaa, @lukewarlow, @nifte, @reinink, @sachinraja, @seanpdoyle, @xiBread, @xzfd1010

v3.0.0-alpha.2

To upgrade, install tailwindcss@next:

npm install -D tailwindcss@next

If you're using @tailwindcss/typography or @tailwindcss/forms, you'll want to update those packages as well:

npm install -D @tailwindcss/typography@next
npm install -D @tailwindcss/forms@next

Remember this is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release in a few weeks.

---

Changed

• Don't use pointer cursor on disabled buttons by default (#5772)
• Set default content value in preflight instead of within each before/after utility (#5820)
• Remove prefix as a function (#5829)

Added

• Add flex-basis utilities (#5671)
• Make negative values a first-class feature (#5709)
• Add fit-content values for min/max-width/height utilities (#5638)
• Add min/max-content values for min/max-height utilities (#5729)
• Add all standard cursor-* values by default (#5734)
• Add grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-* (#5733)
• Add text-decoration-color utilities (#5760)
• Add new declarative addVariant API (#5809)
• Add first-class print variant for targeting printed media (#5885)
• Add full color palette for fill-* and stroke-* utilities (#5933)
• Add composable API for colored box shadows (#5979)

Fixed

• Configure chokidar's awaitWriteFinish setting to avoid occasional stale builds on Windows (#5774)
• Fix CLI --content option (#5775)
• Fix before/after utilities overriding custom content values at larger breakpoints (#5820)
• Cleanup duplicate properties (#5830)
• Allow _ inside url() when using arbitrary values (#5853)
• Prevent crashes when using comments in @layer AtRules (#5854)
• Handle color transformations properly with theme(...) for all relevant plugins (#4533, #5871)
• Ensure @apply-ing a utility with multiple definitions works (#5870)

---

Thanks to everyone who contributed to this release: @adamwathan, @bradlc, @dance2die, @dcastil, @DoctorDerek, @hardfist, @lukewarlow, @MatteoGauthier, @MichaelAllenWarner, @nifte, @reinink, @RobinMalfait, @sachinraja, @xzfd1010 ❤️

v2.2.19

Fixed

• Ensure corePlugins order is consistent in AOT mode (#5928)

v2.2.18

Fixed

• Bump versions for security vulnerabilities (#5924)

v2.2.17

Fixed

• Configure chokidar's awaitWriteFinish setting to avoid occasional stale builds on Windows (#5758)

v3.0.0-alpha.1

Tailwind CSS v3.0.0-alpha.1

The first alpha release of Tailwind CSS v3.0 is here! If you don't even care what's changed and just want to start using it right now, install it via npm:

npm install -D tailwindcss@next

If you're using @tailwindcss/typography or @tailwindcss/forms, you'll want to update those packages as well:

npm install -D @tailwindcss/typography@next
npm install -D @tailwindcss/forms@next

We've also got a brand new CDN build you can play with if you want, too.

Remember this is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release later this year.

What's new

• Just-in-Time, all the time — the new Just-in-Time engine has replaced the classic engine, offering big performance benefits and all-new features like stackable variants, arbitrary value support, and more (#5340)
• Just-in-Time CDN build, for prototyping with the full power of Tailwind CSS without a build step
• Every color by default, including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray (#5384)
• New aspect-ratio utilities, using the new native aspect-ratio property (#5359)
• New accent-color utilities, for setting the color of a form input's accent (#5387)
• New scroll-snap utilities, for CSS-only scroll snapping (#5637)
• New scroll-behavior utilities, for browser-native smooth scrolling (#5388)
• New text-indent utilities, for indenting the first line in a paragraph (#5449)
• New column and break-before/inside/after utilities, for wrapping multi-column content (#5457, #5530)
• New touch-action utilities, for controlling touchscreen interactions (#5603)
• New will-change utilities, for optimizing transition performance (#5448)
• New border-x and border-y utilities, for styling left/right and top/bottom borders a the same time (#5639)
• New file: variant, for styling the native file upload button (#4936)
• New open: variant, for styling open <details> and <dialog> elements (#5627)

What's changed

We've tried really hard to keep the breaking changes to a minimum, and this should be a really smooth upgrade — especially if you were already using the JIT engine.

Start by reading the Just-in-Time mode changes in the documentation, and then come back here for a couple more steps.

purge has changed to content

The JIT engine doesn't actually use PurgeCSS under-the-hood, so purge doesn't feel like the right name for these configuration options anymore.

Now this configuration should look like this:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}

For more complex configurations, it should look something like this:

// tailwind.config.js
module.exports = {
  content: {
    files: ['./src/**/*.html' /* ... */],
    transform: {
      md: (content) => {
        return remark().process(content)
      },
    },
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      },
    },
  },
  safelist: [
    'font-bold',
    'text-center',
    { pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
  ],
  // ...
}

We've tried really hard to make Tailwind smart enough to understand the old configuration as well, so with any luck your existing configuration should still work, but you'll want to update to the new format to silence the annoying console warnings we blast you with.

Color name changes

As part of enabling the extended color palette by default, a few color names needed to change due to collisions.

See the pull request for all of the details you need to upgrade. It should only be a couple of lines of code in your tailwind.config.js file.

overflow-clip has changed to text-clip

Those damn browser developers added a real overflow: clip property, so using overflow-clip for text-overflow: clip is a really bad idea now.

We've renamed it to text-clip, and now overflow-clip adds overflow: clip like you'd expect. We've also renamed overflow-ellipsis to text-ellipsis, but overflow-ellipsis still secretly works.

- <div class="overflow-clip">
+ <div class="text-clip">

PostCSS 7 is no longer supported

If you were using the @tailwindcss/postcss7-compat package because you are stuck on PostCSS 7, you'll need to upgrade to PostCSS 8 before you can upgrade to Tailwind CSS v3.0.0-alpha.1.

I think this is mostly create-react-app users, and thankfully they are close to releasing a new version that uses webpack 5 and supports PostCSS 8 by default.

Just-in-Time CDN

Something that has always sucked about our CDN builds is that we always had to disable tons of awesome features to keep the file size down to something the browser was willing to parse.

For Tailwind CSS v3.0, we're doing it differently. Inspired by some awesome work Marcel Pociot did on tailwindcss-jit-cdn, we've built a JS library that compiles Tailwind in the browser, and uses MutationObserver to keep track of all of the classes you're using.

It lets you use every feature Tailwind CSS has to offer, and does it in 93kB — which ain't bad for something originally designed to run in node with no file size considerations at all.

The Just-in-Time CDN is intended for development purposes only, and should not be used in production.

Why shouldn't it be used in production?

The biggest reason is because it uses MutationObserver to add the styles, it can't detect styles for dynamically created elements fast enough to avoid a flash of unstyled content (FOUC).

For example, say you have some JavaScript that opens a modal, and the modal is supposed to transition in when it opens. When the modal opens, the HTML for it is inserted into the DOM right away, but the styles might not exist for it yet because you haven't used those same classes elsewhere in the file. The observer will fire, and Tailwind will generate the styles, but the modal is already open, so you're going to see an unstyled flash the first time it opens.

We recommend pulling in the JIT CDN as a blocking (so not deferred) script to avoid the FOUC for the very initial render, but that of course means it adds 100ms (or whatever) before the page is even rendered. Not a big deal really but using a static CSS file is way faster.

It's also quite large (almost 100kB compressed) whereas compiling your CSS ahead of time usually leads to something closer to 10kb compressed, and with no run time overhead.

TLDR; It's probably fine for simple static pages but it's really much better to build the static CSS file.

To try it out, throw this <script> tag in your <head>:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Example</title>
+     <script src="https://cdn-tailwindcss.vercel.app/"></script>
    </head>
    <body>
      <!-- -->
    </body>
  </html>

We'll give it a more permanent URL in the future but this is good enough for the alpha.

Using first-party plugins

First-party plugins can be automatically loaded using the plugins query parameter:

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>

The plugins parameter accepts a comma-separated list of plugins, and you can optionally specifiy a version number or range for each plugin, for example ?plugins=forms@0.3.4,typography@^0.5

Customizing your config

To customize your Tailwind CSS configuration, override tailwind.config:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              tomato: 'tomato',
            },
          },
        },
      }
    </script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

Adding custom CSS

Use <style type="text/tailwindcss"> elements to add any custom CSS that that you'd like to process ...

v2.2.16

Fixed

• JIT: Properly handle animations that use CSS custom properties (#5602)