1 of 2

Compile email-inline.less not working

I created a header.html located in the app/design/frontend/<VENDOR>/<MODULE>/Magento_Email/email/header.html not within this header.html I added a div tag that has a class of custom-border.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}
        {{css file="css/email.css"}}
    </style>
</head>
<body>
    {{inlinecss file="css/email-inline.css"}}
    <h1 class="custom-border">Custom Border div here</h1> <!-- newly added -->
    <!-- Begin wrapper table -->

Now I also have an email-inline.less located in app/design/frontend/<VENDOR>/<MODULE>/Magento_Email/web/css/email-inline.css. Within this file I have defined the code as shown below

.custom-border {
    border: 10px solid green;
    color: red;
}

Now I went to the Magento Admin under Marketing->Communication->Email Templates and I added a new header by selecting my Custom Header as my Load Default Template. After I load the template it indeed show the header.html that I created. Now when I save this new header template I created in the admin then clicking the preview button the style that has a selector of .custom-border is not taking effect.

What am I missing? I already cleared cache, deleted generated and pub/static folder. Deploy static-content. But still the email-inline.less changes does not take effect.

Any idea guys?