Вот исходный код из скомпилированного файла TailwindCSS:
.translate-y-full {
--transform-translate-y: 100%;
}
Это не работает. Синтаксис CSS неверен. Когда я изменил его на:
.translate-y-full {
transform: translateY(100%);
/* --transform-translate-y: 100%; */
}
Он начал работать.
Может быть, я что-то упускаю, но это, кажется, ошибка, и большая...???
Добавьте transform к классам.
<img class = "transform translate-y-full" ...>
Возможно, вы забыли поместить эту строку ниже в свои коды css.
@tailwind base;
Tailwind (я использую версию 3.2.7) использует следующий css для служебного класса .translate-y-full:
.translate-y-full {
--tw-translate-y: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Если вы хотите, чтобы это работало, переменные CSS, кроме --tw-translate-y, также должны быть определены. Как упоминалось в более раннем ответе , вы можете определить эти переменные, включив @tailwind base. Однако, если вы не хотите включать @tailwind base и все базовые стили Preflight, которые поставляются с ним, вы также можете самостоятельно определить переменные css с некоторыми значениями по умолчанию:
:root {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}