Tailwindcss + WHMCS Email Templates

Marcell · March 20, 2021

Hello,

I am trying to get to work the WHMCS Email templates using Tailwind, but it doesn't recognize the CSS styles for some reason...

Global Email Styling

https://brohosting.hu/mail/mail-styles.css

Client Email Header Content

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style type="text/css">
            [EmailCSS]
        </style>
  </head>        
<body class="bg-gray-100">

Footer is just closing body and html.

Signup WHMCS template.

<div id="packer" class="flex flex-row items-center justify-center w-full">
<div id="body" class="w-full bg-white sm:w-3/4 md:w-2/3 lg:w-2/5 xl:w-1/3">

    <div id="header" class="flex items-center justify-center h-24 bg-gray-600">
        <img src="https://brohosting.hu/img/brh_logo.png" class="w-auto h-20"/>
    </div>

    <div class="m-4">

        <header class="flex justify-between px-2 py-2 ">
            <span class="font-light text-gray-400">Top #1 Web Hosting in Hungary</span>
            <span class="text-gray-400"><a class="underline hover:text-yellow-400" href="#">View in browser</a></span>
        </header>

        <div class="my-4 bg-white">
            Dear {$client_first_name}, 
        </div>

        <div class="mb-4 text-2xl font-light">
            Welcome to <span class="font-semibold">BroHosting</span>!
        </div>
        <div id="userdetails" class="flex flex-row w-full pt-4">
            <div class="flex items-center justify-center w-12 h-12 mr-4 text-gray-500 bg-gray-200"><i class="la la-user la-lg"></i></div>
            <div class="flex flex-col">
                <span>{$client_name}</span>
                <span>{$client_email}</span>
            </div>
        </div>
        
        <div class="flex flex-col items-center justify-center py-4 text-center">
        <button class="px-6 py-3 mt-10 text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Login to Client Area</button>
        
        <h2 class="mt-12 mb-4 text-lg"> Getting Support </h2>
            If you need any help or assistance, you can access our support resources below.
            
            <div class="flex flex-row justify-between mt-8 text-yellow-600">
                <button class="px-6 py-3 text-gray-100 bg-gray-500 focus:outline-none hover:bg-gray-400">Submit a Ticket</button>
            </div>            
        </div>

        <footer class="flex flex-col items-center justify-center px-2 py-2">
            <div id="social" class="flex flex-row my-4 space-x-3">
                <a href="https://www.facebook.com/brohosting" target="_blank"><i class="p-2 text-white bg-blue-600 la la-facebook"></i></a>
                <a href="https://twitter.com/brohosting_int"><i class="p-2 text-white bg-blue-400 la la-twitter"></i></a>
                <a href="https://instagram.com/brohosting" target="_blank"><i class="p-2 text-white bg-red-500 la la-instagram"></i></a>
                <i class="p-2 text-white bg-blue-600 la la-linkedin"></i>
                <a href="https://discord.gg/qcdN2khUXW" target="_blank"><i class="p-2 text-white bg-gray-600 lab la-discord"></i></a>
            </div>
            <span class="text-gray-500">BroHosting Hungary</span>
            <span class="text-gray-400">Magyarország 2671 Őrhalom, Alkotmány út 5</span>
        </footer>

    </div>
</div>
</div>

It works great even inline with just pure browserly, but not in WHMCS, not even before they are sent out. I tried to add it using WITHOUT rich text editor. just to make sure no formatting added.

However, nothing. Any suggestion?

Edited March 20, 2021 by Marcell

yggdrasil · March 20, 2021

What exactly is breaking when the email is sent out? Compare the received email with the original code to see what is different.

Marcell · March 20, 2021

Everything.

It supposed to look like this.

yggdrasil · March 20, 2021

Does it break while saving the template?

Marcell · March 20, 2021

No, generally it doesn't work. I've used previously other templates that worked, but this one I built doesn't. For some reason it appears the CSS is not being applied.

yggdrasil · March 20, 2021

1 hour ago, Marcell said:

No, generally it doesn't work. I've used previously other templates that worked, but this one I built doesn't. For some reason it appears the CSS is not being applied.

That is my question, if this is a problem with the editor. What happens if you save the code directly to the MySQL database? Does it then work?

Marcell · March 21, 2021

No, it doesn't matter actually how do I save it. Now even tried in PhpMyAdmin, but the same results. I also found out that for some reason the classes were removed during the email being sent. But in the actual database, they look like this.

<div id="packer" class="flex flex-row items-center justify-center w-full">
<div id="body" class="w-full bg-white sm:w-3/4 md:w-2/3 lg:w-2/5 xl:w-1/3">
<div id="header" class="flex items-center justify-center h-24 bg-gray-600"><img class="w-auto h-20" src="https://brohosting.hu/img/brh_logo.png" /></div>
<div class="m-4"><header class="flex justify-between px-2 py-2 "><span class="font-light text-gray-400">Top #1 Web Hosting in Hungary</span> <span class="text-gray-400"><a class="underline hover:text-yellow-400" href="#">View in browser</a></span></header>
<div class="my-4 bg-white">Dear {$client_first_name},</div>
<div class="mb-4 text-2xl font-light">Welcome to <span class="font-semibold">BroHosting</span>!</div>
<div id="userdetails" class="flex flex-row w-full pt-4">
<div class="flex items-center justify-center w-12 h-12 mr-4 text-gray-500 bg-gray-200"> </div>
<div class="flex flex-col">{$client_name}{$client_email}</div>
</div>
<div class="flex flex-col items-center justify-center py-4 text-center"><button class="px-6 py-3 mt-10 text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Login to Client Area</button>
<h2 class="mt-12 mb-4 text-lg">Getting Support</h2>
If you need any help or assistance, you can access our support resources below.
<div class="flex flex-row justify-between mt-8 text-yellow-600"><button class="px-6 py-3 text-gray-100 bg-gray-500 focus:outline-none hover:bg-gray-400">Submit a Ticket</button></div>
</div>
<footer class="flex flex-col items-center justify-center px-2 py-2">
<div id="social" class="flex flex-row my-4 space-x-3"> </div>
<span class="text-gray-500">BroHosting Hungary</span> <span class="text-gray-400">Magyarország 2671 Őrhalom, Alkotmány út 5</span></footer></div>
</div>
</div>

Edited March 21, 2021 by Marcell

Marcell · March 21, 2021

Sorry. I was wrong. Here is the full email.

<html lang=3D"en">
  <head>
    <meta charset=3D"utf-8">
    <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1, shrink-to-fit=3Dno">
    <meta name=3D"x-apple-disable-message-reformatting">
    <meta http-equiv=3D"X-UA-Compatible" content=3D"IE=3Dedge">
        <style type=3D"text/css">
            :root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{-webkit-tex=
t-size-adjust:100%}body{margin:0}hr{height:0;color:inherit}abbr[title]{-web=
kit-text-decoration:underline dotted;text-decoration:underline dotted}b,str=
ong{font-weight:bolder}code,kbd,pre,samp{font-size:1em}small{font-size:80%}=
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseli=
ne}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit=
}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;m=
argin:0}button,select{text-transform:none}button{-webkit-appearance:button}=
legend{padding:0}progress{vertical-align:baseline}summary{display:list-item=
}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{backgro=
und-color:transparent;background-image:none}button:focus{outline:dotted 1px=
;outline:-webkit-focus-ring-color auto 5px}fieldset{margin:0;padding:0}ol,u=
l{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-=
ui,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,&quot;Helve=
tica Neue&quot;,Arial,&quot;Noto Sans&quot;,sans-serif,&quot;Apple Color Em=
oji&quot;,&quot;Segoe UI Emoji&quot;,&quot;Segoe UI Symbol&quot;,&quot;Noto=
 Color Emoji&quot;;line-height:1.5}body{font-family:inherit;line-height:inh=
erit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:s=
olid;border-color:#e5e7eb}hr{border-top-width:1px}img{border-style:solid}te=
xtarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{o=
pacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-place=
holder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opa=
city:1;color:#9ca3af}button{cursor:pointer}table{border-collapse:collapse}h=
1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text=
-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-he=
ight:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMon=
o-Regular,Menlo,Monaco,Consolas,&quot;Liberation Mono&quot;,&quot;Courier N=
ew&quot;,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:b=
lock;vertical-align:middle}img,video{max-width:100%;height:auto}.space-x-3&=
gt;:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0=
.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var=
(--tw-space-x-reverse)))}.bg-white{--tw-bg-opacity:1;background-color:rgba(=
255,255,255,var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background=
-color:rgba(243,244,246,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:=
1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.bg-gray-500{--tw=
-bg-opacity:1;background-color:rgba(107,114,128,var(--tw-bg-opacity))}.bg-g=
ray-600{--tw-bg-opacity:1;background-color:rgba(75,85,99,var(--tw-bg-opacit=
y))}.bg-red-500{--tw-bg-opacity:1;background-color:rgba(239,68,68,var(--tw-=
bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgba(96,165,25=
0,var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb=
a(59,130,246,var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;backgroun=
d-color:rgba(37,99,235,var(--tw-bg-opacity))}.hover\:bg-gray-400:hover{--tw=
-bg-opacity:1;background-color:rgba(156,163,175,var(--tw-bg-opacity))}.hove=
r\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgba(96,165,250,var=
(--tw-bg-opacity))}.flex{display:flex}.table{display:table}.flex-row{flex-d=
irection:row}.flex-col{flex-direction:column}.items-center{align-items:cent=
er}.justify-center{justify-content:center}.justify-between{justify-content:=
space-between}.font-light{font-weight:300}.font-semibold{font-weight:600}.h=
-12{height:3rem}.h-20{height:5rem}.h-24{height:6rem}.text-lg{font-size:1.12=
5rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.m-4{m=
argin:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mr-4{margin-right:1rem=
}.mb-4{margin-bottom:1rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.m=
t-12{margin-top:3rem}.focus\:outline-none:focus{outline:transparent solid 2=
px;outline-offset:2px}.p-2{padding:.5rem}.py-2{padding-top:.5rem;padding-bo=
ttom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.=
75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-=
6{padding-left:1.5rem;padding-right:1.5rem}.pt-4{padding-top:1rem}*{--tw-sh=
adow:0 0 #0000;--tw-ring-inset:var(--tw-empty,);--tw-ring-offset-width:0;--=
tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-off=
set-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.text-center{text-align:cen=
ter}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-op=
acity))}.text-gray-100{--tw-text-opacity:1;color:rgba(243,244,246,var(--tw-=
text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,va=
r(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgba(107,114=
,128,var(--tw-text-opacity))}.text-yellow-600{--tw-text-opacity:1;color:rgb=
a(217,119,6,var(--tw-text-opacity))}.hover\:text-yellow-400:hover{--tw-text=
-opacity:1;color:rgba(251,191,36,var(--tw-text-opacity))}.underline{text-de=
coration:underline}.w-12{width:3rem}.w-auto{width:auto}.w-full{width:100%}@=
-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{tran=
sform:rotate(360deg)}}@-webkit-keyframes ping{100%,75%{transform:scale(2);o=
pacity:0}}@keyframes ping{100%,75%{transform:scale(2);opacity:0}}@-webkit-k=
eyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-ke=
yframes bounce{0%,100%{transform:translateY(-25%);-webkit-animation-timing-=
function:cubic-bezier(0.8,0,1,1);animation-timing-function:cubic-bezier(0.8=
,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0=
,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounc=
e{0%,100%{transform:translateY(-25%);-webkit-animation-timing-function:cubi=
c-bezier(0.8,0,1,1);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{t=
ransform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);anim=
ation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\=
:w-3\/4{width:75%}}@media (min-width:768px){.md\:w-2\/3{width:66.666667%}}@=
media (min-width:1024px){.lg\:w-2\/5{width:40%}}@media (min-width:1280px){.=
xl\:w-1\/3{width:33.333333%}}
        </style>
  </head>       =20
<body class=3D"bg-gray-100">
<!-- message header end --><div id=3D"packer" class=3D"flex flex-row items-=
center justify-center w-full">
<div id=3D"body" class=3D"w-full bg-white sm:w-3/4 md:w-2/3 lg:w-2/5 xl:w-1=
/3">
<div id=3D"header" class=3D"flex items-center justify-center h-24 bg-gray-6=
00"><img class=3D"w-auto h-20" src=3D"https://brohosting.hu/img/brh_logo.pn=
g" /></div>
<div class=3D"m-4"><header class=3D"flex justify-between px-2 py-2 "><span =
class=3D"font-light text-gray-400">Top #1 Web Hosting in Hungary</span> <sp=
an class=3D"text-gray-400"><a class=3D"underline hover:text-yellow-400" hre=
f=3D"#">View in browser</a></span></header>
<div class=3D"my-4 bg-white">Dear Marcell,</div>
<div class=3D"mb-4 text-2xl font-light">Welcome to <span class=3D"font-semi=
bold">BroHosting</span>!</div>
<div id=3D"userdetails" class=3D"flex flex-row w-full pt-4">
<div class=3D"flex items-center justify-center w-12 h-12 mr-4 text-gray-500=
 bg-gray-200">=C2=A0</div>
<div class=3D"flex flex-col">Marcell Csendes (Microsoft)csendes.marcell@gma=
il.com</div>
</div>
<div class=3D"flex flex-col items-center justify-center py-4 text-center"><=
button class=3D"px-6 py-3 mt-10 text-white bg-blue-500 focus:outline-none h=
over:bg-blue-400">Login to Client Area</button>
<h2 class=3D"mt-12 mb-4 text-lg">Getting Support</h2>
If you need any help or assistance, you can access our support resources be=
low.
<div class=3D"flex flex-row justify-between mt-8 text-yellow-600"><button c=
lass=3D"px-6 py-3 text-gray-100 bg-gray-500 focus:outline-none hover:bg-gra=
y-400">Submit a Ticket</button></div>
</div>
<footer class=3D"flex flex-col items-center justify-center px-2 py-2">
<div id=3D"social" class=3D"flex flex-row my-4 space-x-3">=C2=A0</div>
<span class=3D"text-gray-500">BroHosting Hungary</span> <span class=3D"text=
-gray-400">Magyarorsz=C3=A1g 2671 =C5=90rhalom, Alkotm=C3=A1ny =C3=BAt 5</s=
pan></footer></div>
</div>
</div><!-- message footer start -->
</body>           =20
</html>

Marcell · March 21, 2021

After more digging, I've unminifed the code back, checked the same thing from the gmail message's email and pasted it into an empty HTML file and it seems to work, but still not for the mails 😞

What is wrong?

Edited March 21, 2021 by Marcell

Marcell · March 21, 2021

One more investigation is that when checking the sent emails in WHMCS they appear well. Now I am more confused if the actual Gmail or Outlook blocks this for some reason.

Marcell · March 21, 2021

Okay, so it is the encoding likely.

yggdrasil · March 21, 2021

Ok, I was going to suggest that. Save directly to the database to avoid any potential issues with the WHMCS WYSIWYG editor.

What you are saying is that when checking with PHPmyAdmin the format is correct? Is that so?

Are you sure this is WHMCS and not your email server? Do you pass emails on a filtering gateway? Some are very picky about HTML and replace specific HTML tags. You said that checking the emails with WHMCS they are fine, how are you checking this?

Only 3 things can mess up your code:

1. WHMCS

2. Your email server

3. The email server of the receiving party

Marcell · March 21, 2021

Hello.

So basically, when checking the client profile and the emails, all looks good, my idea is that the system of the mail server soemhow filters this and removes the whole code.

Because the original message in the headers of the mail is kind of broken, please see the bottom of this post.

Content-Transfer-Encoding: 8bit

Top #1 Web Hosting in Hungary
            #
        

        
            Dear Marcell, 
        

        
            Welcome to BroHosting!
        
        
            
            
                Marcell Csendes (Microsoft)
                csendes.marcell@gmail.com
            
        
        
        
        Login to Client Area
        
         Getting Support 
            If you need any help or assistance, you can access our support resources below.
            
            
                Submit a Ticket
                        
        

        
            
                https://www.facebook.com/brohosting
                https://twitter.com/brohosting_int
                https://instagram.com/brohosting
                
                https://discord.gg/qcdN2khUXW
            
            BroHosting Hungary
            Magyarország 2671 Őrhalom, Alkotmány út 5

--b1_Vhz8KHA7pMwdCVnAo3MxYxikStVVHoW6TZEfMCvg
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

<style>

</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://brohosting.hu/mail/mail-styles.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
</head>        
<body class="bg-gray-100">
<!-- message header end --><div id="packer" class="flex flex-row items-center justify-center w-full">
<div id="body" class="w-full bg-white sm:w-3/4 md:w-2/3 lg:w-2/5 xl:w-1/3">

    <div id="header" class="flex items-center justify-center h-24 bg-gray-600">
        <img src="https://brohosting.hu/img/brh_small.png" class="w-auto h-20"/>
    </div>

    <div class="m-4">

        <header class="flex justify-between px-2 py-2 ">
            <span class="font-light text-gray-400">Top #1 Web Hosting in Hungary</span>
            <span class="text-gray-400"><a class="underline hover:text-yellow-400" href="#">View in browser</a></span>
        </header>

        <div class="my-4 bg-white">
            Dear Marcell, 
        </div>

        <div class="mb-4 text-2xl font-light">
            Welcome to <span class="font-semibold">BroHosting</span>!
        </div>
        <div id="userdetails" class="flex flex-row w-full pt-4">
            <div class="flex items-center justify-center w-12 h-12 mr-4 text-gray-500 bg-gray-200"><i class="la la-user la-lg"></i></div>
            <div class="flex flex-col">
                <span>Marcell Csendes (Microsoft)</span>
                <span>csendes.marcell@gmail.com</span>
            </div>
        </div>
        
        <div class="flex flex-col items-center justify-center py-4 text-center">
        <button class="px-6 py-3 mt-10 text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Login to Client Area</button>
        
        <h2 class="mt-12 mb-4 text-lg"> Getting Support </h2>
            If you need any help or assistance, you can access our support resources below.
            
            <div class="flex flex-row justify-between mt-8 text-yellow-600">
                <button class="px-6 py-3 text-gray-100 bg-gray-500 focus:outline-none hover:bg-gray-400">Submit a Ticket</button>
            </div>            
        </div>

        <footer class="flex flex-col items-center justify-center px-2 py-2">
            <div id="social" class="flex flex-row my-4 space-x-3">
                <a href="https://www.facebook.com/brohosting" target="_blank"><i class="p-2 text-white bg-blue-600 la la-facebook"></i></a>
                <a href="https://twitter.com/brohosting_int"><i class="p-2 text-white bg-blue-400 la la-twitter"></i></a>
                <a href="https://instagram.com/brohosting" target="_blank"><i class="p-2 text-white bg-red-500 la la-instagram"></i></a>
                <i class="p-2 text-white bg-blue-600 la la-linkedin"></i>
                <a href="https://discord.gg/qcdN2khUXW" target="_blank"><i class="p-2 text-white bg-gray-600 lab la-discord"></i></a>
            </div>
            <span class="text-gray-500">BroHosting Hungary</span>
            <span class="text-gray-400">Magyarország 2671 Őrhalom, Alkotmány út 5</span>
        </footer>

    </div>
</div>
</div><!-- message footer start -->
</body>            
</html>

Edited March 21, 2021 by Marcell

Marcell · March 21, 2021

The reciving party and the WHMCS part I think can be disregarded, as it seems both in Outlook and Gmail its plain text, pretty sure somehow its filtered by mail servers.

Marcell · March 21, 2021

Just checked the email headers more and can confirm the email is sent as plain text, but below there is the HTML... I am kinda lost. Pretty sure either the spam filter causing this or something else. I might have to change the host, because unfortunately they don't support external Mail Servers using SMTP.

yggdrasil · March 21, 2021

It seems to me that something is adding 3D tags to your code. What spam filter are you running? Normally, you don't filter outgoing emails unless you have tons of users and cannot manage them and need to protect your IP/server reputation.

Its ok to filter outgoing emails for customers, but if you are in control of your own server or mail server, you should only filtering incoming email.

Do you run your own mail server or are you using some specific provider? If you see the content fine on WHMCS while viewing the emails, it means WHMCS is not doing this. Its something else that is modifying the code. As you said, I do suspect your email filter or email server.

Marcell · March 21, 2021

the 3D tags are only for Gmail, but I already sorted that out that was related to encoding, check the new email headers please.

https://pastebin.com/hHpNrsBB

Somewhat off is that the message is being sent as plain text.

The only option I have left is to try out using my own server.

Marcell · March 21, 2021

Okay, the same issue happens on other server using the same code. Can you perhaps test the same code on your end?

Edited March 21, 2021 by Marcell

Marcell · March 21, 2021

Confirmed, looks like the specific codes are not supported within the email clients.

yggdrasil · March 21, 2021

40 minutes ago, Marcell said:

Confirmed, looks like the specific codes are not supported within the email clients.

Well, if you are using regular website HTML code, then you are correct, this will not work. HTML on email clients is very basic. Not all tags are supported for security reasons. Most mail filters will also remove tags they consider dangerous.

It seems to me your HTML code is not valid for emails. Take a look here to check all the issues:

https://www.htmlemailcheck.com/check/

Marcell · March 21, 2021

I will just use a theme I purchased way back, it's working great in WHMCS.

Tailwindcss + WHMCS Email Templates

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Important Information