How can I remove the @layer properties syntax from the output CSS file in v4?

[ranwawa]

The @layer properties syntax is not supported in some environments, such as WeChat mini apps.

I cannot find any configuration documentation for v4, so I have no idea how to solve this problem.

Generated CSS:

/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}

And escaped selector syntax:

.active\:translate-y-1:active {
  --tw-translate-y: calc(var(--spacing) * 1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.active\:shadow-md:active {
  --tw-shadow: 0 8rpx 12rpx -2rpx var(--tw-shadow-color, #0000001a), 0 4rpx 8rpx -8rpx var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[wongjn]

If you're running Tailwind CSS as a PostCSS plugin, you could consider having a (custom) PostCSS plugin that runs after Tailwind CSS that converts the syntax to something compatible. Otherwise, you'd still have to run some sort of processor after Tailwind's compilation.

[rozsazoltan]

The reason you can’t find a configuration is because v4 targets Baseline 2023 (see: https://tailwindcss.com/docs/compatibility), where this is available by default. As wongjn mentioned, use TailwindCSS in PostCSS and write a custom PostCSS plugin to remove @layer and @property, something like this:

• Convert TailwindCSS to native CSS? (Although the answer isn't primarily written for you, it does include plugins of this type that I've written previously.)

Highlighting the key point, you need to do something like this:

• https://tailwindcss.com/docs/installation/using-postcss

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

import tailwindcss from "@tailwindcss/postcss"

// Custom PostCSS plugin to remove `@layer` rules but keep the CSS inside
const removeLayerRules = (root) => {
  root.walkAtRules('layer', (rule) => {
    rule.replaceWith(rule.nodes);
  });
};

// Custom PostCSS plugin to remove `@property` rules
const removePropertyRules = (root) => {
  root.walkAtRules('property', (rule) => {
    rule.remove();
  });
};

// Custom PostCSS plugin to remove `@supports` rules (handle nested)
const removeSupportsRules = (root) => {
  let hasSupports = true;

  while (hasSupports) {
    hasSupports = false;

    root.walkAtRules('supports', (rule) => {
      hasSupports = true;
      rule.replaceWith(rule.nodes);
    });
  }
};

export default {
  plugins: [
    tailwindcss({
      optimize: true, /* can set it to false if, for some reason, you don't want a minified output */
    }),
    removeLayerRules,
    removePropertyRules,
    removeSupportsRules,
  ]
}

[rozsazoltan]

Or you could also look at Preflight - @import "tailwindcss"; uses this by default.

• https://tailwindcss.com/docs/preflight#overview

If you import it manually, you can skip the layers:

@import "tailwindcss/theme.css";
@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css";

But unfortunately, @layer may still appear in the generated CSS even this way.