Конвертеры и генераторы кода

CSS в Tailwind

Подбирает утилитарные классы под ваши объявления: значения из шкалы находятся по имени, остальные превращаются в произвольные, а непокрытое честно попадает в отдельный список.

CSS

Классы Tailwind

flex flex-col gap-3 py-4 px-6 border border-solid border-gray-200 rounded-lg bg-white shadow text-lg font-semibold text-gray-900 mt-0 mx-0 mb-2

.card

flex flex-col gap-3 py-4 px-6 border border-solid border-gray-200 rounded-lg bg-white shadow

Осталось написать руками:

mix-blend-mode: multiply;

.card__title

text-lg font-semibold text-gray-900 mt-0 mx-0 mb-2

Шкала Tailwind записана в rem, поэтому 16px находится как p-4, а 13px — как p-[13px]. Сокращения padding, margin и border разворачиваются по сторонам.