title: How to increase text input width (with transition) when it is hovered in Tailwindcss
body: <p>I was able to change the width of a text when it is hovered after adding <code>hover</code> in <code>tailwind.config.js</code></p>
  
  <pre><code>width: ['responsive', 'hover', 'focus'],
  .
  .
  .
  transitionProperty: ['responsive', 'hover', 'focus'],
  transitionTimingFunction: ['responsive', 'hover', 'focus'],
  transitionDuration: ['responsive', 'hover', 'focus'],
  transitionDelay: ['responsive', 'hover', 'focus'],
  </code></pre>
  
  <p>However the animation effect is ugly and I wanted to add some transition but it doesn't seem to work. Here is the HTML part:</p>
  
  <pre><code>&lt;input type="text" placeholder="Search" class="placeholder-gray-500 rounded-full px-3 pl-8 py-1 outline-none transition duration-700 ease-in-out focus:shadow-outline hover:w-64" /&gt;
  </code></pre>
  
  <p>Sample fiddle:
  <a href="https://jsfiddle.net/codename2200/30wjcndm/9/" rel="nofollow noreferrer">https://jsfiddle.net/codename2200/30wjcndm/9/</a></p>
  
  <p>Since there is no tailwind config in jsfiddle I just extracted the styles (with purge) to replicate what I've got so far.</p>