@screen directive is incorrectly generating css

[dasZGFz]

I am currently on 1.0.0-beta.2.

This code:

html {
  @apply bg-gray-200 antialiased;

  @screen lg {
    @apply bg-gray-900;
  }

  @screen md {
    @apply text-white;
  }
}

is generating this:

html {
  background-color: #edf2f7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@media (min-width: 1024px) {
    background-color: #1a202c;
}
@media (min-width: 768px) {
    color: #fff;
}
}

which is incorrect syntax. Am I using @screen wrong or is this a bug?

[adamwathan]

Tailwind doesn't automatically handle the nesting for you, you'll need to use a preprocessor like Sass or another PostCSS plugin like postcss-nested to unwrap them.

If you want to use the @screen feature without adding another tool, just don't nest them:

html {
  @apply bg-gray-200 antialiased;
}

@screen lg {
  html {
    @apply bg-gray-900;
  }
}

@screen md {
  html {
    @apply text-white;
  }
}

[dasZGFz]

Ah I see. Thank you for clarifying :)