tailwind-ie-variant

2.0.0 • Public • Published

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

Package Sidebar

Install

npm i tailwind-ie-variant

Weekly Downloads

91

Version

2.0.0

License

MIT

Unpacked Size

4.48 kB

Total Files

4

Last publish

Collaborators

  • iamthes