Tailwind Getting Started Guide

Basic

before:

<StyledDiv></StyledDiv>

const StyledDiv = styled.div`
  display: flex;
`

after:

<div className="flex"></div>

Spacing

styled.div`
  margin: 24px 12px 6px;
`

=> mx-3 mt-6 mb-1.5

Colors

styled.div`
  color: ${(props) => props.theme.colors.brand};
`

=> text-brand

Responsive

styled.div`
  @media (min-width: ${(props) => props.theme.breakpoints.sm}) {
    margin-bottom: 20px;
  }
`

=> sm:mb-5

Hover

styled.div`
  &:hover {
    text-decoration: underline;
  }
`

=> hover:underline

Many classes

before:

<div className="mx-2 mt-4 mb-0.5 text-lg text-brand bg-white hover:bg-brand"></div>

after:

<div
  className={clsx(
    'mx-2 mt-4 mb-0.5 text-lg text-brand',
    'bg-white hover:bg-brand'
  )}
></div>

(not more than 5 classes per line)

Helper

makeMargin => mx-side

makePrimaryButton => serlo-button serlo-make-interactive-primary

Props

before:

<LinkSection full={isFull}/>

const LinkSection = styled.div<{ full?: boolean }>`
  margin-bottom: ${(props) => props.full && '1.5rem'};
  margin-top: ${(props) => (!props.full ? '20px' : '8px')};
`

after:

<LinkSection className={clsx(isFull ? 'mb-6 mt-2' : 'mt-5')}