I’m trying to create a subtle gradient border bottom effect for an input field using Tailwind CSS. I want to achieve something like this:
enter image description here

Here’s my current attempt:

Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  // ... other configurations
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.border-gradient': {
          position: 'relative',
          '::after': {
            content: '""',
            position: 'absolute',
            left: '0',
            right: '0',
            bottom: '0',
            height: '2px',
            background: 'linear-gradient(to right, rgba(18, 242, 135, 0.1), rgba(18, 242, 135, 0.3), rgba(18, 242, 135, 0.1))',
          },
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

Input component:

<input
  className="w-full bg-transparent rounded-lg px-3 py-3.5 text-white placeholder-white/40 bg-input-gradient backdrop-blur-[5px] focus:outline-none transition border-gradient"
/>

1. Added a custom utility class using a plugin in tailwind.config.js:

plugins: [
  plugin(function ({ addUtilities }) {
    const newUtilities = {
      '.border-gradient': {
        'border-image': 'linear-gradient(to right, #12F287 0%, rgba(18, 242, 135, 1) 50%, #12F287 100%) 1',
        'border-image-slice': '1',
      },
    };
    addUtilities(newUtilities);
  }),
],

2. Attempted to use pseudo-elements for the gradient border:

'.border-gradient': {
  position: 'relative',
  '::after': {
    content: '""',
    position: 'absolute',
    left: '0',
    right: '0',
    bottom: '0',
    height: '2px',
    background: 'linear-gradient(to right, rgba(18, 242, 135, 0.1), rgba(18, 242, 135, 0.3), rgba(18, 242, 135, 0.1))',
  },
},

Expected result: A subtle gradient border at the bottom of the input field, transitioning from transparent to a light green (#12F287) and back to transparent, similar to this image:

enter image description here

Actual result: The border either didn’t appear at all, or it showed up as a solid color instead of a gradient, like this:

enter image description here