Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Tailwind CSS generator to accept parameters through an object #890

Merged
merged 1 commit into from Feb 5, 2023

Conversation

cossssmin
Copy link
Member

@cossssmin cossssmin commented Feb 4, 2023

This PR refactors the Tailwind CSS generator function to accept a single object as a parameter, fixing a bug where your custom Tailwind config object was not being used when rendering emails through the Maizzle API.

To give an example, the following would have generated bg-emerald-200 as #a7f3d0 instead of emerald like defined in the custom Tailwind config object passed to the render function:

const Maizzle = require('@maizzle/framework')

let template = `---
title: 'Hello World'
---

<x-main>
  <fill:template>
    <div class="bg-emerald-200">
		Sample
	</div>
  </fill:template>
</x-main>
`

const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        emerald: {
          200: 'emerald',
        },
      },
    },
  },
  corePlugins: {
    preflight: false,
    backgroundOpacity: false,
  },
}

async function main() {
  const { html } = await Maizzle.render(template, {
    maizzle: {
      inlineCSS: true,
      removeUnusedCSS: true,
    },
    tailwind: {
      config: tailwindConfig
    },
  })

  console.log(html)
}

main()

@cossssmin cossssmin merged commit 4ba34ae into next Feb 5, 2023
@cossssmin cossssmin deleted the tailwind-render branch February 5, 2023 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant