tailwind-ie-variant

Tailwind CSS plugin to add variants (css hacks) for IE10+

Install

npm install tailwind-ie-variant --save-dev

Add the plugin to your tailwind.config.js:

const tailwindIeVariant = require('tailwind-ie-variant');

module.exports = {
    // ...
    plugins: [tailwindIeVariant()],
};

Usage

<div class="hidden ie:block">Only IE10+ see me</div>

As a tailwind plugin the plugin is working partially, only first level variants will work, e.g. ie:block. There is an issue with other tailwind variants, since css hack @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) is used, the result is nested media queries wich is not supported in IE, so sm:ie:block will not work.

Example

Input:

@variants ie {
    .example {
        font-family: 'Comic Sans';
    }
}

Output:

.example {
    font-family: 'Comic Sans';
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ie:example {
        font-family: 'Comic Sans';
    }
}