Отступы VueJS TailwindCSS не реагируют ⇐ CSS

[Anonymous]

Я ожидаю, что в первой строке моего кода будет отступ x-3 на мобильных устройствах и отступ x-32 в веб-версии.
Все отлично работает на мобильных устройствах, но когда я возвращаюсь к веб-версии, отступ x по-прежнему равен 3, а не 32.



Example

ExampleExampleExampleExampleExampleExample





ExampleExampleExample

ExampleExampleExampleExampleExampleExample

class="bg-custom-gray hover:bg-custom-blue duration-300 h-9 w-11 relative rounded-xl -mt-6"
>








Вот мой Tailwind.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
purge: ["./public/**/*.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
content: [],
variants: {
display: ["responsive"],
textColor: ["responsive", "hover", "focus", "group-hover"],
},
theme: {
extend: {
colors: {
"custom-blue": "#0096FF",
},
animation: ["group-hover"],
},
},
variants: {
textColor: ["responsive", "hover", "focus", "group-hover"],
backgroundColor: ["responsive", "hover", "focus", "group-hover"],
display: ["responsive", "hover", "focus", "group-hover"],

},
plugins: [],
};


Подробнее здесь: https://stackoverflow.com/questions/734 ... responsive