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

Dependencies (0)

    Dev Dependencies (13)

    Package Sidebar

    Install

    npm i tailwind-ie-variant

    Weekly Downloads

    259

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    4.48 kB

    Total Files

    4

    Last publish

    Collaborators

    • iamthes