100+ UtilitiesCopy CSSDynamic SpacingFree
CSS Output
.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  /* unknown: bg-white */
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 600;
}

Converts common Tailwind utility classes to raw CSS. Supports spacing, sizing, flex, grid, typography, borders, shadows, and more. Color utilities (bg-blue-500, text-red-600, etc.) and some advanced utilities require Tailwind's theme configuration.

Frequently Asked Questions

What Tailwind classes are supported?
Common utilities including display, position, flex, grid, spacing, sizing, typography, borders, shadows, opacity, cursor, transitions, and more.
Does it handle responsive prefixes?
Responsive prefixes (sm:, md:, lg:, xl:) are stripped for conversion. The raw CSS output shows the base utility values.
Why are some classes marked as unknown?
Color utilities (bg-blue-500, text-red-600) require Tailwind's theme values which change between versions. These are noted as comments.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools