尾风，转换不起作用，但当它添加到css中时就起作用了

Question

我最近开始使用尾风，我注意到有些属性根本不起作用，但是当我把它们放在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
  `}
`;

不适用悬停效应。为什么会发生这种事？

编辑(代码-桑盒)：https://codesandbox.io/s/react-tailwind-starter-forked-wwvw2?file=/src/App.js

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

Answer 1

从GlobalStyles添加twin.macro解决了沙盒上的问题。有关更多信息，请参阅本期。

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

从尾风的角度来看，问题是--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变量被定义为这里，并将不同转换类定义的变量连接起来。

这可能是twin.macro、Tailwind或两者都存在的配置问题，这导致该定义没有被采纳。我对twin.macro没有足够的经验，看代码沙箱中的设置是否正常。

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