unlight/tailwind-ie-variant

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

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

tailwind-ie-variant's Issues

Chaining with responsive variants

Thanks for this plugin!

I'm not able to override responsive variants. For example, I want to hide a button on IE and on mobile, I'd expect to write:

<button class="hidden md:block md:ie:hidden"></button>

Unfortunately the chained selector doesn't produce any style.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀