v3 to v4 migration

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

v3.1 Built-in CSS imports in CLI

In Tailwind CSS v3.1, the CLI tool now has postcss-import baked in, so you can organize custom CSS into multiple files using @import statements without additional configuration. If using Tailwind as a PostCSS plugin instead of the CLI, you still need to install and configure postcss-import yourself.

@config directive for multiple config files

The @config directive allows you to specify which Tailwind CSS config file to use for a particular CSS file. This makes it easy to build multiple stylesheets in a single project with separate Tailwind configurations. For example, you might use one config for customer-facing areas and another for admin areas. Usage example: add @config "./tailwind.admin.config.js"; at the top of a CSS file before @tailwind directives.

Tailwind CSS v3.2 release features

Tailwind CSS v3.2 released 2022-10-19 with features: @config directive for multiple configs, supports-* variant, aria-* variants, data-* variants, max-width and dynamic breakpoints, dynamic group-*/peer-* variants, matchVariant API, variant modifiers for nested groups, and container queries plugin. Install via npm install -D tailwindcss@latest. This is a minor version with no breaking changes.

Just-in-Time engine becomes default in v3.0

In Tailwind CSS v3.0, the Just-in-Time engine has gone stable and replaced the classic engine, so every Tailwind project benefits from improvements like lightning-fast build times, stackable variants, arbitrary value support, and better browser performance out of the box.

Extended color palette enabled by default in v3.0

In Tailwind CSS 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. This is different from v2 where the palette was limited due to CSS file size constraints.

v3.0 minor breaking changes but smooth upgrade

Tailwind CSS v3.0 is a new major version with some minor breaking changes, but the upgrade process is designed to be smooth. For most projects, v3.0 can be installed without making any changes. Tailwind UI templates are compatible with both v2 and v3 with no changes required.

Deprecated start-* and end-* utilities in v4.2

Tailwind CSS v4.2 deprecated the start-* and end-* utilities in favor of inset-s-* and inset-e-* to align the positioning API with the new logical property utilities including inset-bs-* and inset-be-*.

Give your agent this brain