Tailwind to CSS Converter
Convert Tailwind CSS classes to vanilla CSS with property explanations and media query support.
AdSense
Top banner
Tailwind Classes
Class Breakdown (23/26 matched)
| Tailwind | CSS |
|---|---|
| flex | display: flex; |
| flex-col | flex-direction: column; |
| items-center | align-items: center; |
| justify-between | justify-content: space-between; |
| p-6 | padding: 1.5rem; |
| gap-4 | gap: 1rem; |
| rounded-2xl | border-radius: 1rem; /* 16px */ |
| border | border-width: 1px; |
| border-solid | border-style: solid; |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| bg-white | background-color: #fff; |
| text-sm | font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ |
| font-semibold | font-weight: 600; |
| text-black | color: #000; |
| w-full | width: 100%; |
| max-w-lg | /* unknown: max-w-lg */ |
| mx-auto | /* unknown: mx-auto */ |
| overflow-hidden | overflow: hidden; |
| relative | position: relative; |
| cursor-pointer | cursor: pointer; |
| transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
| duration-200 | transition-duration: 200ms; |
| hover:shadow-xlhover | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
| md:flex-rowmd | flex-direction: row; |
| md:p-8md | padding: 2rem; |
| lg:max-w-4xllg | /* unknown: lg:max-w-4xl */ |
CSS Output
.element {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
gap: 1rem;
border-radius: 1rem; /* 16px */
border-width: 1px;
border-style: solid;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
background-color: #fff;
font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
font-weight: 600;
color: #000;
width: 100%;
/* unknown: max-w-lg */
/* unknown: mx-auto */
overflow: hidden;
position: relative;
cursor: pointer;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-duration: 200ms;
/* unknown: lg:max-w-4xl */
}
.element:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
@media (min-width: 768px) {
.element {
flex-direction: row;
padding: 2rem;
}
}Was this page helpful?