		<div class="wpcnt">
			<div class="wpa">
				<span class="wpa-about">Advertisements</span>
				<div class="u top_amp">
							<amp-ad width="300" height="265"
		 type="pubmine"
		 data-siteid="173035871"
		 data-section="1">
		</amp-ad>
				</div>
			</div>
		</div><p dir="ltr">Tailwind CSS v4 changed how the framework is configured and built, and the line has kept growing since its release on January 22, 2025. The headline changes are CSS-first configuration with an @theme block, a much faster build engine, and a one-line import in place of the old directives. The current version is in the 4.3 series, and in September 2026 Tailwind Labs announced it was joining Shopify. This guide covers what v4 introduced, what arrived in 4.1 through 4.3, and how to migrate a v3 project with the official upgrade tool.</p>
<h2 dir="ltr">What Tailwind v4.0 Changed</h2>
<h3 dir="ltr"><strong>Speed</strong></h3>
<p dir="ltr">The Tailwind blog&#8217;s v4.0 announcement reports its own benchmarks, measured as medians against its Catalyst project. A full build dropped from 378 milliseconds to 100 milliseconds (3.78 times faster). An incremental build that added new CSS dropped from 44 milliseconds to 5 milliseconds (8.8 times). An incremental build with no new CSS dropped from 35 milliseconds to 192 microseconds, which is 182 times faster. These are the framework&#8217;s own numbers on one project, so your results will vary.</p>
<h3 dir="ltr"><strong>CSS-First Configuration</strong></h3>
<p dir="ltr">Instead of a JavaScript config file, v4 lets you define your design tokens in CSS using an @theme block, for example setting a breakpoint variable named 3xl to 1920px. You load Tailwind with a single import line, @import &#8220;tailwindcss&#8221;, which replaces the old @tailwind base, components, and utilities directives.</p>
<h3 dir="ltr"><strong>Other v4.0 Features</strong></h3>
<p dir="ltr">The announcement describes automatic content detection that respects .gitignore, built-in handling of @import, Lightning CSS for prefixing and syntax transforms, a wider oklch color palette, container queries, 3D transforms, @starting-style support, and a not-* variant.</p>
<h2 dir="ltr">Browser Support: Check Before You Upgrade</h2>
<p dir="ltr">The upgrade guide states that v4 targets Safari 16.4 and later, Chrome 111 and later, and Firefox 128 and later. It relies on modern CSS features, including @property and color-mix(). If you must support older browsers, the guide says to stay on v3.4. Later versions added fallbacks for some older browsers, such as Safari 15, according to the v4.1 announcement, but the officially documented requirement for v4.0 is the one above.</p>
<h2 dir="ltr">What Arrived in 4.1, 4.2, and 4.3</h2>
<h3 dir="ltr"><strong>Version 4.1 (April 3, 2025)</strong></h3>
<p dir="ltr">Tailwind&#8217;s announcement lists text-shadow utilities, mask utilities, fallbacks for older browsers, a wrap-anywhere utility, pointer-fine and pointer-coarse variants, and @source not and @source inline.</p>
<h3 dir="ltr"><strong>Version 4.2 (February 18, 2026)</strong></h3>
<p dir="ltr">Per Tailwind&#8217;s later blog post and the GitHub releases page, this version added mauve, olive, mist, and taupe color palettes, an official @tailwindcss/webpack package, and logical-property utilities. It also added font-features utilities and deprecated start-* and end-* in favor of other names. The webpack loader build was reported 2.17 times faster, falling from 932 to 429 milliseconds on the tailwindcss.com docs.</p>
<h3 dir="ltr"><strong>Version 4.3 (May 8, 2026)</strong></h3>
<p dir="ltr">This release added scrollbar utilities, an @container-size feature, zoom and tab utilities, and stacked or compound @variant support. The releases page then lists 4.3.1 on June 12, 4.3.2 on June 29, and 4.3.3 on July 16, though the page did not show a year for the last entry.</p>
<h2 dir="ltr">Tailwind Labs Joins Shopify</h2>
<p dir="ltr">On September 9, 2026, Tailwind&#8217;s blog announced that Tailwind Labs is joining Shopify. It says &#8220;Everything will always be MIT-licensed&#8221; and reports more than 110 million installs per week. New sign-ups for the paid Tailwind Plus and ui.sh products have closed, while existing customers keep access. CMSWire described the deal as an acquisition. The price was undisclosed. For developers, the practical point is that the open-source framework&#8217;s license is unchanged.</p>
<h2 dir="ltr">How to Migrate From v3</h2>
<h3 dir="ltr"><strong>Step 1: Start on a Branch</strong></h3>
<p dir="ltr">The upgrade guide recommends running the upgrade on a new branch and reviewing the diff. The upgrade tool needs Node.js 20 or later.</p>
<h3 dir="ltr"><strong>Step 2: Run the Upgrade Tool</strong></h3>
<p dir="ltr">Run the command npx @tailwindcss/upgrade. It updates dependencies, migrates your configuration, and rewrites template files where it can.</p>
<h3 dir="ltr"><strong>Step 3: Choose Your Build Integration</strong></h3>
<p dir="ltr">The guide lists three paths. For Vite, import tailwindcss from &#8220;@tailwindcss/vite&#8221; and add it to the plugins array. The v4 announcement says it performs better than the PostCSS route. For PostCSS, use the @tailwindcss/postcss package. For the command line, use @tailwindcss/cli, for example with npx @tailwindcss/cli -i input.css -o output.css. Version 4.2 added a webpack package.</p>
<h3 dir="ltr"><strong>Step 4: Replace the Directives</strong></h3>
<p dir="ltr">Swap the three @tailwind directives for @import &#8220;tailwindcss&#8221; in your CSS.</p>
<h3 dir="ltr"><strong>Step 5: Review the Changes by Hand</strong></h3>
<p dir="ltr">The tool cannot fix everything. Go through the renamed and removed utilities below and test your pages.</p>
<h2 dir="ltr">Renamed and Removed Utilities</h2>
<p dir="ltr">The upgrade guide lists several renames. The shadow, drop-shadow, blur, backdrop-blur, and rounded utilities shift one step: shadow-sm becomes shadow-xs, and plain shadow becomes shadow-sm. The outline-none utility becomes outline-hidden, and ring becomes ring-3 to keep the old width.</p>
<p dir="ltr">Removed utilities include the opacity helpers such as bg-opacity-<em>, which are replaced by the slash syntax, for example bg-black/50. The flex-shrink-</em> and flex-grow-* utilities become shrink-* and grow-*. The overflow-ellipsis utility becomes text-ellipsis, and the decoration-slice and decoration-clone utilities become box-decoration-slice and box-decoration-clone.</p>
<h2 dir="ltr">Default Changes That Can Break Your Design</h2>
<p dir="ltr">The default border and divide color is now currentColor instead of gray-200. The default ring width changed from 3 pixels to 1 pixel, and its color from blue-500 to currentColor. Placeholder text uses the text color at 50 percent opacity. Buttons now use the default cursor. Hover styles apply only when the device supports hover. These changes are easy to miss, so scan your UI for borders, rings, and placeholders after upgrading.</p>
<h2 dir="ltr">Syntax Changes</h2>
<p dir="ltr">The important modifier now goes at the end, for example flex! and the old position is deprecated. If you use a prefix, the syntax becomes tw:flex. The shorthand for CSS variables changes from bg-[&#8211;brand-color] to bg-(&#8211;brand-color). Variants stack from left to right. Arbitrary grid values that used commas now need underscores.</p>
<h2 dir="ltr">Configuration Changes</h2>
<p dir="ltr">The tailwind.config.js file is no longer detected automatically. To keep using one, load it with @config &#8220;../../tailwind.config.js&#8221;. The corePlugins, safelist, and separator options are not supported. Use @source inline() in place of safelist, and @utility in place of @layer utilities. Sass, Less, and Stylus are not supported as preprocessors with v4.</p>
<h2 dir="ltr">Should You Upgrade?</h2>
<p dir="ltr">Upgrade if your browser support matches the requirements, your build uses Vite, PostCSS, the CLI, or webpack, and you can spend time reviewing the visual diff. Stay on v3.4 if you must support browsers older than Safari 16.4, Chrome 111, or Firefox 128, or if you rely on Sass-based styling. New projects should start on v4.</p>
<h2 dir="ltr">A Migration Checklist</h2>
<ol dir="ltr">
<li>Create a branch and make sure tests pass.</li>
<li>Confirm Node.js 20 or later.</li>
<li>Run the upgrade tool and read the diff.</li>
<li>Verify your build tool integration.</li>
<li>Check borders, rings, shadows, and placeholders.</li>
<li>Replace deprecated utilities and variable syntax.</li>
<li>Test in your target browsers.</li>
<li>Merge when visual checks pass.</li>
</ol>
<h2 dir="ltr">Practical Migration Tips</h2>
<p dir="ltr">Migrate in a small project first. If your codebase is large, run the upgrade tool on a branch, build, and review the visual diff page by page, paying special attention to borders, rings, and shadows, since their defaults changed. Search your templates for the renamed utilities listed above, especially shadow-sm, rounded, and outline-none, because the tool may not catch every dynamic class name. If you generate class names from strings, such as combining a prefix and a color name, static scanning cannot see them, so write full class names in your source.</p>
<h2 dir="ltr">Using the @theme Block</h2>
<p dir="ltr">The new @theme block is where your design tokens live. Instead of extending a JavaScript object, you declare variables such as a custom breakpoint, and Tailwind generates the utilities. The upgrade guide&#8217;s example defines a 3xl breakpoint at 1920 pixels. Because the tokens are plain CSS variables, you can use them in your own CSS too. If you keep an old config file during the transition, load it with the @config directive and move values across gradually.</p>
<h2 dir="ltr">A Word on the Shopify News</h2>
<p dir="ltr">The announcement that Tailwind Labs is joining Shopify raised questions for developers who depend on the framework. The facts in Tailwind&#8217;s own post are narrow: the license stays MIT, new Tailwind Plus and ui.sh sign-ups are closed, and existing customers keep access. The post and CMSWire do not disclose a price. Beyond that, any claim about future roadmap or governance is speculation. If you are choosing a CSS approach, weigh the framework on its present merits and the open license, as of October 17, 2026.</p>
<h2 dir="ltr">Performance in Context</h2>
<p dir="ltr">The benchmark numbers are impressive, but keep their scope in mind. They were measured by the Tailwind team against its own Catalyst project, with median results, and describe build time, not page speed in the browser. A faster build helps developer feedback loops and continuous integration time. It does not by itself make your site load faster. The CSS your site ships depends on the utilities you use, not on how quickly they were generated.</p>
<h2 dir="ltr">When to Wait</h2>
<p dir="ltr">If your project uses Sass, Less, or Stylus, v4 does not support those preprocessors, so plan the move carefully. If your design system relies on safelist, corePlugins, or separator options, you will need to rework them with @source inline() and @utility. If your audience includes older browsers, stay on v3.4 as the upgrade guide advises. There is no prize for upgrading early, and v3.4 remains a reasonable choice for stable projects until you have time to test.</p>
<h2 dir="ltr">Frequently Hit Problems After Upgrading</h2>
<p dir="ltr">Three issues come up most often when reading the upgrade guide closely. First, a project that relied on the default gray border color now sees borders in the current text color, so add an explicit color class where you need the old look. Second, rings look thinner because the default width dropped from 3 pixels to 1 pixel, so use ring-3 where you want the old width. Third, hover effects behave differently on touch devices because they now apply only when the device supports hover. Each is a deliberate change listed in the guide, not a bug. Fixing them usually takes a search for the affected classes and a quick visual check on a phone.</p>
<h2 dir="ltr">Using the Official Tooling Well</h2>
<p dir="ltr">The upgrade tool is designed to do the mechanical work, but it works best on a clean working tree with passing tests. Commit first, run it, and read the diff before accepting it. The guide recommends doing this on a new branch. If the tool leaves a file untouched, search for the cause before editing by hand, since a pattern it could not parse may exist elsewhere. Keep the original configuration file until the migration is verified, in case you need to compare values.</p>
<h2 dir="ltr">Frequently Asked Questions</h2>
<h3 dir="ltr">What is the current Tailwind version?</h3>
<p dir="ltr">The 4.3 series. As of October 17, 2026, version 4.3.0 shipped on May 8, 2026, and the releases page lists 4.3.3 as the latest.</p>
<h3 dir="ltr">Is Tailwind still free and open source?</h3>
<p dir="ltr">Yes. Tailwind&#8217;s blog says everything will always be MIT-licensed.</p>
<h3 dir="ltr">How do I upgrade from v3?</h3>
<p dir="ltr">Run npx @tailwindcss/upgrade on a new branch with Node.js 20 or later, then review the changes.</p>
<h3 dir="ltr">Do I still need tailwind.config.js?</h3>
<p dir="ltr">Not by default. You can define tokens in CSS with @theme, or load the old file with @config.</p>
<h3 dir="ltr">Which browsers does v4 support?</h3>
<p dir="ltr">Safari 16.4+, Chrome 111+, and Firefox 128+, according to the upgrade guide.</p>
<h2 dir="ltr"><strong>References and Sources</strong></h2>
<p dir="ltr">Tailwind CSS Blog, &#8220;Tailwind CSS v4.0&#8221;: <a href="https://tailwindcss.com/blog/tailwindcss-v4">https://tailwindcss.com/blog/tailwindcss-v4</a></p>
<p dir="ltr">Tailwind CSS Docs, &#8220;Upgrade guide&#8221;: <a href="https://tailwindcss.com/docs/upgrade-guide">https://tailwindcss.com/docs/upgrade-guide</a></p>
<p dir="ltr">Tailwind CSS Blog, &#8220;Tailwind CSS v4.1&#8221;: <a href="https://tailwindcss.com/blog/tailwindcss-v4-1">https://tailwindcss.com/blog/tailwindcss-v4-1</a></p>
<p dir="ltr">Tailwind CSS Blog, &#8220;Tailwind CSS v4.3&#8221;: <a href="https://tailwindcss.com/blog/tailwindcss-v4-3">https://tailwindcss.com/blog/tailwindcss-v4-3</a></p>
<p dir="ltr">GitHub, &#8220;tailwindlabs/tailwindcss releases&#8221;: <a href="https://github.com/tailwindlabs/tailwindcss/releases">https://github.com/tailwindlabs/tailwindcss/releases</a></p>
<p dir="ltr">Tailwind CSS Blog, &#8220;Tailwind is joining Shopify&#8221;: <a href="https://tailwindcss.com/blog/tailwind-is-joining-shopify">https://tailwindcss.com/blog/tailwind-is-joining-shopify</a></p>
<p dir="ltr">CMSWire, &#8220;Shopify Acquires Tailwind Labs to Secure CSS Framework&#8221;: <a href="https://www.cmswire.com/digital-experience/shopify-acquires-tailwind-labs-to-secure-css-framework/">https://www.cmswire.com/digital-experience/shopify-acquires-tailwind-labs-to-secure-css-framework/</a></p>

Tailwind CSS v4 in 2026: What Is New Since 4.0 and How to Migrate
Tailwind CSS v4 in 2026: What Is New Since 4.0 and How to Migrate