Update Background colour through an input field using Vue

Here is an example of updating the dom's background colour through data passed in through the input.

What we will achieve

I'm using Vue and Tailwind CDN

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

HTML file

<div id="app">
    <div class="h-screen w-screen bg-gray-900 flex items-center justify-center text-white" v-bind:style="bgc">
        <div class="">
            <h1 class="text-center block absolute top-10 w-full left-0">{{description}}</h1>
            <input type="text" v-on:input="bgc.backgroundColor = $event.target.value" class="bg-transparent border-b border-white w-full h-28 text-white outline-none text-6xl text-center"/>
        </div>
    </div>
</div>

Vue script

new Vue({
    el: '#app',
    data: {
        description: "Type any colour name, rgb, hex or hsl in the input below to update this page's background color!",
        bgc: {
            backgroundColor: ''
        }
    }

});

That's it.

The challenge When the background is white, the text and input field border does not show, now challenge yourself to make the color change to black when the background is white.