Web - Tailwind

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

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