Using Tailwind with twin.macro

Disclaimer:

I just share my personal experiences with the technologies described, with the knowledge and skill I had at this point in time. I am aware that there might have been alternative solutions for the problems described.

Why even use tailwind?

• Simplified usage of complicated CSS properties like box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) just being shadow-sm in tailwind

• Reducing design inconsistencies through not encouraging the use of arbitrary-values. This basically means you should not define exact values (like padding: 3px) on an element, and instead use the classnames your design system provides. Especially in a team where you do not have a dedicated designer I found this very beneficial.

• Having very well-defined defaults. Even though we had some kind of design system in place, we basically just overwrote the colors and defined other font families. Especially in terms of spacing tailwind is a real enhancement to our UIs

Why combine it with styled-components?

Conditional styles

const StyledButton = styled.button`
    ${({ disabled }) => disabled && tw`pointer-events-none bg-opacity-30`}

    svg {
        ${tw`text-gray-300`}
    }
`

Styling child elements

// with twin.macro & styled-components
const StyledButton = styled.button`
    svg {
        ${tw`text-gray-300`}
    }
`

// with plain tailwind, you would need to use React.cloneElement(children) and override the classname
// to achieve the thing above and still would need a bit more complicated logic to only style `svg` children
const Button = (props) => <StyledButton {...props}>{props.children}</StyledButton>

// using the button
const AddButton = () => <Button><AddIcon />Add Todo</Button>
const DeleteButton = () => <Button><DeleteIcon />Add Todo</Button>;

// whereas with plain tailwind, you would have needed to define the classname on the icon itself
const AddButton = () => <Button><AddIcon className="text-gray-300" />Add Todo</Button>
const DeleteButton = () => <Button><DeleteIcon className="text-gray-300" />Add Todo</Button>;

Grouping variants

// without twin.macro
const Button = () => <button className="dark:bg-slate-100 dark:border-slate-200 dark:hover:bg-slate-300" />

// with twin macro
const Button = () => <button className="dark:(bg-slate-100 border-slate-200 hover:bg-slate-300)" />

Downsides of using twin.macro

Issues with styled-components

From my point of view, the general problem with this approach are the efforts you need to apply in maintaining the correct dependency versions, as well as the fear to touch them once you got it running.

Waiting for new tailwind versions

Having a dependency on a build tool within source code

// all tw occurrences will be parsed by the babel macro
const x = styled.div`${tw``}`

<div tw="bg-indigo-100" />

Removing twin.macro

Solving the child element problem

// before with twin.macro & styled-components
const Button = styled.button`
    svg {
        ${tw`text-gray-300`}
    }
`

// with pure tailwind
const Button = ({ children }) => <button className="[&_svg]:text-gray-300">{children}</button>

How to do conditional styling

import classNames from "classnames";

const ButtonWithConditional = ({props}) => {
    return (
    <button className={classNames(
        "text-gray-300",
        { "bg-dark": props.disabled })}>
        Hallo
    </button>)
}