Custom CSS classes for Transition component with Next Js and styled-components

[abdulrahimiliasu]

I tried using custom classes instead of the ones from tailwind css to style my transitions, but doesn't seem to work. I am using Next js and styled-components, is this even possible ? Can I style transitions with custom classes like for example.

import styled from "styled-components";
import { Transition } from "@headlessui/react";

export default function Card({ isShown }: ICardProps) {

    return (
        <Wrapper>
            <StyledTransition
                show={isShown}
                enter="enter"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="transition-opacity duration-150"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
            >
                <ContentWrapper> Some Nice Content Here </ContentWrapper>
            </StyledTransition>
        </Wrapper>
    );
}

// style Transition Component with `styled-components`
// add transition manually instead of using tailwind css classes 
const StyledTransition = styled(Transition)`

    & .enter {
        transition: all 0.5s ease-in-out;
    }

    & .enterFrom {
        opacity:0;
    }

    & .enterTo {
        opacity: 1;
    }

  ...etc

`;

const Wrapper = styled.div``;

const ContentWrapper = styled.div``;

any help or link to useful documentation will be much appreciated :)