Native CSS nesting?

[jods4]

Nesting of CSS rules is becoming supported in all browsers:
https://caniuse.com/css-nesting

Is there a way to use it with Tailwind (or is it coming in a future releast)?
The current docs only mention how to set up the PostCSS plugin.

• When I setup PostCSS plugin, the selectors are expanded into longer ones that are not nested (and it works 👍).
• When I remove the plugin, Tailwind sees the nesting and emits some warnings (to guide me toward the plugin). Output is not what I expect and only works partially. ☹

Everything works fine with the plugin, but I'm always happy if I can drop NPM dependencies and get smaller outputs!

[jods4]

Some additional details on "output is not what I expect".

I'd like a way to disable the warning, as there shouldn't be warnings in my build if everything works ok.

Using @apply in a nested class generates a lot of duplicate CSS (that still works):

/* Input */
.outer {
  .nested {
    @apply text-red-400 bg-black
  }
}

/* Actual output */
.outer {
  .nested {
    /* Inline text-red-400 */
  }
  .nested {
    /* Inline bg-black */
  }
}

/* Expected output */
.outer {
  .nested {
    /* Inline text-red-400 */
    /* Inline bg-black */
  }
}

[cristian87dev]

Hi, I have the same issue, did you find a way to disable this warning? Or as you mention since @apply is use it duplicate the code a lot, is there a new version of tailwind that resolve this issue? Thanks.

[samjamead]

Now that nesting is a feature of CSS it would be great to be able to disable the warning.

Example usecase:
Using dynamic routes to render a markdown-based blog in Next.js.

In this instance it's not possible to apply classes to all the elements on the page; they'll be generated along the way by some markdown parser, so you need to write some CSS to apply rules to the blog post.

A convenient way to do this would be to have one CSS file (say, posts.css) with a single class (say, .post-wrapper) that wraps nested element selectors.

e.g.

.post-wrapper {
  p {
    margin-bottom: 1rem;
  }

  blockquote {
    border-left: 3px solid black;
  }

  // other rules

}

In this instance I'm reluctant to install PostCSS just to handle one relatively small file in the project.

[Potter553]

The CSS Nesting module allows you to write your stylesheets so that they are easier to read, more modular, and more maintainable.

[stefnotch]

Native CSS nesting support is in the latest TailwindCSS release, see #13317 . However, it doesn't include @apply.