转换CSS代码=>转换：翻译（-50％，-50％）为tailwindcss

Question

有什么方法可以将代码

convert

=> transform: translate(-50%, -50%)

改为

tailwindcss

。我已经搜索了 tailwindcss 文档，但没有解决这个问题。

Answer 1

Tailwind 有 翻译课程。要使用负值，您只需在类前面加上

-

-translate-x-1/2 -translate-y-1/2

这是有效的，因为 tailwind 正在为两者设置 CSS 变量，如下所示：

--tw-translate-x: -50%;
--tw-translate-y: -50%;

并且始终将它们包含在其实际的

transform

属性中：

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)
  );