Tailwind classes space-x or space-y not working in IE 11

user_10245695 0
Viewed 786

I am using tailwind version 1.4.6 in one of my projects and have found that using the classes space-x and space-y are not working in IE 11.

I have read through the docs and have found to install postcss-custom-properties to help support some of their features for IE 11. I have done this and have included it within my plugins (below is a snippet of what plugins which are imported)

Tailwind mentioned here for IE support https://v1.tailwindcss.com/docs/using-with-preprocessors#variables

plugins: [
    require("@tailwindcss/custom-forms"),
    require('postcss-nested'),
    require('postcss-custom-properties'),
]

Is there something I am missing as to why this isnt working?

postcss tailwind-css
1 Answers

You need to explicitly set the target in your tailwind config file to ie11. The default target is relaxed. It seems like a good idea to selectively target ie11 for the space plugin, reading through comments on this PR.

Add this to your tailwind.config.js:

{
  target: [
    'relaxed',
    {
      space: 'ie11'
    }
  ]
}

The space utility plugin uses local css variables when the default relaxed target is set, which is not supported in IE11 and postcss-custom-properties (only applies to css variables defined in the :root selector):

Demonstrating css styles applied to space utility class

This local variable implementation will be replaced when targeting ie11. As such, keep in mind that space-x-reverse and space-y-reverse utilities will not work.

user_77762680
Related