Tailwind to CSS

Convert Tailwind CSS classes to vanilla CSS

Browser ProcessingYour data never leaves your browser

Tailwind Classes

Preview

Preview Element

Generated CSS 

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--color-blue-500);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

Class Breakdown

flexdisplay: flex;
items-centeralign-items: center;
justify-betweenjustify-content: space-between;
p-4padding: 16px;
bg-blue-500background-color: var(--color-blue-500);
text-whitecolor: #ffffff;
rounded-lgborder-radius: 8px;
shadow-lgbox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

Common Examples

Related Tools

CSS Gradient GeneratorCreate beautiful linear and radial CSS gradients
CSS Box Shadow GeneratorGenerate CSS box-shadow with visual editor
CSS Text Shadow GeneratorGenerate CSS text-shadow effects visually
CSS Border Radius GeneratorCreate custom border-radius with visual editor