| name | tailwindcss-browser-4-2-0 |
| description | 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. |
| version | 0.1.0 |
| author | Tangled <noreply@tangledgroup.com> |
| license | MIT |
| tags | ["css","tailwind","browser","prototyping","no-build","static-sites","cdn"] |
| category | development |
| external_references | ["https://www.npmjs.com/package/@tailwindcss/browser","https://github.com/tailwindlabs/tailwindcss"] |
Tailwind CSS Browser Build v4.2
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 <script> tag, write HTML with Tailwind classes, and the browser generates needed CSS on the fly.
The package ships as a single global JS file (~271KB uncompressed) that scans the DOM for class names, compiles only referenced utilities, injects CSS into <head>, and watches for DOM mutations to re-compile incrementally.
Do not use for production applications requiring optimized CSS bundles, critical CSS extraction, or tree-shaking. Use the standard tailwindcss package with Vite/PostCSS/CLI for those cases.
When to Use
- Prototyping interfaces rapidly without project scaffolding
- Building static documentation or markdown-rendered sites
- Creating single-file HTML demos or email templates with live editing
- Learning Tailwind CSS utility classes interactively
- Embedding Tailwind where Node.js tooling is unavailable
- Adding Tailwind to existing static HTML pages without a build pipeline
How It Works
Core Mechanism
The browser build uses text/tailwindcss MIME type to identify <style> blocks with Tailwind CSS source. On page load:
- All
<style type="text/tailwindcss"> elements are read and concatenated
- If no
@import found, @import "tailwindcss"; is prepended automatically
- CSS parsed through Tailwind's Oxide engine (Rust-compiled via WASM)
- DOM scanned for all class names on
[class] elements
- Only matching utilities are compiled
- Generated CSS injected into
<style> in <head>
Mutation Observing
Two MutationObserver instances keep styles in sync:
- Full rebuild trigger: Watches for
<style type="text/tailwindcss"> elements being added, removed, or modified
- Incremental rebuild trigger: Watches document tree for new elements with classes or class changes on
<html>
Performance Markers
Uses performance.mark()/performance.measure() for: , , , , , . View in DevTools → Performance.
