Вот исходный код из скомпилированного файла 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? Поскольку я сейчас использую библиотеку компонентов, в которой неявно указано не импортировать базу при использовании с попутным ветром.
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;
}
Это, похоже, не сработало для меня. Вы помните, какую версию попутного ветра вы использовали или что должен делать служебный класс
transform
?