CODEWITHSUNDEEP
cssreactjsstyled-componentstailwind-css
Nick Gr
Nick Gr

Reputation: 157

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

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

Upvotes: 1

Views: 3127

Answers (2)

the Hutt
the Hutt

Reputation: 18408

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;

Upvotes: 3

lime
lime

Reputation: 7111

From the Tailwind side, the issue is that the variable definition for --tw-transform gets left out of the final CSS.

When setting tw`hover:scale-110` in the code sandbox, I get the following 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);
}

The --tw-transform variable is defined here, and just concatenates the variables defined by the different transform classes.

It's probably a configuration issue with twin.macro, Tailwind, or both, which leads to that definition not being picked up. I'm not experienced enough with twin.macro to see whether the setup in the code sandbox looks sane.

I do see however that you have the typical tailwind.css file with calls to @tailwind base; etc. As far as I can see, that file isn't referenced anywhere. In a vanilla Tailwind project, that would be a likely culprit. Not sure if it's needed at all when using twin.macro.

Upvotes: 1

Related Questions