Create a Tailwind CSS Styled Number Input A Tutorial

Creating a number input field with Tailwind CSS means using HTML and Tailwind's styling classes to style the input in a specific way.

<input
  type="number"
  class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
  placeholder="Enter number"
/>

The input field is styled for numbers, has padding, a border, rounded corners, no outline on focus, and a blue focus ring.

tailwind input number

Modern Style with Shadow

<input
  type="number"
  class="w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:border-blue-500 focus:bg-white focus:outline-none shadow"
  placeholder="Enter number"
/>

tailwind input number style

Phone Number Input

<div class="flex border border-gray-300 rounded-md">
  <span class="flex items-center bg-gray-100 border-r px-3 text-gray-600">
    +1
  </span>
  <input
    type="tel"
    class="flex-1 min-w-0 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number"
  />
</div>

tailwind phone number input

Tailwind CSS Phone Number Input with Country Code Selector

<div class="flex border border-gray-300 rounded-md">
  <select class="bg-gray-100 border-r px-2 text-gray-700 focus:outline-none rounded-l-md">
    <option value="+1">+1</option>
    <option value="+44">+44</option>
    <option value="+91">+91</option>
    <!-- Add more country codes as needed -->
  </select>
  <input type="tel" class="flex-1 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number" />
</div>

tailwind country code number input

Tailwind CSS Phone Number Input with Phone Icon (Using Heroicons)

<div class="flex items-center border border-gray-300 rounded-md">
  <span class="px-3 border-r">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="w-5 h-5 text-gray-500"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
      />
    </svg>
  </span>
  <input
    type="tel"
    class="flex-1 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number"
  />
</div>

tailwind input number with icon