Is there an option to keep the CSS nesting in the output to keep the size down?

[blfpd]

As it is mentionned in the documentation about compatibility:

Native CSS nesting support is also very good these days, so you don't really need a preprocessor for nesting even if you aren't using Tailwind.

CanIUse mentionned it is OK for about 92% of browser it it is fine for my usage, and maybe other.

[wongjn]

There is no option to keep CSS nesting in the production output. However, you could disable optimization altogether (Vite, PostCSS), and then run your own optimization.

[adamwathan]

Would actually increase the file size because Tailwind uses nesting very aggressively in it's own output.

Take this class for example:

data-enabled:active:focus:first:bg-red-500

This is the CSS we generate:

.data-enabled\:active\:focus\:first\:bg-red-500 {
  &[data-enabled] {
    &:active {
      &:focus {
        &:first-child {
          background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
        }
      }
    }
  }
}

After processing the nesting it turns into this:

.data-enabled\:active\:focus\:first\:bg-red-500[data-enabled]:active:focus:first-child {
  background-color: var(--color-red-500, oklch(63.7% .237 25.331));
}

So it would probably reduce the file size for any of your own custom CSS but it would be way bigger overall because of all the extra stuff in there from Tailwind's own nesting.

[blfpd]

Here is an extract of my input.css:

1147B

.uk-presentation {
  .figures {
    @apply relative;

    .main-image {
      border-radius: 0 40px 258px 36px;
    }

    .sub-figures {
      ul {
        @apply list-none;

        li {
          @apply absolute;

          &:nth-child(n) {
            @apply max-w-[20vw] top-[10%] right-[-60px];
          }

          &:nth-child(2n) {
            @apply max-w-[28vw] top-[34%] right-[-68px];
          }

          &:nth-child(3n) {
            @apply max-w-[38vw] top-[64%] right-[-40px];
          }

          img {
            @apply rounded-full;

          }

          &:nth-child(1) img,
          &:nth-child(3) img {
            @apply border-5 border-warning;
          }

          &:nth-child(2) img {
            @apply border-5 border-info;
          }
        }
      }
    }
  }

  article {
    h4:first-of-type {
      @apply text-error;
    }
  }
}

Output by Tailwind
1021B

.uk-presentation .figures{position:relative}.uk-presentation .figures .main-image{border-radius:0 40px 258px 36px}.uk-presentation .figures .sub-figures ul{list-style-type:none}.uk-presentation .figures .sub-figures ul li{position:absolute}.uk-presentation .figures .sub-figures ul li:nth-child(n){max-width:20vw;top:10%;right:-60px}.uk-presentation .figures .sub-figures ul li:nth-child(2n){max-width:28vw;top:34%;right:-68px}.uk-presentation .figures .sub-figures ul li:nth-child(3n){max-width:38vw;top:64%;right:-40px}.uk-presentation .figures .sub-figures ul li img{border-radius:3.40282e38px}.uk-presentation .figures .sub-figures ul li:first-child img,.uk-presentation .figures .sub-figures ul li:nth-child(3) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-warning)}.uk-presentation .figures .sub-figures ul li:nth-child(2) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-info)}.uk-presentation article h4:first-of-type{color:var(--color-error)}

Output by Tailwind, renested, passed through LightningCSS
1012B

.uk-presentation{position:relative}.uk-presentation .figures .main-image{border-radius:0 40px 258px 36px}.uk-presentation .figures .sub-figures ul{list-style-type:none}.uk-presentation .figures .sub-figures ul li{position:absolute}.uk-presentation .figures .sub-figures ul li img{border-radius:3.40282e38px}.uk-presentation .figures .sub-figures ul li:nth-child(n){max-width:20vw;top:10%;right:-60px}.uk-presentation .figures .sub-figures ul li:nth-child(2n){max-width:28vw;top:34%;right:-68px}.uk-presentation .figures .sub-figures ul li:nth-child(3n){max-width:38vw;top:64%;right:-40px}.uk-presentation .figures .sub-figures ul li:first-child img,.uk-presentation .figures .sub-figures ul li:nth-child(3) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-warning)}.uk-presentation .figures .sub-figures ul li:nth-child(2) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-info)}.uk-presentation article h4:first-of-type{color:var(--color-error)}

Output by Tailwind, renested, passed through LightningCSS with feature: exclude[Nested]
641B

.uk-presentation{position:relative;& .figures{& .main-image{border-radius:0 40px 258px 36px}& .sub-figures ul{list-style-type:none;& li{position:absolute;& img{border-radius:3.40282e38px}}& li:nth-child(n){max-width:20vw;top:10%;right:-60px}& li:nth-child(2n){max-width:28vw;top:34%;right:-68px}& li:nth-child(3n){max-width:38vw;top:64%;right:-40px}& li:first-child img,& li:nth-child(3) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-warning)}& li:nth-child(2) img{border-style:var(--tw-border-style);border-width:5px;border-color:var(--color-info)}}}& article h4:first-of-type{color:var(--color-error)}}

I’d agree with you that nested output shouldn’t be the default behaviour, but in this case I’d take those 37% reduction.

[wongjn]

Though do bear in mind, after gzip or brotli compression (which generally should be done in production), the difference is more negligble:

Compression	Tailwind Output (bytes)	Renested (bytes)
GZIP1 level 1	328	305
GZIP1 level 9	307	298
Britoli2	245	241

So it would seem like it is a trade-off of whether the bit of extra configuration to workaround Tailwind's flattening is worth the extra technical debt for the saved bytes.

Footnotes

1. Using https://dafrok.github.io/gzip-size-online/ ↩ ↩²

2. Using https://www.multiutil.com/text-to-brotli-compress/ ↩

[blfpd]

Agreed 👌