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.

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 with Tailwind:

<!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>
    <style type="text/tailwindcss">
      body {
        @apply bg-pink-500;
      }
    </style>
  </head>
  <body>
    <!-- -->
  </body>
</html>

So there you have it! Again, this is an alpha release so there are probably going to be some issues, but play with it and report any problems you find so we can get it all cleaned up for a proper release in a month or two.

Thanks to community members @bytedance, @htunnicliff, @DoctorDerek, @lukewarlow, @codytooker, @nifte, @ericbf, @kwaa, @MatteoGauthier, @geshii, @sachinraja, @TCatinaud, @iksaku, @seanpdoyle, @95jonpet, @innocenzi, @DavydeVries, and @hardfist for your contributions to this release — lots of good ideas and improvements made it in thanks to you ❤️