Package Exports

tailwind-ie-variant
tailwind-ie-variant/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-ie-variant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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