Chaining with responsive variants

[adamalfredsson]

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.

[unlight]

Please, read https://github.com/unlight/tailwind-ie-variant#usage

You need add postcss-nesting plugin

[adamalfredsson]

I was using postcss-nested. Trying with postcss-nesting and getting same results. I'm actually using a _ separator and it's rather looking like this:

<button class="hidden md_block md_ie_hidden"></button>

[unlight]

@nomadoda Could you share your postcss config ?

[adamalfredsson]

My original .postcssrc:

{
  "plugins": {
    "postcss-import": {},
    "postcss-nested": {},
    "tailwindcss": {},
    "postcss-custom-properties": {},
    "postcss-object-fit-images": {},
    "autoprefixer": {}
  }
}

With postcss-nesting:

{
  "plugins": {
    "postcss-import": {},
    "postcss-nested": {},
    "postcss-nesting": {},
    "tailwindcss": {},
    "postcss-custom-properties": {},
    "postcss-object-fit-images": {},
    "autoprefixer": {}
  }
}

[adamalfredsson]

I've created a repo to demonstrate, https://github.com/nomadoda/tailwind-ie-variant-test. I'm not sure why it's not working, the generated css looks fine?

.table {
  display: table;
}
.hidden {
  display: none;
}
@media (min-width: 768px) {
  .md_block {
    display: block;
  }
  .md_hidden {
    display: none;
  }
  @media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
    .md_ie_block {
      display: block;
    }
    .md_ie_hidden {
      display: none;
    }
  }
}

[adamalfredsson]

It seems like postcss-nesting doesn't "unnest" media queries (by default at least) and nested media queries are not supported on IE.

EDIT: Also postcss-nested doesn't

[unlight]

So, to make it work, we need css result like:

.table {
  display: table;
}
.hidden {
  display: none;
}
@media (min-width: 768px) {
  .md_block {
    display: block;
  }
  .md_hidden {
    display: none;
  }
}

@media (min-width: 768px) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {
  .md_ie_block {
    display: block;
  }
  .md_ie_hidden {
    display: none;
  }
}

[adamalfredsson]

Yes, I think so. It seems like something postcss-nesting or postcss-nested should be able to do, but I haven't succeeded.

[unlight]

Have you tried https://github.com/postcss/postcss-nested#unwrap unwrap option for postcss-nested? I tried to find some postcss plugins related to this issue https://github.com/giuseppeg/postcss-nest-atrules https://github.com/Semigradsky/postcss-nested-media-queries

[adamalfredsson]

I'm at wits' end now. I've added an issue to postcss-nested https://github.com/postcss/postcss-nested/issues/141

[unlight]

@nomadoda

Looks like https://github.com/Semigradsky/postcss-nested-media-queries is what you need.

{
  "plugins": {
    "tailwindcss": {},
    "postcss-nesting": {},
    "postcss-nested-media-queries": {}
  }
}

Result:

.table {
    display: table;
}
.hidden {
    display: none;
}
@media (min-width: 768px) {
    .md_block {
        display: block;
    }
    .md_hidden {
        display: none;
    }
}
@media (-ms-high-contrast: none),
    (min-width: 768px) and screen and (-ms-high-contrast: active) {
    .md_ie_block {
        display: block;
    }
    .md_ie_hidden {
        display: none;
    }
}

Will it work for you. Could you check?

The problem is postcss-nested-media-queries is not published, you can try to contact the author or build and publish it by yourself.

[unlight]

I've tried this recommendations https://tailwindcss.com/docs/using-with-preprocessors#nesting No luck.

Looks like something was broken and this will not work in tailwind v3

[adamalfredsson]

Thanks a lot! I'm currently getting this issue with tailwind ^1.9, since tailwind 2 & 3 does not support IE11.

[adamalfredsson]

I've tried with postcss-nested, postcss-nesting, postcss-preset-env and cssnano but not getting any luck either :(