tailwind not injecting styles
hi, this is my tailwind.config.js
tailwind base:
style.css:
/** @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)',
},
},
},
};
tailwind base:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['../src/**/*.{tsx,html}'],
darkMode: 'media',
corePlugins: {
preflight: false,
},
};
style.css:
@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 */
