Skip to content

use tailwind classes into styled-components

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 ?



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 />
User contributions licensed under: CC BY-SA
7 People found this is helpful