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

Question

I started using tailwindcss recently and I noticed that some properties don't work at all but when I put them in css they do work as expected. Here is an example.

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
  `}
`;

The above works because I added the hover effect inside my styled component with css. But this:

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
  `}
`;

Doesn't apply the hover effect. Why does that happen?

Edit (code-sanbox): https://codesandbox.io/s/react-tailwind-starter-forked-wwvw2?file=/src/App.js

Try to replace the hover effect on top with hover:scale-110 inside twin-macro

Answer 1

Adding GlobalStyles from twin.macro resolved the issue on 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;