Escriu per cercar…

Base

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>:

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

Need forms or typography utilities? Append a plugins param:

html
<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:

html
<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:

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

Estàs llegint una vista prèvia.

Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.

Inicia sessió