focus-within: is not working

[ekaranjaa]

Hello,
I'm trying to implement a search bar like the one used in the tailwindcss website but .focus-within class won't work.
This is what I have in my nuxt.js project:

<div
    class="search-form flex items-center px-3 bg-gray-200 border border-gray-200 rounded-lg focus-within:bg-white transition duration-200 ease-in-out"
  >
    <div class="mr-3 text-gray-400">
      <font-awesome-icon :icon="['fas','search']" />
    </div>
    <input
      class="bg-transparent focus:outline-none py-2 w-full appearance-none leading-normal"
      type="search"
      placeholder="Search item..."
    />
  </div>

[adamwathan]

Did you enable focus-within for the backgroundColor plugin in your config file? It's not enabled for any utilities by default.

https://tailwindcss.com/docs/pseudo-class-variants/#focus-within