https://tailwindcss.com/blog/tailwindcss-v3 [docs] Tailwind CSS home page v3.0.0 Tailwind CSS v3.0Just-in-Time all the time, colored shadows, scroll snap and more * Docs * Components * Blog * Tailwind CSS on GitHub Search Navigation Tailwind CSS v3.0 Go back to blog Date Thursday, December 9, 2021 Author [adamwathan] Adam Wathan @adamwathan Tailwind CSS v3.0 is here -- bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. For a tour of some of the coolest new features, check out the "What's new in Tailwind CSS v3.0" video on our YouTube channel. Tailwind CSS v3.0 has got to be our most exciting release ever, including improvements like: * Just-in-Time, all the time -- lightning fast build times, stackable variants, arbitrary value support, better browser performance, and more. * Every color out of the box -- including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of [DEL:grey:DEL] gray. * Colored box shadows -- for fun glow and reflection effects, and more natural shadows on colored backgrounds. * Scroll snap API -- a comprehensive and composable set of utilities for CSS-only scroll snapping. * Multi-column layout -- so you can finally build that online newspaper you've been dreaming about. * Native form control styling -- make checkboxes, radio buttons, and file inputs match your brand without reinventing the wheel. * Print modifier -- control how your site looks when someone prints it, right from your HTML. * Modern aspect ratio API -- no more padding hacks, well unless you need to support Safari 14, which you probably do, but still. * Fancy underline styles -- the missing piece to making that side-project of yours finally take off. * RTL and LTR modifiers -- for complete control when building multi-directional websites. * Portrait and landscape modifiers -- honestly just because they were really easy to add. * Arbitrary properties -- now Tailwind supports CSS properties we've never even heard of. * Play CDN -- the new Just-in-Time engine squeezed into a CDN script that runs right in the browser. * Tons of other utilities -- including support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more. Plus a beautiful, brand-spanking new documentation website, loaded with improved content and examples on every page. To start playing with Tailwind CSS v3.0 today, grab the latest release from npm: npm install -D tailwindcss@latest postcss autoprefixer ...or head over to Tailwind Play to try out the latest features right in the browser. Tailwind CSS v3.0 is a new major version of the framework and there are some minor breaking changes, but we've worked really hard to make the upgrade process as smooth as possible, and for most projects you should be able to install v3.0 without making any changes. For example, Tailwind UI is probably the biggest Tailwind project on earth and every template is totally compatible with both v2 and v3 with no changes required. For more details and step-by-step instructions on migrating to v3.0, check out the upgrade guide. --------------------------------------------------------------------- Just-in-Time, all the time Back in March we introduced the brand new Just-in-Time engine which brought huge performance gains, unlocked exciting new features like arbitrary values, and made complex variant configurations a thing of the past. In Tailwind CSS v3.0, the new engine has gone stable and replaced the classic engine, so every Tailwind project can benefit from these improvements out of the box. --------------------------------------------------------------------- Every color out of the box Before the new engine, we always had to be careful with CSS file size in development, and one of the biggest trade-offs we had to make was carefully limiting the color palette. In v3.0, every single color in the extended color palette is enabled by default, including lime, cyan, sky, fuchsia, rose, and fifty shades of gray. Check out the color palette reference to learn more. --------------------------------------------------------------------- Colored box shadows People have been asking us for colored shadows for years, but supporting it in a composable way that actually made sense was way harder than I expected it to be. After about five false starts, we finally figured out an approach we liked, and now Tailwind CSS v3.0 includes colored shadows: shadow-cyan-500/50 Subscribe shadow-blue-500/50 Subscribe shadow-indigo-500/50 Subscribe Learn more in the Box Shadow Color documentation. --------------------------------------------------------------------- Scroll snap API We've added a comprehensive set of utilities for the CSS Scroll Snap module, giving you the power to build very rich scroll snapping experiences directly in your HTML: Scroll in the grid of images to see the expected behaviour snap point [photo-1604] [photo-1540] [photo-1622] [photo-1590] [photo-1575] [photo-1559]
Start with the new Scroll Margin utilities and work your way through the whole API to learn more. --------------------------------------------------------------------- Multi-column layout We've added support for columns -- the newspaper layout kind. These are actually super useful, and are great for things like footer navigation layouts too. Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum. Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda. Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus. Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis. Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur. Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit. Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est.

...

Learn more in the columns documentation -- and check out the new break-after/inside/before utilities as well. --------------------------------------------------------------------- Native form control styling We've added support for the new accent-color property, as well as a modifier for styling file input buttons to make it easier than ever to put your own touch on native form controls: Current profile photo Choose profile photo [ ] [ ] Yes, send me all your stupid updates
Current profile photo
Learn more in the accent color and file input buttons documentation. --------------------------------------------------------------------- Print modifier The new print modifier lets you style how your site should look when [DEL:animals:DEL] people print it:

My Secret Pizza Recipe

This recipe is a secret, and must not be shared with anyone

I'd say "learn more in the print styles documentation" but it wouldn't be true. --------------------------------------------------------------------- Modern aspect ratio API We've added support for the new native aspect-ratio property, which is starting to see solid browser support: Learn more in the aspect ratio documentation. --------------------------------------------------------------------- Fancy underline styles Now you can change underline colors, thickness, and more: I'm Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

I'm Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

Learn more in the text decoration color, text decoration style, text decoration thickness, and text underline offset documentation. --------------------------------------------------------------------- RTL and LTR modifiers We've added experimental support for multi-directional layouts with new rtl and ltr modifiers: Left-to-right [photo-1472] Tom Cook Director of Operations Right-to-left [photo-1563] tmr krm lry'ys ltnfydhy

...

...

Learn more in the RTL support documentation. --------------------------------------------------------------------- Portrait and landscape modifiers Use the new portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation:

This experience is designed to be viewed in landscape. Please rotate your device to view the site.

The documentation for this feature has even less content than this section of this post does. --------------------------------------------------------------------- Arbitrary properties This might be illegal but we've made it possible to add totally arbitrary CSS that you can combine with modifiers like hover, lg, and whatever else:
This is what inline styles want to be when they grow up. Learn more in the arbitrary properties documentation. --------------------------------------------------------------------- Play CDN There's no way to make a sensible CSS-based CDN build for Tailwind CSS v3.0 so we had to do something different -- we built a JavaScript library. Example Add that script tag to any HTML document and you can use every Tailwind feature, right in the browser. It's meant for development purposes only, but it sure is a fun way to build little demos or hack on a new idea. Learn more in the Play CDN documentation. --------------------------------------------------------------------- So there it is -- Tailwind CSS v3.0! Head over to the new documentation site to get started with it today. For a comprehensive list of every single change, check out the changelog on GitHub. Latest articles Introducing Tailwind UI Ecommerce Almost 6 months in the making, we finally released Tailwind UI Ecommerce -- the first all-new component kit for Tailwind UI since the initial launch back in February 2020. Date August 11, 2021 Read more, Introducing Tailwind UI Ecommerce Headless UI v1.4: The One With Tabs We just released Headless UI v1.4, which includes a brand new `Tab` component, and new APIs for manually closing `Popover` and `Disclosure` components more easily. Date July 29, 2021 Read more, Headless UI v1.4: The One With Tabs