Base

Introducció
Play CDN
Webstorm
Dynamic breakpoints
Dark Mode
@layer
V4

Introducció

Play CDN

Use the Play CDN to try Tailwind right in the browser without any build step.

The Play CDN injects a tiny JIT compiler that builds just the classes you use and it’s designed for development purposes only, and is not intended for production.

The Play CDN is an official script you drop in <head>:

<script src="https://cdn.tailwindcss.com"></script>

Need forms or typography utilities? Append a plugins param:

<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>

The Play CDN fetches and bundles first-party plugins automatically.

Webstorm

WebStorm integrates with Tailwind CSS providing Tailwind CSS syntax support, completion for Tailwind CSS class names, as well as CSS functions and directives, preview of the resulting CSS on hover, and Tailwind CSS-specific inspections.

Tailwind CSS support in WebStorm is backed by the Tailwind CSS Language Server that detects the Tailwind CSS package and, based on the package version, searches for a Tailwind CSS-specific project configuration:

With Tailwind CSS 4, the Language Server looks for a CSS file with an @import "tailwindcss" directive.

WebStorm is shipped with a bundled Tailwind CSS Language Server. However, it is recommended that you keep the Language Server up to date by downloading the latest server version and specifying the path to it on the Settings | Languages &Frameworks | Style Sheets | Tailwind CSS page as described in Configure the Tailwind CSS Language Server.

Dynamic breakpoints

We’ve added a new max-* variant that lets you apply max-width media queries based on your configured breakpoints:

<div class="max-lg:p-8">  <!-- Will apply `p-8` until the `lg` breakpoint kicks in --></div>

…

Dark Mode

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.

MDN - prefers-color-scheme

Tailwind - Dark Mode

`@layer`

La directiva @apply et permet utilitzar classes de Tailwind en la definició de selectors CSS.

La directiva @layer pot ser base, components o utilities. Pel que fa al navegador, si utilitzes @layer, els selectors es defineixen com a part de la capa que declaris, independentment d’on estiguin ubicades realment les definicions dins dels teus fitxers CSS.

Fer servir @layer components defineix el selector com a part dels components i abans de les utilities. Això vol dir que, si combinem una definició nostra amb una utilitat de Tailwind, guanyarà la utilitat, que és el que volem. Així, podem definir, per exemple, un títol extra gran amb:

@layer components {
    .title { @apply text-6xl font-bold }
    .subtitle { @apply text-4xl font-semibold }
    .subsubtitle { @apply text-lg font-medium italic }
}

<div class="title text-5xl">Title</div>

Per entendre per què @layer és important, cal conèixer un principi general del CSS: a igualtat de condicions, si dues classes CSS intenten ajustar la mateixa propietat subjacent, preval la que està definida més tard. (Si ja estàs familiaritzat amb el CSS, saps que també hi ha el principi d’especificitat, on guanya la definició més específica, però com que totes les utilitats de Tailwind tenen la mateixa especificitat, això no és un problema aquí.)

En un fitxer CSS, si tens dues definicions per al mateix selector que defineixen la mateixa propietat, guanya el selector definit més tard al fitxer. En Tailwind, si tens dues classes utilitàries que defineixen la mateixa propietat, guanya la que apareix més endavant a la llista; per tant, class="text-xl text-2xl" donarà un text amb mida 2xl.

En definir un selector personalitzat dins d’una capa, el selector es carrega al final d’aquella capa i abans de la següent. Això té conseqüències sobre com el teu CSS personalitzat pot interactuar amb altres utilities de Tailwind o amb altres CSS. Per exemple, podem fer que les nostres definicions formin part de l’HTML utilitzant @apply sobre etiquetes, no sobre selectors de classe. En aquest cas, posem la definició a la capa base:

@layer base {
    h1 { @apply text-4xl font-bold }
    h2 { @apply text-2xl font-semibold }
    h3 { @apply text-lg font-medium italic }
}

Aquí redefinim directament els elements h1, h2 i h3, de manera que podem fer servir això:

<h1>Title</h1>

En estar a la capa base, aquestes definicions van abans de totes les utilities, de manera que <h1 class="text-6xl"> es comporta com esperes, amb la 6xl tenint prioritat. Si l’h1 estigués definit a la capa utilities, llavors l’h1 tindria prioritat perquè es definiria més tard que text-6xl. I com que hem mogut la definició a la capa base, Tailwind ho considerarà part dels estils Preflight i ho definirà abans de qualsevol component. De nou, aquesta ubicació et permet barrejar etiquetes, components i utilities tal com s’espera.

By being in the base layer, these definitions are before all utilities, so that <h1 class="text-6xl"> behaves as you’d want, with the 6xl taking precedence. If the h1 was defined in the utilities layer, then the h1 would have precedence because it’d be defined later than the text-6xl. And because we’ve moved the layer to base, Tailwind will consider this part of the Preflight styles and define it before any components. Again, this placement allows you to mix tags, components, and utilities as expected.

V4

Tailwind v4 is here!

3x better performance compilation time
deprecating tailwind.config.js in favor of CSS configuration
better source detection (no more content paths in config)
a couple of new utility classes and renaming others

Tailwind - Base