CODEWITHSUNDEEP
tailwind-css
Steven Grant
Steven Grant

Reputation: 1325

Can't figure out why my Tailwind borders aren't showing

I am trying to apply a simple border to my elements. Granted it's been a while since I touched this project, it appears to build the CSS and output what it's meant to but I can't see the border in the browser.

Am I missing something super obvious?

Here we have the Tailwind config file

module.exports = {
    mode: 'jit',
    purge: ['./templates/**/*.twig', './js/**/*.{js,vue}'],
    corePlugins: {
        preflight: false
    },
    prefix: 'tw-',
    important: true,
    darkMode: false, // or 'media' or 'class'
    theme: {
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1240px',
            '2xl': '1536px'
        },
        // prettier-ignore

        fontFamily: {
            sans: [
                'Nunito',
                '-apple-system',
                'BlinkMacSystemFont',
                'Avenir Next',
                'Avenir',
                'Segoe UI',
                'Lucida Grande',
                'Helvetica Neue',
                'Helvetica',
                'Fira Sans',
                'Roboto',
                'Noto',
                'Droid Sans',
                'Cantarell',
                'Oxygen',
                'Ubuntu',
                'Franklin Gothic Medium',
                'Century Gothic',
                'Liberation Sans',
                'Arial',
                'sans-serif'
            ]
        },
        fontSize: {
            tiny: '.8125rem', // 13px
            xs: '.875rem', // 14px
            sm: '.9375rem', // 15px
            base: '1rem', // 16px
            lg: '1.125rem', // 18px
            xl: '1.25rem', // 20px
            '2xl': '2rem', // 32px
            '3xl': '2.75rem' // 44px
        },
        extend: {
            colors: {
                primary: '#E76A52',
                'primary-soft': '#FBF0EE'
            }
        }
    },
    variants: {
        extend: {}
    },
    plugins: [require('@tailwindcss/typography')]
}

I'm declaring the Tailwind classes on the element by using class="tw-border-primary tw-border-2" and Chrome's dev tools show

.tw-border-primary {
    --tw-border-opacity: 1 !important;
    border-color: rgba(231, 106, 82, var(--tw-border-opacity)) !important;
}

.tw-border-2 {
    border-width: 2px !important;
}

I can't make sense of it. It's definitely not a cache thing as all browsers are the same.

Upvotes: 10

Views: 10549

Answers (1)

Steven Grant
Steven Grant

Reputation: 1325

I had to add tw-border-solid for some reason. First time ever I've had to do that.

Upvotes: 17

Related Questions