aleph.js icon indicating copy to clipboard operation
aleph.js copied to clipboard

Will aleph support twin.macro in upcoming version?

Open leopku opened this issue 4 years ago • 3 comments
trafficstars

I'm working with taildwind and twin.macro to build re-usable components easily.

Will aleph support twin.macro or something like emotion or styled-components etc to make component building easier in upcoming version?

Or there are better way to build re-usable components by tailwind and aleph?

leopku avatar Dec 20 '20 07:12 leopku

Kind of ties in with #42. I don't think there are any CSS-in-JS libraries which support Aleph or Deno, mainly because to become faster they have their own Babel plugin, but Aleph/Deno uses swc.

shadowtime2000 avatar Dec 20 '20 07:12 shadowtime2000

@leopku i want to support styled-component in the future, and next release will support inline-style out-of-the-box:

export default function App() {
  return (
    <>
      <h1>Hello World</h1>
      <style>{`
        h1 {
          color: #d63369;
        }
      `}</style>
    </>
  )
}

but it is hard to support babel-macro since we dont' use the babel transformer.

ije avatar Dec 20 '20 08:12 ije

@shadowtime2000 @ije Thanks.

I had many components building and composing with class names from tailwindcss, for example:

const btnBase = css`$tw{inline-flex py-3 px-5 rounded-lg items-center focus:outline-none}`;
const btnPrimary = css`$tw{bg-indigo-500 text-white}`;

Maybe I should find another way to build reusable component using tailwindcss.

leopku avatar Dec 20 '20 12:12 leopku