I'm trying to incorporate the border-image property into a project using Tailwind arbitrary syntax, but my styles aren't being applied. Am I missing something? Is this even possible with Tailwind? Thanks!
My code:
<button className="[border-image:linear-gradient(to top right, #f6b73c, #4d9f0c) 30] border-4 border-solid border-transparent bg-white p-4"> Hello! </button>
Yes, you are missing something and it is possible with Tailwind. Consider removing any optional spaces within the arbitrary property class and escaping essential spaces with underscore (_). This is needed since the space character delimits class names.
<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<button class="[border-image:linear-gradient(to_top_right,#f6b73c,#4d9f0c)_30] border-4 border-solid border-transparent bg-white p-4"> Hello! </button>