はてなブックマーク

About eight months ago we open-sourced our progress on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I'm excited to finally tag the first public beta release. As I talked about when we published the first alpha, Tailwind CSS v4.0 is an all-new engine built for performance, and designed for the modern w

Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we've been working on, designed to simplify the developer experience and take advantage of how the web platform has evolved in recent years. The new engine was originally going to ship as a v3.x release, but even though we're committed to backwards compatibility, this feels so clearly

Today’s the day — we just published the first development preview of Catalyst, our first fully-componentized, batteries-included application UI kit for React, just in time for your holiday hacking sessions. Today’s the day — we just published the first development preview of Catalyst, just in time for your holiday hacking sessions. Catalyst is our first fully-componentized, batteries-included appl

There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwind CSS v3.4. There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwin

Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted. Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted. Extended color palette for darker darks: New darker 950 shades for every color. ESM and

Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries, oh my! Tailwind CSS v3.2 is here with an absolutely massive amount of new stuff, including support for dynamic breakpoints, multiple config files in a single project, nested groups, parameterized variants, container queries, and more. As always check out the release notes for every nitty-gritty fix and improvement, but he

Syntax is a beautiful documentation template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team. Powered by Markdoc, the new Markdown-based authoring framework from Stripe, it's now easier than ever to focus on writing great documentation, instead of the tooling around it. It’s production-ready and easy to customize, making it the perfect starting point for your own d

Tailwind CSS is written in JavaScript and distributed as an npm package, which means you’ve always had to have Node.js and npm installed to use it. Today we’re announcing a new standalone CLI build that gives you the full power of Tailwind CLI in a self-contained executable — no Node.js or npm required. Tailwind CSS is written in JavaScript and distributed as an npm package, which means you’ve alw

Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. 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

​Basic usage ​Statically positioning elements Use the static utility to position an element according to the normal flow of the document. Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children. <div class="static ..."> <p>Static parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div> </div> ​Relatively position

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. ​Tabs Earlier this year we started working on Tailwind UI Ecommerce, and we realized pretty quickly we were going to need to support tabs in Headless UI to be able to build the new interfaces we were designing. Here’s what we ended up with: R

Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2! We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styl

CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum

Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. ​What’s new We’ve added four new components to the React library, and five new components for Vue. ​Dialog (modal)

Last year we released Tailwind UI — a huge directory of professionally designed UI examples built with Tailwind CSS. Up until now, all of the examples in Tailwind UI have been pure HTML which is sort of the lowest common denominator for all web developers, and makes it possible to adapt them to any templating language or JavaScript framework. Today we’re excited to add first class support for Reac

Hey! We're getting really close to releasing React + Vue support for Tailwind UI, so I thought it would be interesting to share some of the behind-the-scenes efforts that have gone into even making it possible. Grab some popcorn... The Backstory From the day we started working on Tailwind UI somewhere in mid-2019 I knew that ultimately it would be 10x more valuable to people if they could grab ful

This feature is currently in preview. Preview features are not covered by semantic versioning and some details may change as we continue to refine them. Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time. This comes with a lot of advantages: Lig

This feature is still in preview which means some details may change as we iron out the kinks, and it's not subject to semantic versioning. If you were using @tailwindcss/jit before, you can now migrate to Tailwind CSS v2.1 instead, as that's where all new development on the engine will happen. Read the Just-in-Time Mode documentation to learn more. Composable CSS filters API This is a huge one —

Today we're releasing Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets.

Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is included right in Tailwind CSS itself, so you don't need the @tailwindcss/jit package anymore. Learn more in the documentation. One of the hardest constraints we've had to deal with as we've improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS

CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum

CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum

Installation Get started with Tailwind CSSTailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.

Almost exactly 18 months ago we released Tailwind CSS v1.0, which signalled a commitment to stability while continuing to push the boundaries with exciting new features in every minor release. Over the course of those 18 months we released nine minor versions that added features like placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, inte