next.jspostcsstailwind-cssautoprefixercustom-properties

TailwindCSS + NextJS: Integrating with PostCSS and IE11 support (custom properties)

According to the docs, tailwind states it supports ie11.

...yet it uses custom properties that are not supported by ie11.

We're attempting to use this in a minimal nextjs project with the following postcss.config.js:

module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'autoprefixer',
    ['postcss-custom-properties', { preserve: false }]
  ]
};

The only css file we're importing:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

The line ['postcss-custom-properties', { preserve: false }] appears to not be doing anything. Both with the defaults and that one.

Obviously, since ie 11 doesn't support custom properties, stuff like the transform utility are completely ignored.

Anyone have any suggestions for this? I've been spending way too much time on trying to get this to work :|

Solution

  • I'm still experimenting which is the best value but the target attribute in your postcss.config.js is the responsible, set it to ie11 and all the custom css properties will be removed.

    The target property isn't documented but I've found this issue explaining the situation. If you are using browserlist, try using

    module.exports = {
  target: 'browserslist',
}