Passthrough Tailwind @apply directive?

[wjrogers]

I'm experimenting with vanilla extract in Next.js, and I'd like to try using vanilla extract to style shared components and Tailwind for theming, tweaks, and fine-tuning. (I also find the simplicity of e.g. "shadow ring-1 ring-black" much more pleasant than raw CSS.)

It seems like vanilla's output gets processed by PostCSS because Tailwind's theme() function works. But I can't find a way to use @apply in a vanilla extract style. Is it possible to pass a raw string through to the CSS output?

[wjrogers]

I came up with a round-about way to do this: a PostCSS plugin that transforms a special style declaration into an @apply directive at build time:

/**
 * @type {import('postcss').PluginCreator}
 */
module.exports = (opts = {}) => {
  // Work with options here

  return {
    postcssPlugin: "postcss-tailwind-apply",
    // the Declaration callback doesn't work because Tailwind uses Once, which causes an ordering problem
    Once(root, postcss) {
      root.walkDecls("--tw-apply", (decl) => {
        decl.replaceWith(
          postcss.atRule({ name: "apply", params: decl.value, source: decl.source })
        );
      });
    },
  };
};

module.exports.postcss = true;

import type * as CSS from "csstype";

declare module "csstype" {
  interface Properties {
    /**
     * A list of Tailwind CSS class names. Will be transformed into an '@apply' directive by PostCSS.
     * @remarks
     * This provides a way to use Tailwind CSS classes in build-time CSS-in-JS styles that don't
     * support arbitrary 'at' rules.
     * @see https://tailwindcss.com/docs/functions-and-directives#apply
     */
    "--tw-apply"?: string;
  }
}

import { style } from "@vanilla-extract/css";

export const root = style({
  borderRadius: "theme(borderRadius.lg)",
  "--tw-apply": "overflow-hidden shadow ring-1 ring-black ring-opacity-5",
});