Inline hover is not working

[isahuja2]

Hi, I've bootstrapped the application using this

The issue is that the inline hover is not working. Below are two examples: one is working, and the other is not. Could you please guide me on what I'm doing wrong?

Working:-

import React from 'react';
import styled from 'styled-components';
import tw from 'twin.macro';

// Styled component with Tailwind CSS and hover effect
const Sample = styled.button`
  ${tw`text-white font-bold py-3 px-6 rounded bg-blue-500`}

  &:hover {
    ${tw`bg-blue-700`}
  }
`;

const App: React.FC = () => {
  return <Sample>Hover Me</Sample>;
};

export default App;

Not Working:-

import React from 'react';
import tw from 'twin.macro';

const App: React.FC = () => {
  return (
    <button
      css={tw`text-white font-bold py-3 px-6 rounded bg-blue-500 hover:bg-blue-700`}
    >
      Hover Me
    </button>
  );
};

export default App;

Thank you ISA