html - 如何顺风定制

Question

我的自定义不起作用，你能帮忙吗？我可以用 css 以不同的方式编辑它吗？

我的html：

<div class=" justify-around grid sm:grid-cols-1 md:grid-cols-2 lgr:grid-cols-3 xlr:grid-cols-4">
</div>

tailwind.config.js：

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        colors: {
            primaryColor: '#516b74'
        },
        screens: {
            'lgr': '1200px',
            'xlr': '1500px'
        },
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}