CODEWITHSUNDEEP
tailwind-css
Tejaswini G
Tejaswini G

Reputation: 11

How to customize Tailwind CSS height?

I'm building a website in tailwind CSS. I'm new to it and I don't know how to customise the height. I want my image height to be exactly 40rem=640px. But the max height I could give in tailwind is 24rem 384px. How to go about it?

Upvotes: 1

Views: 1310

Answers (2)

denishkumar maniya
denishkumar maniya

Reputation: 12

    Two ways to customize height
    
    
    1] Modify the tailwind.config.js File
    module.exports = {
      content: [],
      theme: {
        extend: {
          height: {
            '72': '18rem',  // Custom height 72
            '84': '21rem',  // Custom height 84
          },
        },
      },
      plugins: [],
    }
    Use it like below
    <div class="h-72 bg-blue-500">This div has a height of 18rem.</div>
    
    2 ] directly write height inside [].
    <div class="h-[18rem] bg-blue-500">This div has a height of 18rem.</div>


  https://designcools.com you can now get free modern tailwind component design

Upvotes: 0

lAbYriNth
lAbYriNth

Reputation: 81

You can provide custom height like this, h-[40rem]

Full example in React:<img className="h-[40rem] text-white" src="http://src.com">

Or in pure html: <img class="h-[40rem] text-white" src="http://src.com">

Upvotes: 1

Related Questions