Q: Why is emotion necessary with CRA?

The top of the readme there is the following simple way which is absolutely amazing at a first sight.

import tw from 'twin.macro'

const default () => <input tw="border hover:border-black" />

Furthermore, there is also this sentence which would give me the impression that without conditionals I can use macro only.

For features like conditional styling and vanilla css, Twin works with styling libraries like 👩‍🎤 emotion or 💅 styled-components

Unfortunately, when I try that in a clean CRA project, the output I get is like this and that’s where the magical feeling is kinda lost.

<input css="[object Object]" />

To make that work I have to include this ceremony in each file that needs some styling.

/** @jsx jsx */
import { jsx } from '@emotion/core'
import tw from 'twin.macro'

Is there some better way I am simply not seeing?

[danielkcz]

Thanks for the recommendation, but I am not a big fan of abstracting every little piece into a separate component. Ultimately, it creates a bigger mess than it solves imo. Of course, it makes sense for some frequently used parts, no argument there.

Consider this example I found somewhere around here. If I would be doing tw.div for each one of them then I am kinda losing a big benefit of TW - coming up with clever names for styled pieces of markup. So yea, in cases like that I would rather have two unused imports than bunch of styled components.

    <div tw="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl">
      <div tw="ml-6 pt-1">
        <h1 tw="text-2xl text-blue-700 leading-tight">
          Tailwind and Create React App
        </h1>
        <p tw="text-base text-gray-700 leading-normal">
          Building apps together
        </p>
      </div>
    </div>

Maybe it’s even better to have common parts in TW config, I am not that much experienced with TW yet to decide on that.

Feel free to close this unless you want to use this issue to track docs improvement.

[ben-rogerson]

I remember hitting this at one stage too. I’ll take a look at what’s possible when I’m working on the macro next 👍