Build Tailwind CSS utility class strings visually. Pick layout, spacing, colour, typography and effects — get the class list instantly.
Select options from Layout, Spacing, Colours, Typography and Effects using the visual controls.
The live preview box and the generated class string update as you make selections.
Click Copy Classes to copy the complete Tailwind utility class string for your element.
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS, you compose designs by applying small, single-purpose utility classes directly in your HTML markup.
Yes. The generated class names only work when Tailwind CSS is installed in your project — either via CDN (for prototyping) or via npm with PostCSS for production builds.
Bootstrap provides pre-designed components (buttons, cards, navbars). Tailwind provides low-level utilities — you compose your own components from scratch. Tailwind gives more design flexibility; Bootstrap gives more out-of-the-box components.
p-4 sets padding on all four sides equal to 1rem (16px) in the default Tailwind config. Tailwind uses a numeric scale where each step equals 0.25rem — so p-1 is 4px, p-4 is 16px, p-8 is 32px.
Tailwind uses breakpoint prefixes. sm:, md:, lg:, xl: and 2xl: apply a class only at that breakpoint and above. For example, hidden md:block hides an element on mobile but shows it as a block from md (768px) upward.
Tailwind JIT (now the default in v3) generates CSS on demand as you write class names rather than generating all possible classes upfront. This produces much smaller CSS files and supports arbitrary values like w-[327px].
Yes. Tailwind JIT supports arbitrary values with square brackets. For example, text-[14px], bg-[#ff5733] and w-[327px] generate utility classes with custom values not in the default config.
text-gray-500 sets the text colour to the 500 shade of Tailwind's gray palette (#6b7280 in the default theme). Tailwind's colour palettes range from 50 (lightest) to 950 (darkest) in increments of 100.
Prefix any utility class with hover: or focus: to apply it on that state. For example, hover:bg-blue-600 changes the background to blue-600 on hover. These can be combined with breakpoints: sm:hover:bg-blue-700.
@apply lets you use Tailwind utility classes inside your own CSS files to build reusable component styles. For example, .btn { @apply px-4 py-2 bg-blue-600 text-white rounded; } extracts common patterns into a single class.
