[v4] How to disable text-decoration-line utilities?

[cossssmin]

Because text-decoration-line is poorly supported by email clients, I need to make Tailwind output the old value:

.underline {
-  text-decoration-line: underline;
+  text-decoration: underline;
}

However, I couldn't find any way to do it with the CSS configuration, these don't work:

--text-decoration-*: initial;
--decoration-*: initial;

I suppose those vars aren't set anywhere, any plans on allowing customization here?

[adamwathan]

Hey! No way to do this sort of thing right now unfortunately. I'm not sure what Maizzle's internal integration with Tailwind looks like but my hope in terms of a plan for v4 was that people who need to do this degree of customization could work with lower-level Node APIs we expose where you can configure Tailwind entirely from scratch with your own set of utilities. That way you could take the default utilities you do want to use, override the ones you don't, and pass that set of utilities into the internal engine to do a build.

Pseudo-code but something like:

let utilities = new Utilities();

utilities.static('underline', () => {
  return [
    decl('text-decoration', 'underline')
  ];
});

let compiledCSS = await tailwind(inputCss, utilities, variants);

I don't really want to make it super "easy" or common for people to do deep customizations like this to the framework as regular end users, but for tools like Maizzle that are almost an entirely separate tool that's powered by Tailwind under the hood, it would be nice if you could configure it this deeply if you are working with the raw Node APIs.

Does this approach seem like it would work for you?

[cossssmin]

A Node API would surely be of great use for frameworks etc. but I don't think I'd use it in Maizzle since I just want to stick to the PostCSS pipeline that we have now. Which means it might be better if I just do a custom PostCSS plugin that runs after Tailwind and lowers some of the unsupported/modern syntax output in v4. Btw this reminds me of Lightning CSS in @tailwindcss/postcss, added a discussion.

So the way it works in Maizzle 5 is that I use posthtml-postcss to compile the contents of every <style> tag in a HTML string with PostCSS, applying tailwindcss() (+ a few other plugins after it, currently broken in v4 with @tailwindcss/postcss - #15138):

// Tailwind CSS v3 in Maizzle 5 is registered as a PostCSS plugin as part of a PostHTML plugin
const postcssPlugin = posthtmlPostcss(
  [
    postcssImport(),
    tailwindcss(),
    cssVariables(),
    postcssCalc(),
    ...get(config, 'postcss.plugins', []),
  ],
  {
    from: config.cwd || './',
    parser: postcssSafeParser
  }
)

return posthtml([
  postcssPlugin,
  componentsPlugin,
  // etc.
])
  .process(html, posthtmlOptions)
  .then(result => ({
    config: merge(config, { page: config }),
    html: result.html,
  }))

And then the user is free to use Tailwind as they like:

<!-- Tailwind CSS v3 in Maizzle 5 -->
<style>
  @tailwind components;
  @tailwind utilities;

  img {
    @apply max-w-full align-middle;
  }
</style>

This is super nice for users since they have full control over what's output in any <style> tag they write - they can choose to use Tailwind in one, but have another where they write some email-client targeting hacks and don't use any utilities (I'll argue this level of freedom is very important in email dev).

In the past we did use to compile Tailwind and provide it as a 🤢 variable like {{ page.css }} you could place in a style tag, but after using v5 in real-life projects for the past months this is waaay better.

Now for v4, after you suggested it and it finally clicked for me that the JS config could just drop ☠️, I adopted the CSS config and started @maizzle/tailwindcss which just exports a CSS file users can import and override in their <style> blocks:

<!-- Tailwind CSS v4 in Maizzle 🤞 -->
<style>
  @import "@maizzle/tailwindcss";
</style>

And it's in there that I was hoping we could do all the customization for Tailwind, including stuff like disabling namespaces to replace with more email-client friendly output, so that users can just import it and override it as needed, where needed.

I totally understand not wanting to open up things like this for everyone, I'll adapt to whatever you guys decide 👍