Syntax error: The class does not exist. If it's a custom class, make sure it is defined within a `@layer` directive

Question

Syntax error: The focus-visible:bg-primary-50 class does not exist. If focus-visible:bg-primary-50 is a custom class, make sure it is defined within a @layer directive.

Howcome can this class don't exist if --primary is defined and focus-visible is being used all around the file?

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}
  .select-field {
    @apply w-full bg-gray-50 h-[54px] placeholder:text-gray-500 rounded-full p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent focus:ring-transparent !important;
  }

  .input-field {
    @apply bg-gray-50 h-[54px] focus-visible:ring-offset-0 placeholder:text-gray-500 rounded-full p-regular-16 px-4 py-3 border-none focus-visible:ring-transparent !important;
  }

  .textarea {
    @apply bg-gray-50 flex flex-1 placeholder:text-gray-500 p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent !important;
  }

  .select-item {
    @apply py-3 cursor-pointer focus-visible:bg-primary-50;
  }

Edit: I figured out that I can use it but without setting how strong I want it to be (ex: -50 at the end), but why?

Answer 1

It seems like you may have primary or primary.DEFAULT as a color or backgroundColor value but not primary-50 or primary.50.

If you'd like to have bg-primary-50 apply a background color, consider adding primary-50 or primary.50 as a color or backgroundColor value in tailwind.config.js:

---

If you have:

module.exports = {
  theme: {
    colors: {
      primary: 'Existing value',

Or

module.exports = {
  theme: {
    colors: {
      primary: {
        DEFAULT: 'Existing value'

Do:

module.exports = {
  theme: {
    colors: {
      primary: {
        DEFAULT: '…'
        50: 'primary-50 value here',

---

If you have:

module.exports = {
  theme: {
    extends: {
      colors: {
        primary: 'Existing value',

Or

module.exports = {
  theme: {
    colors: {
      primary: {
        DEFAULT: 'Existing value'

Do:

module.exports = {
  theme: {
    extends: {
      colors: {
        primary: {
          DEFAULT: 'Existing value'
          50: 'primary-50 value here',

---

If you have:

module.exports = {
  theme: {
    backgroundColor: {
      primary: 'Existing value',

Or

module.exports = {
  theme: {
    backgroundColor: {
      primary: {
        DEFAULT: 'Existing value'

Do:

module.exports = {
  theme: {
    colors: {
      backgroundColor: {
        DEFAULT: '…'
        50: 'primary-50 value here',

---

If you have:

module.exports = {
  theme: {
    extends: {
      backgroundColor: {
        primary: 'Existing value',

Or

module.exports = {
  theme: {
    backgroundColor: {
      primary: {
        DEFAULT: 'Existing value'

Do:

module.exports = {
  theme: {
    extends: {
      backgroundColor: {
        primary: {
          DEFAULT: 'Existing value'
          50: 'primary-50 value here',