Tailwind not working - Githubissues

shellscape / jsx-email

Build emails with a delightful DX

https://jsx.email

MIT License

902 stars 28 forks source link

Tailwind not working #67

Closed sysmat closed 8 months ago

sysmat commented 8 months ago

Component or Package Name: @jsx-email/tailwind
Component or Package Version: ^3.0.0
@jsxp-email/cli Version?: ^2.0.0
Operating System (or Browser): Win 11, Chrome Version 119.0.6045.106
Node Version: v18.18.2
Link to reproduction (⚠️ read below):

Expected Behavior

to render taillwind button in browser

Actual Behavior

not rendered in browser

Additional Information

using documentation from https://jsx.email/docs/components/tailwind

import { Button } from '@jsx-email/button';
import { Tailwind } from '@jsx-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291'
            }
          }
        }
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

problem is with import { Tailwind } from '@jsx-email/tailwind';
solution importing it from '@jsx-email/all'
example in doc is also wrong const Email must be export const Template

shellscape commented 8 months ago

Please add a reproduction. The issue template is very clear about that being required. Without one, we can't help fix your issue.

sysmat commented 8 months ago

jsx-email.zip

shellscape commented 8 months ago

Id really like to help you, but please read instructions. This is what our template says:

🚨 Issues WITHOUT a valid reproduction WILL BE CLOSED!

Please provide one by:

Using the StackBlitz reproduction template at https://stackblitz.com/fork/jsx-email-repro

Provide a minimal repository link (Read https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff for instructions). Please use NPM for installing dependencies! These may take more time to triage than the other options.

⚠️ ZIP Files are unsafe and maintainers will NOT download them

sysmat commented 8 months ago

https://stackblitz.com/edit/jsx-email-repro-ipi7ah?file=package.json

shellscape commented 8 months ago

Thanks, looking into it. In the meantime, a workaround is to use the Html,Head, andBody` components like this:

<Html>
  <Head>
  <Body>
    <Tailwind>

example in doc is also wrong

It's not "wrong," because the example just shows assignment. It's an example, but it's not meant to be the exact code everyone should use in all places. Someone could use the code in the example docs directly with @jsx-email/render for instance.

shellscape commented 8 months ago

The twind project is an absolute mess, and there were some blind spots that I didn't see putting that together (even though it passed all of our tests). Please use v2.4.4 for now, or if you have basic tailwind needs you can use v3.0.0. A proper fix will take a while longer.

shellscape commented 8 months ago

I merged this fix and v3.0.1 will be published shortly. If you run into any more problems, downgrade to 2.4.4. It's slower, but will probably resolve any issues you run into.