Tailwind Css Class Calculator
Convert pixel values to Tailwind CSS spacing, sizing, and font classes. Enter values for instant results with step-by-step formulas.
Formula
Tailwind Unit = Pixels / 4 | rem = Pixels / Base Font Size
Tailwind spacing uses a scale where 1 unit equals 0.25rem (4px at 16px base). To convert pixels to Tailwind spacing units, divide by 4. For rem conversion, divide pixels by the base font size (default 16px). Font sizes and border radius have their own separate scales with predefined class names.
Worked Examples
Example 1: Converting 24px Padding to Tailwind
Problem: A design mockup specifies 24 pixels of padding on all sides and 12px border radius. Find the Tailwind classes.
Solution: 24px / 4px per unit = 6 spacing units\nTailwind spacing class: p-6 (24px / 1.5rem)\nExact match: YES (24px is in the default scale)\n12px border radius: closest is rounded-xl (12px / 0.75rem)\nExact match for radius: YES\nFull class string: p-6 rounded-xl
Result: Padding: p-6 (exact match at 24px) | Border Radius: rounded-xl (12px)
Example 2: Finding Closest Font Size for 15px
Problem: Your designer specified 15px font size. Find the nearest Tailwind text class.
Solution: 15px / 16px base = 0.9375rem\nNearest Tailwind font sizes:\n text-sm = 14px (0.875rem) - 1px smaller\n text-base = 16px (1rem) - 1px larger\nClosest match: text-sm (14px) or text-base (16px)\nFor exact match use: text-[15px]\nRecommendation: Use text-base (16px) for better readability
Result: Closest: text-sm (14px, 1px off) | Exact: text-[15px] | Recommended: text-base
Frequently Asked Questions
How does the Tailwind CSS spacing scale work?
The Tailwind CSS spacing scale is based on a consistent system where each unit equals 0.25rem (4 pixels at the default 16px base font size). So p-1 equals 0.25rem (4px), p-2 equals 0.5rem (8px), p-4 equals 1rem (16px), and so on. The scale uses increments of 1 unit (4px) for values up to p-12, then switches to larger jumps: p-14 (56px), p-16 (64px), p-20 (80px), p-24 (96px), and so on up to p-96 (384px). This scale is shared across padding, margin, width, height, gap, and positioning utilities, ensuring consistent spacing throughout your design. For values between scale steps, Tailwind v3+ supports arbitrary values like p-[13px].
What is the difference between rem and px units in Tailwind?
In Tailwind CSS, all spacing and sizing values are defined in rem units internally, but the documentation often references their pixel equivalents assuming a 16px base font size. Rem units are relative to the root element font size, which means they scale proportionally if the user changes their browser default font size. For example, p-4 is 1rem, which equals 16px at the default font size but would be 20px if the user set their browser to a 20px base font size. This is an accessibility benefit because users who increase their browser font size for readability will also get proportionally larger spacing. Pixel values (px) are absolute and do not respond to user font size preferences.
How do I convert a design mockup from pixels to Tailwind classes?
Converting a design mockup from pixel values to Tailwind classes involves dividing each pixel value by 4 (since one Tailwind spacing unit equals 4px) to find the closest spacing class. For example, 24px padding becomes p-6, 32px margin becomes m-8, and 48px gap becomes gap-12. For font sizes, match to the closest text size class: 12px is text-xs, 14px is text-sm, 16px is text-base, 18px is text-lg, and so on. Tailwind Css Class Calculator automates this process by taking any pixel value and finding the nearest Tailwind classes across spacing, typography, and border radius scales. When exact matches are not available, it suggests both the closest standard class and the arbitrary value syntax.
What are the Tailwind CSS font size classes and their pixel equivalents?
Tailwind CSS provides a comprehensive font size scale with the following classes and their default sizes: text-xs (12px/0.75rem), text-sm (14px/0.875rem), text-base (16px/1rem), text-lg (18px/1.125rem), text-xl (20px/1.25rem), text-2xl (24px/1.5rem), text-3xl (30px/1.875rem), text-4xl (36px/2.25rem), text-5xl (48px/3rem), text-6xl (60px/3.75rem), text-7xl (72px/4.5rem), text-8xl (96px/6rem), and text-9xl (128px/8rem). Each font size class also sets an appropriate line-height by default for optimal readability. You can customize these values in your tailwind.config.js file or use arbitrary values like text-[17px] for sizes not in the default scale.
How do I extend the Tailwind spacing scale with custom values?
To add custom spacing values to the Tailwind scale, modify the tailwind.config.js file using the theme.extend.spacing property. For example, adding spacing values of 13 (3.25rem), 15 (3.75rem), and 18 (4.5rem) would look like: theme: { extend: { spacing: { 13: '3.25rem', 15: '3.75rem', 18: '4.5rem' } } }. These custom values then become available across all spacing utilities including padding, margin, width, height, gap, and positioning. Using theme.extend preserves all default values while adding your custom ones. If you instead use theme.spacing without extend, it replaces the entire default scale. You can also use pixel values directly in the config: { 'header': '72px' } which creates classes like p-header and h-header.
What is the Tailwind CSS border radius scale?
The Tailwind CSS border radius scale provides rounded corner utilities with the following default values: rounded-none (0px), rounded-sm (2px/0.125rem), rounded (4px/0.25rem, the default), rounded-md (6px/0.375rem), rounded-lg (8px/0.5rem), rounded-xl (12px/0.75rem), rounded-2xl (16px/1rem), rounded-3xl (24px/1.5rem), and rounded-full (9999px, creating a circle or pill shape). You can apply these to specific corners using directional variants: rounded-t-lg for top corners, rounded-r-md for right corners, rounded-tl-xl for top-left only, and so on. For exact pixel values not in the scale, use arbitrary values like rounded-[10px]. The border radius scale can be customized in tailwind.config.js under theme.extend.borderRadius.