use tailwind classes into styled-components

0
votes

Can I use tailwind classes ( like colors ) into the styled-components ? I want to use some classes instead of CSS styles to style my components this is the way add class in styled-components:

const Button = styled.button.attrs(props => ({
  className: "small",
}))`
 /* other styles */
`;

so unlike styles, attrs className is only one single string, and I want to add classes for size, color, display and etc. I have to concat them all every time, is there a better way ?

1
javascriptreactjsstyled-components

1 Answers

0
votes

You can use macro, I suggest trying twin.macro:

import tw, { styled } from 'twin.macro'

const Input = styled.input`
  color: purple;
  ${tw`border rounded`}
  ${({ hasHover }) => hasHover && tw`hover:border-black`}
`
const Component = () => <Input hasHover />