Getting Started

Install dependencies in the starter directory:

cd starter && npm install

Build the email

npm run build

Issues

This is a list of issues that we need to figure out in order to get Tailwind CSS v4 working in Maizzle.

TL;DR:

• Resolving CSS variables
• Remove :root and @keyframes
• Unsupported CSS properties
  • calc()
  • oklch()
  • padding-inline and margin-inline
  • @media (hover: hover)
• Combine media queries

Resolving CSS variables

STATUS: fixed upstream in Tailwind, works now.

Not sure why this isn't working with either postcss-custom-properties or postcss-css-variables:

import posthtmlPostcss from 'posthtml-postcss'
import tailwindcss from '@tailwindcss/postcss'
import postcssSafeParser from 'postcss-safe-parser'
import customProperties from 'postcss-custom-properties'
import cssVariables from 'postcss-css-variables'

/**
 * posthtml-postcss is a PostHTML plugin that parses 
 * the contents of `<style>` tags using PostCSS.
 */
posthtmlPostcss(
    [
      tailwindcss(),
      customProperties(), // doesn't work, CSS variables are not resolved
      // cssVariables(), // doesn't work either
    ],
    {
        from: config.cwd || './', // config.cwd is the project root, tracked internally by Maizzle
        parser: postcssSafeParser
    }
  )

:root and @keyframes

STATUS: fixed by not importing @tailwindcss/theme in the preset.

The output contains :root and @keyframes CSS rules, which we need to remove.

@keyframes looks like it's injected by @tailwindcss/theme too, need to find a way to remove/disable it in that layer.

Unsupported CSS properties

STATUS: fixed by using LightningCSS to lower the CSS syntax level.

The following CSS properties are used in v4, btu they have very poor support in email clients.

Note: will be adding to this list as we find more.

• calc()
• oklch()
• padding-inline
• margin-inline
• @media (hover: hover)

calc()

STATUS: already fixed in Maizzle 5, calc() is now supported.

Utilities like padding have started using calc() in v4, which is not supported in email clients. We'll need to find a way to output values from the spacing scale (which we set to px values), as in v3.

oklch()

We'll just convert them statically once to HEX and use those values in the preset. Alternatively can just use the v3 colors too.

padding-inline and margin-inline

STATUS: fixed by using LightningCSS to lower the CSS syntax level.

For these I think we'll be able to do custom plugins that output the old values, but we'll need to be able to disable the new ones, possibly through corePlugins (which doesn't work right now).

@media (hover: hover)

STATUS: fixed by using LightningCSS to lower the CSS syntax level.

While this can be disabled with a custom variant like @variant hover (&:hover);, it looks like the output of that is:

.hover\:bg-red-200 {
  &:hover {
    background-color: var(--color-red-200);
  }
}

That won't work in email, we need the classic pseudo selector:

.hover\:bg-red-200:hover {
  background-color: var(--color-red-200);
}

Combine media queries

STATUS: fixed by using postcss-sort-media-queries.