feat: load tailwind from config

Flowko · Flowko · commit af3f9751f53e · 2024-02-01T18:55:16.000+01:00
diff --git a/playground/src/components/Test.vue b/playground/src/components/Test.vue
@@ -43,7 +43,7 @@ const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
         </EStyle>
       </EHead>
       <EPreview>{{ previewText }}</EPreview>
-      <EBody class="bg-white my-auto mx-auto font-sans">
+      <EBody class="bg-primary my-auto mx-auto font-sans">
         <EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-20 rounded my-[40px] mx-auto max-w-[465px]">
           <ESection class="mt-[32px] pager">
             <EImg src="/static/vercel-logo.png" width="40" height="37" alt="Vercel" class="my-0 mx-auto" />
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -6,6 +6,16 @@ const app = createApp(App)
 
 app.use(VueEmailPlugin, {
   baseUrl: 'https://vue-email-demo.vercel.app/',
+  tailwind: {
+    theme: {
+      extend: {
+        colors: {
+          primary: '#ea580c',
+          secondary: '#ca8a04',
+        },
+      },
+    },
+  },
 })
 
 app.mount('#app')
diff --git a/playground/tailwind.config.ts b/playground/tailwind.config.ts
@@ -2,7 +2,12 @@
 export default {
   content: [],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#ea580c',
+        secondary: '#ca8a04',
+      },
+    },
   },
   plugins: [],
 }
diff --git a/src/components/ETailwind.ts b/src/components/ETailwind.ts
@@ -6,6 +6,7 @@ import * as domutils from 'domutils'
 import render from 'dom-serializer'
 import type { TailwindConfig } from '@vue-email/tailwind'
 import { escapeClassName, getCssForMarkup, getStylesPerClassMap, minifyCss, useRgbNonSpacedSyntax } from '@vue-email/tailwind'
+import { config } from '../config'
 
 export default defineComponent({
   name: 'ETailwind',
@@ -23,8 +24,10 @@ export default defineComponent({
     let headStyles: string[] = []
     const markupWithTailwindClasses = await renderToString(h('div', $default)).then(html => html.replace(/^<div[^>]*>|<\/div>$/g, ''))
 
+    const tailwindConfig = props.config || config.tailwind
+
     const markupCSS = useRgbNonSpacedSyntax(
-      await getCssForMarkup(markupWithTailwindClasses, props.config as TailwindConfig),
+      await getCssForMarkup(markupWithTailwindClasses, tailwindConfig),
     )
 
     const nonMediaQueryCSS = markupCSS.replaceAll(
diff --git a/src/types/compiler.ts b/src/types/compiler.ts
@@ -1,3 +1,5 @@
+import type { TailwindConfig } from '@vue-email/tailwind'
+
 export interface VueEmailPluginOptions {
   /**
    * The base URL of your website.
@@ -14,6 +16,7 @@ export interface VueEmailPluginOptions {
    * @see
    */
   i18n?: I18n
+  tailwind?: TailwindConfig
   [key: string]: any
 }
 
