@apply dark: on globals.css seems to be broken

[imprisonedmind]

Hi All,

After update to the current version of tailwind, it appears to break the ability to use dark: when @apply in a NextJs project.

Globals.css
This used to work, now after update only bg-gray-300 is being applied.

::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    z-index: 50 !important;
    @apply bg-gray-300  dark:bg-dark-quinary
}

Package

{
  "name": "soteria-react",
  "version": "2.0.10",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/client": "^3.7.16",
    "@heroicons/react": "^2.0.18",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.6",
    "@mui/x-date-pickers": "^5.0.20",
    "apollo-upload-client": "^17.0.0",
    "axios": "^1.4.0",
    "dayjs": "^1.11.8",
    "formik": "^2.4.2",
    "framer-motion": "^4.1.17",
    "graphql": "^15.8.0",
    "js-cookie": "^3.0.5",
    "js-file-download": "^0.4.12",
    "luxon": "^2.5.2",
    "moment": "^2.29.4",
    "next": "^12.3.4",
    "next-auth": "^3.29.10",
    "next-themes": "^0.2.1",
    "npm-check-updates": "^16.10.13",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-hotjar": "^4.0.0",
    "react-hotkeys-hook": "^3.4.7",
    "sharp": "^0.32.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "eslint": "^8.43.0",
    "eslint-config-next": "^12.3.4",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2"
  }
}

[roma-marshall]

Try this: dark:bg-black

[imprisonedmind]

bg-dark-quinary

^^ this is a custom tailwind bg colour property I've made.

This used to work until upgrading past v2

[imprisonedmind]

I managed to find a fix through ChatGPT:

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    z-index: 50 !important;
    @apply bg-gray-300;
}

.dark ::-webkit-scrollbar-thumb{
    @apply bg-dark-quaternary;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.500');
    cursor: grabbing;
    @apply bg-dark-secondary
}

.dark ::-webkit-scrollbar-thumb:hover{
    @apply bg-dark-quinary;
}