Tailwind CSS plugin to add variants (css hacks) for IE10+
npm install tailwind-ie-variantTailwind CSS plugin to add variants (css hacks) for IE10+
``sh`
npm install tailwind-ie-variant --save-dev
Add the plugin to your tailwind.config.js:
`js
const tailwindIeVariant = require('tailwind-ie-variant');
module.exports = {
// ...
plugins: [tailwindIeVariant()],
};
`
`html`Only IE10+ see me
As a tailwind plugin the plugin is working partially, only first level variants will work,
e.g. ie:block.@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
There is an issue with other tailwind variants,
since css hack is used,sm:ie:block
the result is nested media queries wich is not supported in IE,
so will not work.
Input:
`css`
@variants ie {
.example {
font-family: 'Comic Sans';
}
}
Output:
`css
.example {
font-family: 'Comic Sans';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ie:example {
font-family: 'Comic Sans';
}
}
``