Lined Textarea with Tailwind

index.html

<div class="p-8">
  <div class="border border-gray-200 rounded-sm px-4 py-2 focus-within:border-blue-400">
    <label class="text-sm text-gray-400 block uppercase tracking-wide font-bold"> Label </label>
    <textarea class="text-gray-700 leading-[28px] min-h-[96px] bg-gray-lines bg-local w-full focus:outline-none">Congue aptent sagittis sollicitudin bibendum arcu orci euismod nibh pellentesque vulputate eget aliquam praesent, pretium primis rhoncus curae urna lectus tempus mauris proin montes ligula eu.</textarea>
  </div>
</div>

tailwind.config.js

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      backgroundImage: theme => ({
          'gray-lines': `repeating-linear-gradient(white 0, white 27px, ${theme('colors.gray.300')} 28px)`,
      }),

    },
  },
  variants: {},
  plugins: [],
}