Tailwind Arbitrary Value Map: Translate Pixel Sizes to Classes and Config

Paste a pixel size or a raw CSS block and instantly get native Tailwind utility classes, JIT bracket notation, and a copy-ready tailwind.config.js theme extension.

Input Dashboard
REM value
Tailwind scale key
Native class (spacing)
JIT arbitrary class
or paste CSS block
Translation Readout
🔍 Type a pixel value or paste a CSS block to see Tailwind translations here.
tailwind.config.js Generator
tailwind.config.js 
// Paste a CSS block above to generate your theme extension

module.exports = {
  theme: {
    extend: {
      // custom values will appear here
    }
  }
}
Key Terms Explained
Arbitrary Values
Any CSS value written directly inside Tailwind bracket notation, such as w-[317px] or bg-[#ff6600], bypassing the default scale entirely.
JIT Compiler
Tailwind's Just-In-Time engine, which scans your templates and generates only the CSS you actually use, enabling arbitrary value support without bloating output files.
REM Units
Root EM: a relative CSS unit measured against the HTML root element's font size (typically 16px). 1rem = 16px by default, but respects a user's browser font preference.
Pixel (px)
An absolute CSS length unit. 16px always renders as 16px regardless of browser settings, which can hurt accessibility for users who need larger text.
Utility Classes
Single-purpose CSS classes in Tailwind that each apply one or two CSS declarations, such as mt-4 for margin-top: 1rem or text-center for text-align: center.
tailwind.config.js
The Tailwind configuration file where you customize colors, spacing, typography, breakpoints, and more by extending or replacing the default design tokens.
Theme Extension
Placing custom values inside theme.extend in tailwind.config.js merges them with the defaults instead of replacing them, preserving all built-in utility classes.
CSS Parsing
Reading raw CSS declarations (property: value pairs) with code (typically a RegEx pattern) to extract individual property names and their numeric values for further processing.

The Complete Guide to Tailwind Arbitrary Values and Config Extensions

Design files rarely match Tailwind's default spacing scale exactly. When a designer specifies padding-top: 22px or a custom card width of 347px, you have two clean options: use Tailwind's bracket notation for a one-off fix, or extend the config to make that value a first-class token your whole team can reference. This tool does the math and generates both for you instantly.

How to Use This Tool

In the Quick Single Value box, type any pixel number to immediately see its REM equivalent, its Tailwind spacing key (if one exists), and both the native class and JIT arbitrary class syntax for the spacing category.

In the Bulk CSS Parser, paste any raw CSS declarations exactly as they appear in a design spec or existing stylesheet. The tool parses every property-value pair in real time, maps each CSS property to its closest Tailwind utility prefix, and populates both the Translation Readout table and the config block below.

Use the Base Font Size control to adjust REM math if your project sets a different root font size (for example, some projects use 10px to make rem math simpler).

Understanding the Tailwind Default Spacing Scale

Tailwind's default spacing scale runs from 0 to 96, where each unit equals 0.25rem (4px at the default 16px root). The most commonly used values are: 1 = 4px, 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px, and so on. This tool highlights in green when your pixel value lands exactly on one of these native scale points.

Values that fall between scale points (like 10px or 22px) have no native class. The JIT arbitrary syntax handles these cleanly: p-[10px] or mt-[22px] compile to exact CSS with zero performance cost in Tailwind v3 and later.

When to Extend the Config vs. Use Bracket Notation

If a custom value appears more than two or three times in your project, adding it to tailwind.config.js pays off immediately. Named tokens like spacing.18 or fontSize.display are easier to search for, easier to update globally, and more readable for teammates who did not write the original code. Arbitrary bracket values are best for pixel-perfect design details that are truly one-off.

Mapping CSS Properties to Tailwind Prefixes

This tool maps the most common CSS sizing properties to their Tailwind counterparts: margin becomes m-, padding becomes p-, width becomes w-, height becomes h-, font-size becomes text-, border-radius becomes rounded-, and gap values map to gap-, gap-x-, or gap-y-. The config generator groups all spacing-related values under theme.extend.spacing and separates font sizes, line heights, and border radii into their own theme sections.

Frequently Asked Questions

What are arbitrary values in Tailwind CSS? ▼
Arbitrary values are a Tailwind CSS JIT feature that lets you use any CSS value directly inside a utility class by wrapping it in square brackets. For example, w-[317px] sets width to exactly 317px, even though 317px is not part of the default spacing scale. This eliminates the need to write custom CSS for one-off values or to extend the config for minor deviations from the default scale.
When should I use bracket notation versus updating my tailwind.config.js file? ▼
Use bracket notation (arbitrary values) for one-off values that appear only once or twice in your project, such as a specific hero image height or a pixel-perfect border radius from a design file. Use tailwind.config.js theme extension when a custom value is reused across many components, when it is part of your design system, or when your team needs a consistent named token like spacing.18 or fontSize.display. Extending the config keeps your markup cleaner and your design tokens centralized.
Why does Tailwind use REM units instead of pixels by default? ▼
Tailwind uses REM units because they scale relative to the browser's root font size, which is typically 16px by default. This means users who have increased their browser's base font size for accessibility will automatically see your layout and typography scale up proportionally. Pixel values are absolute and do not respect browser font size preferences, which can hurt readability and accessibility. Tailwind's default spacing scale (where 1 unit equals 0.25rem, or 4px at default) is designed to produce REM values in the compiled output.
How do I add a custom spacing scale to my Tailwind theme? ▼
In your tailwind.config.js file, add your custom values under theme.extend.spacing to merge them with the default scale without replacing it. For example: theme: { extend: { spacing: { '18': '72px' } } }. After adding the config, you can use classes like mt-18 or p-18 in your templates. If you use theme.spacing instead of theme.extend.spacing, you replace the entire default scale, which removes built-in classes like p-4 and mt-8.
Can I use arbitrary values for things other than sizing, like colors or drop shadows? ▼
Yes. Tailwind's arbitrary value syntax works for almost any CSS property. You can use bg-[#1a2b3c] for a custom hex color, text-[clamp(1rem,2.5vw,2rem)] for fluid typography, shadow-[0_4px_24px_rgba(0,0,0,0.15)] for custom box shadows, and grid-cols-[1fr_2fr_1fr] for custom grid templates. The bracket notation passes the value directly to the underlying CSS property, so anything valid in CSS is valid here.
Tool note: This tool maps pixel values to the Tailwind v3 default spacing scale and common utility prefixes. Tailwind's full API includes many more utilities and scales (colors, opacity, transitions, etc.) not covered here. Always verify generated config blocks against the official Tailwind CSS documentation for your specific version.