tailwindcss，变换不起作用，但在 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 inside twin-macro

Answer 1

从 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.

时是否需要它

Answer 2

从 twin.macro 添加 GlobalStyles 解决了 sandbox. For more info refer 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;

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

tailwindcss, transform doesn't work but it does when added in css

css

reactjs

styled-components

tailwind-css