Image taking whole space with tailwind

I'm trying to make a super simple landing page with a hero showing title etc. and pictures of watch and phone. Currently it looks like this:

The markup:

<html>
  <head>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="flex flex-col md:flex-row items-center justify-between p-20">
      <div class="text-center md:text-left space-y-4">
        <h1 class="text-4xl font-bold text-green-600">App Name</h1>
        <div class="text-lg text-gray-700">Slogan blablabla</div>
        <img
          src="download_on_appstore.svg"
          title="Download on App Store"
          class="h-12 mx-auto md:mx-0"
        />
      </div>

      <div class="flex flex-row items-end gap-4 mt-6">
        <img src="watch.png" title="Watch" class="h-32 flex-none" />
        <img
          src="iphone.png"
          title="Phone"
          class="h-64 flex-none shrink-0 grow-0"
        />
      </div>
    </div>
  </body>
</html>

I'm now trying to make the phone picture bigger and no matter what height I choose, if it's different than the current height of h-64 it takes the whole space: a giant phone shows on the right. I've tried with different heights (also smaller than h-64), height in pixels (h-[200px]), and setting height on the container and it makes no difference. How do I fix this?

Solution

In TailwindCSS v1, many features were still missing compared to the latest v3 or v4 releases.

You can't customize Tailwind's default theme

Using Tailwind via CDN - TailwindCSS v1 Docs

So, you don't have the option to use custom values, which is often seen on the internet. You can combine it with native CSS:

<link
  href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
  rel="stylesheet"
/>

<div class="flex flex-col md:flex-row items-center justify-between p-20">
  <div class="text-center md:text-left space-y-4">
    <h1 class="text-4xl font-bold text-green-600">App Name</h1>
    <div class="text-lg text-gray-700">Slogan blablabla</div>
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Download on App Store"
      class="h-12 mx-auto md:mx-0"
    />
  </div>

  <div class="flex flex-row items-end gap-4 mt-6">
    <img src="https://picsum.photos/1000/1000?blur=10" title="Watch" class="h-32 flex-none" />
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Phone"
      class="flex-none shrink-0 grow-0"
      style="height: 200px;"
    />
  </div>
</div>

You can either upgrade to at least v3 (stable), or to the recently released v4 (latest stable, but it's still an early release).

Installation: Play CDN - TailwindCSS v3 Docs
Adding Custom Styles: Using arbitrary values: h-[200px], etc. - TailwindCSS v3 Docs

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col md:flex-row items-center justify-between p-20">
  <div class="text-center md:text-left space-y-4">
    <h1 class="text-4xl font-bold text-green-600">App Name</h1>
    <div class="text-lg text-gray-700">Slogan blablabla</div>
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Download on App Store"
      class="h-12 mx-auto md:mx-0"
    />
  </div>

  <div class="flex flex-row items-end gap-4 mt-6">
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Watch"
      class="h-32 flex-none"
    />
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Phone"
      class="h-[200px] flex-none shrink-0 grow-0"
    />
  </div>
</div>

Adding Custom Styles: Customizing your theme in tailwind.config.js - TailwindCSS v3 Docs

Or with the v3 configuration, you can create a custom height with a custom name as well:

tailwind.config = {
  theme: {
    extend: {
      height: {
        unique: "200px", // Add custom height
      },
    },
  },
  plugins: [],
};

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col md:flex-row items-center justify-between p-20">
  <div class="text-center md:text-left space-y-4">
    <h1 class="text-4xl font-bold text-green-600">App Name</h1>
    <div class="text-lg text-gray-700">Slogan blablabla</div>
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Download on App Store"
      class="h-12 mx-auto md:mx-0"
    />
  </div>

  <div class="flex flex-row items-end gap-4 mt-6">
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Watch"
      class="h-32 flex-none"
    />
    <img
      src="https://picsum.photos/1000/1000?blur=10"
      title="Phone"
      class="h-unique flex-none shrink-0 grow-0"
    />
  </div>
</div>