7 ms·

A Set of TailwindCSS Based Transactional HTML Email Templates

minroot 5y ago
Please no.
- albertgoeswoof 5y ago
  Could you elaborate a bit more on your objections?
  - 0xdeadb00f 5y ago
    Here's my guess either a. Don't like tailwind; or b. Don't like non-plaintext emails
    - minroot 5y ago
      Yeah, Plain text email.
crispyporkbites 5y ago
Tailwind is popping up everywhere these days. I’m sold on it, but it seems a large number of people really don’t like it…
- hunterb123 5y ago
  <td class="p-48 sm:py-32 sm:px-24 text-center"> That's source code from the project. Tailwind is just inline styles via CSS shorthand classes. I cannot understand why anyone would want this unless they are coming from bootstrap. Tailwind is unreadable when glancing through source code, especially when styles get large. It's just a web fad.
  - alunchbox 5y ago
    It's a different mentally. From tailwinds landing page it explains the reasoning. A big one is that you don't have to think about abstractions or relationships between classes. But instead think in terms of utility and really making it a language of it's own right. I was hesitant but gave it a go. It was quite enjoyable and productive. There's also the @apply which enabled you to still remove the duplication or build your own utilities on top of their skeleton. Don't knock it till you try it!
    - hunterb123 5y ago
      I have tried it, but I don't prefer it. 1. Yes it's almost another language, you have to memorize shorthand syntax that is sometimes unintuitive. 2. I need something cross-platform, not a web specific tool. I've moved to RN Stylesheets for both native and web and I don't deal with normal CSS at all. 3. I don't have a problem naming classes, I find it helps maintaining later at the cost of slightly more time upfront. Plus you can compose multiple classes based on states. You can also reuse those classes within the same component. Seems difficult to do that if you inline things. If I did want to skip naming I would use something like JSXStyle/SnackUI instead of Tailwind (direct props, not shorthand strings). Tailwind is great for web designers wanting to iterate a design quickly, that's about it. I feel you pay for it later though. It's ugly and unreadable at a glance. We just circled back to inline styles.
  - ookblah 5y ago
    padding 48, on small screens vertical padding 32 and horizontal padding 24, center styled? try doing that inline.... i always see this and never understand the pushback, or have people never worked on large apps spanning hundreds/thousands of components and have to maintain it. it's a godsend when working on older components and i don't have to dig thru some other css file and figure out exactly how and why i named it. inline css doesn't allow to do transitions, animations, responsive breakpoints, etc. everything is there is contextual and i never break flow going from design to implementation. you still can have global styles or can have a master design guide.
    - 5y ago
- beckler 5y ago
  I enjoy it. My only complaint is that it heavily relies on node. I’d switch to Tachyons, but I already know the tailwind syntax pretty well.
joelkesler 5y ago
How do these templates handle email forwarding? When many email clients forward an email, all styles in the document head are removed, which breaks emails that have not inlined their styles. How does these templates handle responsiveness? Handling responsiveness and still looking good in MSOutlook can be tricky. Have these been tested using Litmus? I did not see any images of these templates in email clients. I have done a bunch of work on emails, and found that building html emails that look good and render well on all popular email clients while staying responsive is tricky
midrus 5y ago
Has anyone tried PrimeFlex [1]? I was thinking on using it for a side project, in combination with PrimeVue[2]. Any experience with it? [1] https://www.primefaces.org/primeflex/ https://www.primefaces.org/primeflex/ [2] https://www.primefaces.org/primevue/ https://www.primefaces.org/primevue/

Please no.

albertgoeswoof 5y ago
Could you elaborate a bit more on your objections?
- 0xdeadb00f 5y ago
  Here's my guess either a. Don't like tailwind; or b. Don't like non-plaintext emails
  - minroot 5y ago
    Yeah, Plain text email.

Tailwind is popping up everywhere these days. I’m sold on it, but it seems a large number of people really don’t like it…

hunterb123 5y ago
<td class="p-48 sm:py-32 sm:px-24 text-center"> That's source code from the project. Tailwind is just inline styles via CSS shorthand classes. I cannot understand why anyone would want this unless they are coming from bootstrap. Tailwind is unreadable when glancing through source code, especially when styles get large. It's just a web fad.
- alunchbox 5y ago
  It's a different mentally. From tailwinds landing page it explains the reasoning. A big one is that you don't have to think about abstractions or relationships between classes. But instead think in terms of utility and really making it a language of it's own right. I was hesitant but gave it a go. It was quite enjoyable and productive. There's also the @apply which enabled you to still remove the duplication or build your own utilities on top of their skeleton. Don't knock it till you try it!
  - hunterb123 5y ago
    I have tried it, but I don't prefer it. 1. Yes it's almost another language, you have to memorize shorthand syntax that is sometimes unintuitive. 2. I need something cross-platform, not a web specific tool. I've moved to RN Stylesheets for both native and web and I don't deal with normal CSS at all. 3. I don't have a problem naming classes, I find it helps maintaining later at the cost of slightly more time upfront. Plus you can compose multiple classes based on states. You can also reuse those classes within the same component. Seems difficult to do that if you inline things. If I did want to skip naming I would use something like JSXStyle/SnackUI instead of Tailwind (direct props, not shorthand strings). Tailwind is great for web designers wanting to iterate a design quickly, that's about it. I feel you pay for it later though. It's ugly and unreadable at a glance. We just circled back to inline styles.
- ookblah 5y ago
  padding 48, on small screens vertical padding 32 and horizontal padding 24, center styled? try doing that inline.... i always see this and never understand the pushback, or have people never worked on large apps spanning hundreds/thousands of components and have to maintain it. it's a godsend when working on older components and i don't have to dig thru some other css file and figure out exactly how and why i named it. inline css doesn't allow to do transitions, animations, responsive breakpoints, etc. everything is there is contextual and i never break flow going from design to implementation. you still can have global styles or can have a master design guide.
  - 5y ago
beckler 5y ago
I enjoy it. My only complaint is that it heavily relies on node. I’d switch to Tachyons, but I already know the tailwind syntax pretty well.

joelkesler 5y ago

How do these templates handle email forwarding? When many email clients forward an email, all styles in the document head are removed, which breaks emails that have not inlined their styles. How does these templates handle responsiveness? Handling responsiveness and still looking good in MSOutlook can be tricky. Have these been tested using Litmus? I did not see any images of these templates in email clients. I have done a bunch of work on emails, and found that building html emails that look good and render well on all popular email clients while staying responsive is tricky

midrus 5y ago

Has anyone tried PrimeFlex [1]? I was thinking on using it for a side project, in combination with PrimeVue[2]. Any experience with it? [1] https://www.primefaces.org/primeflex/ https://www.primefaces.org/primeflex/ [2] https://www.primefaces.org/primevue/ https://www.primefaces.org/primevue/