Tailwind incorrectly purges styles in production

[chan-dev]

Hi guys, i have custom styles i put in @layer directives and i explicitly remove them from being purged.

Styles like direct child selectors (i.e, .sidenav__items > a) are removed.

Here's my tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  corePlugins: {
    float: false,
  },
  important: true,
  purge: {
    layers: [],
  },
  theme: {
    truncate: {
      lines: {
        2: '2',
        3: '3',
        5: '5',
        8: '8',
      },
    },
    extend: {
      spacing: {
        72: '18rem',
        80: '20rem',
        96: '24rem',
        '1/4': '25%',
        '3/4': '75%',
      },
      inset: {
        '1/2': '50%',
        '1/4': '25%',
        '3/4': '75%',
        '-1/2': '-50%',
        '-1/4': '-25%',
        '-3/4': '-75%',
      },
      colors: {
        // list ONLY the shared by multiple ui components
        'dark-mode': {
          default: '#1a1a1a',
          max: defaultTheme.colors.black,
          text: defaultTheme.colors.gray[300],
          border: defaultTheme.colors.black,
        },
      },
      opacity: {
        10: '0.10',
      },
    },
  },
  variants: {
    display: ({ after }) => after(['group-hover']),
    borderColor: ({ after }) =>
      after([
        'focus-within',
        'dark',
        'dark-focus',
        'dark-focus-within',
        'sepia',
        'sepia-focus',
        'sepia-focus-within',
      ]),
    backgroundColor: ({ after }) =>
      after([
        'disabled',
        'dark',
        'dark-hover',
        'dark-active',
        'dark-group-hover',
        'dark-even',
        'dark-odd',
        'sepia',
        'sepia-hover',
        'sepia-active',
        'sepia-group-hover',
        'sepia-even',
        'sepia-odd',
      ]),
    textColor: ({ after }) =>
      after([
        'dark',
        'dark-hover',
        'dark-active',
        'dark-placeholder',
        'sepia',
        'sepia-hover',
        'sepia-active',
        'sepia-placeholder',
      ]),
    backgroundOpacity: ({ after }) => after(['dark', 'dark-hover']),
  },
  plugins: [
    require('tailwindcss-truncate-multiline')(),
    require('tailwindcss-dark-mode')(),
    require('tailwindcss-sepia-mode')(),
  ],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
};

Here's my tailwind.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  button:focus {
    outline: none !important;
  }

  .mat-chip-list-wrapper {
    @apply border rounded;

    &:focus-within {
      @apply border-gray-500;
    }
  }

  [class*='mode-dark'] {
    ngx-skeleton-loader .loader {
      opacity: theme('opacity.25');
    }

    .mat-dialog-container {
      @apply bg-dark-mode text-dark-mode-text;
    }

    .mat-chip-list-wrapper {
      @apply bg-dark-mode-max;
    }
  }
}

@layer components {
  .sidenav {
    @apply flex flex-col font-medium text-sm capitalize text-gray-700;

    [class*='mode-dark'] & {
      @apply text-dark-mode-text;
    }
  }
  .sidenav__items {
    @apply p-3 cursor-pointer rounded-sm;

    > a {
      @apply flex items-center;
    }

    > button {
      @apply inline-flex items-center capitalize font-medium;
    }
  }

  .sidenav__items:not(.active):hover {
    @apply text-green-700;

    [class*='mode-dark'] & {
      @apply text-green-300;
    }
  }

  .sidenav__items.active {
    @apply bg-gray-200;
    @apply text-green-700;

    [class*='mode-dark'] & {
      @apply bg-blue-100 bg-opacity-25 text-dark-mode-text;
    }
  }

  .bookmark-list {
    @apply max-w-sm mx-auto py-4;

    @screen md {
      @apply max-w-full;
    }
  }

  .bookmark-list__title {
    @apply font-medium text-2xl;
  }

  .text-img {
    @apply relative;
    width: 140%;
    height: 140%;

    &__wrapper {
      @apply absolute inset-0 bg-green-200 text-green-800;
    }

    &__text {
      @apply absolute font-serif;
      top: -22%;
      right: 33%;
      font-size: 22rem;
    }
  }

  .tag {
    .active {
      @apply bg-green-100 text-green-700 rounded;
    }
  }

  .full-width-dialog {
    @apply mx-auto;

    .mat-dialog-container {
      @apply p-3;
    }

    @screen md {
      @apply w-1/2 max-w-lg !important;
    }
  }
}

@layer utilities {
  .center-between {
    @apply flex items-center justify-between;
  }

  .center-within {
    @apply flex items-center justify-center;
  }

  .inline-center-between {
    @apply inline-flex items-center justify-between;
  }

  .inline-center-within {
    @apply inline-flex items-center justify-center;
  }
}

[simonswiss]

Hey! 👋

Are you able to create a minimal repro GitHub repo with this?