Discussion on: How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro

View post

const StyledForm = styled.main.attrs({
  className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
  & {
    form {
      ${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
    }
    input {
      ${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
    }
    button {
      ${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
    }
  }
`

I haven't really done much Tailwind with Styled Components, but this looks kind of difficult to maintain, have you found that to be the case or is it easier than it looks?

Ibrahima Ndaw • Apr 15 '20

The list to style an element can be huge but isolated it in the Styled Components is much better. And it's definitely more maintainable than use it directly in the component itself.