Enter one or more classes separated by spaces. Supports arbitrary values like w-[123px], text-[#ff0000], grid-cols-[1fr_2fr].
Quick examples:
Ready to preview
Enter Tailwind classes and click Generate// enter a class, see the css it generates
Enter any Tailwind CSS class or arbitrary value and instantly see the generated CSS output. Perfect for debugging, learning, and exploring Tailwind JIT mode.
Enter one or more classes separated by spaces. Supports arbitrary values like w-[123px], text-[#ff0000], grid-cols-[1fr_2fr].
Quick examples:
Ready to preview
Enter Tailwind classes and click GenerateType any Tailwind utility classes in the input — standard or arbitrary values.
Click "Generate CSS" or press Ctrl+Enter to compute the full CSS output.
Review the live preview and copy the generated CSS for use in your project.
The Tailwind JIT Previewer lets you enter any Tailwind CSS class — including Tailwind's JIT arbitrary value syntax like w-[350px] or text-[#ff0] — and instantly see the exact CSS it compiles to. No build step, no Node.js, no config.
JIT (Just-In-Time) mode is Tailwind CSS's modern compilation engine that generates styles on demand. Unlike the classic purge approach, JIT generates CSS only for the classes you actually use — and supports arbitrary values like w-[123px] without any configuration.
Arbitrary values let you use any CSS value directly in a Tailwind class using bracket notation. For example, bg-[#1a1a2e] sets a custom background color, w-[350px] sets an exact width, and text-[clamp(1rem,2vw,2rem)] uses a CSS clamp function.
No. This tool runs entirely in the browser using its own CSS generation engine based on Tailwind's specifications. You don't need Node.js, npm, or any Tailwind installation to use it.
This tool covers the core utility classes and arbitrary value syntax from Tailwind v3/v4. Complex plugin-based classes or custom theme extensions from a specific project's config will not be resolved, as those require a full build environment.
Enter classes with modifiers like hover:bg-blue-500, md:flex, or dark:text-white. The tool will show the CSS with the appropriate media query or pseudo-class selector applied.
Yes — separate classes with spaces, just like you would in an HTML class attribute. The tool will generate the combined CSS and display a per-class breakdown so you can see exactly what each class contributes.
The live preview renders a sample element with your entered classes applied — via an inline style tag generated from the parsed CSS. It lets you visually confirm how the classes look before using them in your project.
Not yet. This tool is browser-only for now. If you need batch processing or server-side Tailwind CSS generation, consider using the official Tailwind CLI or PostCSS integration in your build pipeline.
A Tailwind JIT Class Previewer is a browser-based developer tool that translates Tailwind CSS utility class names into their actual CSS output — instantly, without any build step. Whether you're learning Tailwind, debugging an unfamiliar class, or experimenting with arbitrary values, this tool gives you an immediate answer to the question: "What CSS does this Tailwind class generate?"
This is especially useful for Tailwind's JIT (Just-In-Time) engine, which introduced a powerful feature: arbitrary values. Instead of being limited to Tailwind's predefined scale, you can write w-[350px], text-[#ff6600], or grid-cols-[1fr_2fr_1fr] and JIT will generate the exact CSS you need on the fly.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
Tailwind CSS version 3 made JIT mode the default compilation strategy. Before JIT, developers had to configure purge settings carefully to keep CSS bundle sizes manageable, because Tailwind pre-generated thousands of utility classes. JIT flipped this: it scans your source files for class names and generates only the CSS those classes require.
The result is a dramatically smaller stylesheet in production, faster build times, and — crucially — support for arbitrary values that simply weren't possible in classic mode without writing custom plugins.
The bracket notation in Tailwind allows you to pass any valid CSS value directly into a utility class. The syntax follows the pattern: {prefix}-[{value}]. Here are some practical examples:
w-[350px] → width: 350pxh-[calc(100vh-64px)] → height: calc(100vh - 64px)bg-[#1a1a2e] → background-color: #1a1a2etext-[clamp(1rem,2vw,2rem)] → font-size: clamp(1rem, 2vw, 2rem)grid-cols-[1fr_2fr_1fr] → grid-template-columns: 1fr 2fr 1fr (spaces are replaced with underscores)shadow-[0_4px_24px_rgba(0,0,0,.3)] → box-shadow: 0 4px 24px rgba(0,0,0,.3)Note that Tailwind uses underscores to represent spaces inside arbitrary values, since spaces are used to separate class names in HTML.
Even experienced Tailwind developers occasionally need to verify what a class generates. Here are the most common situations where a JIT previewer is invaluable:
ring-offset-2 or tracking-tighter produces. Seeing the CSS output accelerates learning significantly.rounded-xl equals border-radius: 12px bridges the communication gap.shadow-[0_8px_32px_rgba(56,189,248,.4)] are easy to mistype. Previewing them catches errors immediately.Tailwind's modifier system lets you prefix any utility with a condition. Common modifiers include:
sm:, md:, lg:, xl:, 2xl:hover:, focus:, active:, disabled:, group-hover:dark:aria-checked:, aria-disabled:When you use the previewer with a class like hover:bg-blue-500, the generated CSS will correctly include the :hover pseudo-class selector, so you see exactly what Tailwind outputs.
In classic (pre-v3) Tailwind, all utility classes were pre-generated at build time based on your configuration. A default config would produce a CSS file with hundreds of thousands of potential utilities. Purging removed unused ones, but it was imperfect and configuration-heavy.
JIT works in reverse: it generates CSS on demand for only the classes found in your templates. This means the development stylesheet is also lean, source maps work correctly, and arbitrary values require zero configuration. The developer experience improvement was so significant that Tailwind Labs made JIT the default in v3 and the only option in v4.
A few best practices when working with Tailwind — especially with arbitrary values:
bg-[color:var(--brand)] lets you combine Tailwind with your CSS custom properties. Note the color: type hint prefix — it tells Tailwind which CSS property to target.w-[350px] is powerful, try to use Tailwind's spacing scale (w-80 = 320px, w-96 = 384px) for consistency. Reserve arbitrary values for truly unique needs.@apply in a CSS file to create a semantic component class. The previewer can help you verify the output before committing.shadow-[0_2px_4px]) but hyphens for negative values (translate-x-[-50%] or the shorthand -translate-x-1/2).This tool implements a JavaScript-based Tailwind CSS resolution engine. It parses each class name, identifies the utility prefix and value, applies Tailwind's default configuration (spacing scale, color palette, breakpoints, etc.), and constructs the equivalent CSS rule. Arbitrary values are extracted from bracket syntax and inserted directly into the appropriate CSS property.
The live preview renders the computed CSS into a sandboxed preview element, so you see how the styles actually look in a browser. The class breakdown panel shows each class individually, making it easy to understand multi-class combinations piece by piece.