https://github.com/unlight/tailwind-ie-variant

Tailwind CSS plugin to add variants (css hacks) for IE10+
https://github.com/unlight/tailwind-ie-variant

postcss-plugin tailwind-plugin tailwind-variant tailwindcss tailwindcss-plugin

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/unlight/tailwind-ie-variant
• Owner: unlight
• License: mit
• Created: 2020-03-24T22:44:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-12-31T18:30:04.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T04:21:08.513Z (7 months ago)
• Topics: postcss-plugin, tailwind-plugin, tailwind-variant, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Size: 76.2 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tailwind-ie-variant

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

## Install

```sh

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

```

Add the plugin to your `tailwind.config.js`:

```js

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

module.exports = {

    // ...

    plugins: [tailwindIeVariant()],

};

```

## Usage

```html

Only IE10+ see me

```


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:

```css

@variants ie {

    .example {

        font-family: 'Comic Sans';

    }

}

```

Output:

```css

.example {

    font-family: 'Comic Sans';

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .ie:example {

        font-family: 'Comic Sans';

    }

}

```