tailwindcss，transform 不起作用，但在 css 中添加时会起作用

Question

我最近开始使用 tailwindcss，我注意到有些属性根本不起作用，但是当我将它们放入 css 时，它们确实可以按预期工作。这是一个例子。

const Step = styled.div`
  box-shadow: 0 1.3px 12px -3px rgba(0, 0, 0, 0.4);
  :hover {
    transform: scale(1.1); 
  }
  ${tw`
    flex
    rounded-lg
    items-center
    justify-center
    pl-10
    pr-10
    pt-6
    pb-6
  `}
`;

上面的工作是因为我在我的样式组件中添加了悬停效果与 css。 但是这个：

const Step = styled.div`
  box-shadow: 0 1.3px 12px -3px rgba(0, 0, 0, 0.4);
  ${tw`
    flex
    rounded-lg
    items-center
    justify-center
    pl-10
    pr-10
    pt-6
    pb-6
    hover:scale-110
  `}
`;

不应用悬停效果。 为什么会这样？

编辑（代码-sanbox）： https://codesandbox.io/s/react-tailwind-starter-forked-wwvw2?file=/src/App.js

尝试用双宏内部的hover:scale-110替换顶部的悬停效果

Answer 1

从 twin.macro 添加GlobalStyles 解决了sandbox 上的问题。更多信息请参考this issue。

import { useEffect } from "react";
import Navbar from "./components/Navbar";
import React from "react";

import tw from "twin.macro";
import styled from "styled-components";
import { GlobalStyles } from "twin.macro";

const Step = styled.div`
  box-shadow: 0 1.3px 12px -3px rgba(0, 0, 0, 0.4);
  ${tw`
    flex
    rounded-lg
    items-center
    justify-center
    pl-10
    pr-10
    pt-6
    pb-6
    hover:scale-150
  `}
`;
const Title = styled.h1`
  ${tw`
    pl-10
    pr-10
    pt-6
    pb-6
    hover:rotate-90 
    hover:bg-green-500
  `}
`;

function App() {
  useEffect(() => {
    console.log("hello world");
  }, []);
  return (
    <>
      <Title>Title</Title>
      <Step>Test</Step>
      <GlobalStyles />
    </>
  );
}

export default App;

Answer 2

在 Tailwind 方面，问题在于 --tw-transform 的变量定义被遗漏在最终 CSS 之外。

在代码沙箱中设置tw`hover:scale-110` 时，我得到以下CSS：

.iKmGvP:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    -webkit-transform: var(--tw-transform);
    -ms-transform: var(--tw-transform);
    transform: var(--tw-transform);
}

--tw-transform 变量定义为here，只是连接了不同变换类定义的变量。

这可能是twin.macro、Tailwind 或两者的配置问题，导致该定义未被拾取。我对twin.macro 的经验不足，无法查看代码沙箱中的设置是否正常。

不过，我确实看到您有典型的 tailwind.css 文件，其中包含对 @tailwind base; 等的调用。据我所知，该文件没有在任何地方引用。在一个普通的 Tailwind 项目中，这可能是罪魁祸首。不确定使用twin.macro时是否需要。