tailwind not injecting styles

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{tsx,html}'],
  darkMode: 'class',

  extend: {
    theme: {
      colors: {
        gray: {
          1: '#F2F2F2',
          2: '#E6E6E6',
          3: '#D6D6D6',
          4: '#C3C3C3',
          5: '#888888',
          6: '#3F3F3F',
        },
        black: { 1: '#020202', 2: '#0F0F0F', 3: '#212121' },
        success: '#60C445',
        error: '#CC1F00',
        white: '#fff',
        'button-border': 'rgba(255, 255, 255, 0.30)',
      },
    },
  },
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['../src/**/*.{tsx,html}'],
  darkMode: 'media',
  corePlugins: {
    preflight: false,
  },
};

@config "../cfg/tailwind.config.js";

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

@layer base {
  html {
    font-family: 'Roboto', sans-serif;
  }
  button {
    font-family: inherit;
  }
}

/* Range slider */
.range-slider input[type='range'] {
  position: absolute;
  top: -8px;
  left: -4px;
  width: 101%;
  -webkit-appearance: none;
  pointer-events: none;
  background: none;
  outline: none;
}

/* range slider thumb */
.range-slider input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  border: 3px solid #eee;
  background: #666;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.51);
  border-radius: 50px;
  cursor: pointer;
}

.tooltip {
  font: inherit;
}

/* Tooltip bottom arrow */
.tooltip-arrow-background {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #020202;
}
/* Tooltip bottom arrow */