CODEWITHSUNDEEP
javascriptcssframeworkstailwind-css
Mathéo Zeller
Mathéo Zeller

Reputation: 129

Change the value of min-h-full or add class to set min-height with Tailwind

I'm using tailwind, I'm trying to change the default value of the min-h-full class. Actually set to 100% , I want to change this for a calc.

Explain, I want this :

calc(100vh - (headerHeight + footerHeight)

so I have this

calc(100vh - 296px)

What I've tested :

module.exports = {
    purge: [],
    theme: {
        extend: {
            minHeight: {
                'full': '100px',
            }
        },
        fontFamily: {
            title: ['Righteous', 'sans-serif'],
            body: ['Montserrat', 'sans-serif'],
        },
    },
    variants: {},
    plugins: [],
}

This code doesn't work , the min-h-height stuck to 100%

and I've tried this :

module.exports = {
    purge: [],
    theme: {
        minHeight: {
            'full': '100px',
        },
        fontFamily: {
            title: ['Righteous', 'sans-serif'],
            body: ['Montserrat', 'sans-serif'],
        },
    },
    variants: {},
    plugins: [],
}

This code doesn't work too.

Any help will be appreciated

Upvotes: 1

Views: 2336

Answers (1)

Ashar Setiawan
Ashar Setiawan

Reputation: 296

It should be full without quote

module.exports = {
    purge: [],
    theme: {
        minHeight: {
            full: '100px',
        },
        fontFamily: {
            title: ['Righteous', 'sans-serif'],
            body: ['Montserrat', 'sans-serif'],
        },
    },
    variants: {},
    plugins: [],
}

Upvotes: 1

Related Questions