:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}

.foo {
  @apply .oreo --danger-theme .px-4;
}

@responsive {
  .oreo {
    background: red;
  }
  .oreo {
    text-align: center;
  }
  .oreo {
    background: purple;
  }
}

.bar {
  .oreo {
    background: red;
  }
}

@responsive {
  .bar {
    color: orange;
  }
}

@tailwind utilities;

@responsive {
  .px-4 {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

@responsive {
  .sans-alt {
    font-family: 'Brandon Text';
  }
}

.this-should-be-the-very-end {
  color: red;
}