Published on 10/03/2021 11:23 by Elian Van Cutsem
What’s new in TailwindCSS v3
TailwindCSSv3.0.0-alpha-1 was released yesterday! It’s not a full release of v3 yet, but might already give us an insight on what is to come with TailwindCSS v3.
I went through the release notes and summed up some things that I found importand below.
New
In TailwindCSS v3, JIT will be the default compiler mode. If you want to learn more about the Just-In-Time compiler, check this blogpost.
All colors are enabled by default. Before you had to import them via the tailwind.config.js.
new utilities:
aspect-ratioscroll-snapscroll-behaviortext-indentcolumntouch-actionwill-changeborder-x&border-y
new variants:
file:-> for the native file upload button stylingopen:-> for styling native<details>&<dialog>elements
Using JIT in CDN mode
Before, when using the TailwindCSS CDN, you had to give up on a lot of configuration functionality. Well, that isn’t the case anymore since TailwindCSS v3. But TailwindLabs noted: TailwindCSS CDN JIT is intended for development only, do not use in production!. So there is probably still something in the works there.
Using the TailwindCSS CDN JIT isn’t that hard:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- add base TailwindCSS -->
+
<script src="https://cdn-tailwindcss.vercel.app/"></script>
<!-- add Plugins -->
<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<!-- customize config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
tomato: "tomato",
},
},
},
};
</script>
<!-- add custom styling -->
<style type="text/tailwindcss">
body {
@apply bg-pink-500;
}
</style>
</head>
<body>
<!-- -->
</body>
</html>Breaking
- PostCSS 7 won’t be supported any longer
purgeoption intailwind.config.jshas changed tocontentoverflow-cliputility was changed totext-clip
Notes
If you decide on trying TailwindCSS v3 early, be sure to update the @tailwindcss dependencies to like @tailwindcss/typography and @tailwindcss/forms
You can install or upgrade both tailwindcss and its dependencies by adding @next as a release:
npm i -D tailwindcss@next
npm i -D @tailwindcss/typography@nextAll official releasenotes can be found on the TailwindCSS GitHub repo. Check out the official TailwindCSS Documentation
Written by Elian Van Cutsem
← Back to blog
