A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1 below:

Release v3.0.0-alpha.1 · tailwindlabs/tailwindcss · GitHub

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 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 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 ❤️

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4