Issue with CRA and nesting

[gquagliano]

I have this css code in a project recently created following the steps from:

https://tailwindcss.com/docs/guides/create-react-app
https://tailwindcss.com/docs/using-with-preprocessors#nesting

.wrapper {
  @apply text-green-500;

  .hello {
    @apply text-pink-500;

    .world {
      @apply text-red-500;
    }
  }
}

npm run build produces the following output:

.wrapper {
    --tw-text-opacity: 1;
    color: rgb(34 197 94/var(--tw-text-opacity));

    .hello {
        --tw-text-opacity: 1;
        color: rgb(236 72 153/var(--tw-text-opacity));
        color: rgb(239 68 68/var(--tw-text-opacity))
    }
}

It's like it merges everything deeper than two levels of nesting.

Building manually with npx tailwind -i src/App.css -o output.css does produce the correct output:

.wrapper {
    --tw-text-opacity: 1;
    color: rgb(34 197 94/var(--tw-text-opacity))
}

.wrapper .hello {
    --tw-text-opacity: 1;
    color: rgb(236 72 153/var(--tw-text-opacity))
}

.wrapper .hello .world {
    --tw-text-opacity: 1;
    color: rgb(239 68 68/var(--tw-text-opacity))
}

Any ideas? Thank you.

[alex-krasikau]

Hey @gquagliano!

Create React App by default comes with a Browserslist configuration:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

So I assume when building with CRA, PostCSS picks up the browserslist configuration and generates the CSS for the modern browsers that support nesting.

You can try extending the Browserslist production configuration to see if it changes the results as expected.