# Tailwindcss Browser 4 2 4 > In-browser Tailwind CSS v4.2 build (@tailwindcss/browser) that compiles utility classes at runtime without a build step. Use when prototyping, creating documentation sites, building static pages, or learning Tailwind CSS without setting up Node.js tooling. Not for production applications requiring optimized CSS bundles. - Skill: `tangledgroup/tailwindcss-browser-4-2-4` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add tangledgroup/tailwindcss-browser-4-2-4` - Raw SKILL.md: https://api.skillmd.com/api/skills/tangledgroup/tailwindcss-browser-4-2-4/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tangledgroup (https://skillmd.com/u/tangledgroup) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tangledgroup/tailwindcss-browser-4-2-4 --- # Tailwind CSS Browser Build v4.2.4 ## Overview The `@tailwindcss/browser` package is the in-browser build of Tailwind CSS v4.2. It compiles Tailwind utility classes directly in the browser at runtime — no Node.js, no bundler, no build step. Include via `

Hello Tailwind

Tailwind CSS compiled entirely in the browser.

``` No configuration needed. Script auto-detects classes and generates CSS. ### CDN Sources - **jsDelivr**: `https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4/dist/index.global.js` - **unpkg**: `https://unpkg.com/@tailwindcss/browser@4/dist/index.global.js` - **esm.sh**: `https://esm.sh/@tailwindcss/browser@4` Pin to specific version: `.../browser@4.2.4/dist/index.global.js` ### Customizing with text/tailwindcss Style Blocks ```html ``` The `@theme` directive extends Tailwind's design tokens (`--color-*`, `--font-*`, `--spacing-*`, `--breakpoint-*`, `--radius-*`, `--shadow-*`). The `@utility` directive creates custom utility classes. ### Theme Reference Mode Import another stylesheet's theme without emitting its CSS: ```html ``` Browser build only supports built-in virtual modules: `tailwindcss`, `tailwindcss/preflight`, `tailwindcss/theme`, `tailwindcss/utilities`. External file imports are not supported. ### Disabling Preflight ```html ``` Imports only utilities, skipping preflight and theme defaults. ### Using with Frameworks **Alpine.js + Tailwind:** ```html
Content
``` **htmx + Tailwind:** ```html
``` Mutation observer automatically picks up new classes from framework interactions. ## Advanced Topics **Advanced Patterns**: Dynamic themes, multiple style blocks, media queries, preloading, limitations, comparison with standard build → [Advanced Patterns](reference/01-advanced-patterns.md) **Migration & Troubleshooting**: v3 migration guide, FOUC fixes, dynamic class issues, theme debugging, OKLCH compatibility → [Migration & Troubleshooting](reference/02-migration-troubleshooting.md)