Confusion about integrating with PostCSS and IE11 support (custom properties)

[remnantdotdev]

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';

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 :|

EDIT:
Oh btw, the line ['postcss-custom-properties', { preserve: false }] appears to not be doing anything

EDIT 2:
Tailwind docs have been updated, only partial support for ie11.

[cerinoligutom]

Hey, did you manage to get this working?

I wasted quite some hours trying to make postcss-custom-properties the way I would expect it to work. That plugin only works on css variables declared on :root.

See this issue. I created a PR that hopefully gets merged so as to save others time.

The other plugin even points this out:

Which brings me to the next plugin that you might want to look at which is postcss-css-variables but the caveats is a deal breaker for me. Might be okay for your use case. Probably.

From this, I'd probably say Tailwind is great for modern browsers, but if you see your project supporting old browsers at some point in the future, you might want to review all the PostCSS plugins available that you might need.

[remnantdotdev]

I haven't yet, just tried those plugins in all of their various implementations and still can't get this thing to budge. Thanks for the insight! I'll post here if I find out anything.

[remnantdotdev]

@cerino-ligutom just in case you missed it :)

[adamwathan]

If you need to support older browsers, polyfills won't be enough to make things like custom properties or CSS grid work. Better to just not use those features of Tailwind.

[remnantdotdev]

Thanks for updating the docs! We'll keep that in mind

[AlexSwtlsk]

Hey @adamwathan,
Would you have an example of how to not use those features but still use tailwind 2.0 with older browsers ?

[adamwathan]

Hey! Tailwind 2.0+ doesn't support older browsers period, you'll have to use v1.x if you need to support older browsers.