I am attempting to utilize tailwind to create a triangle shape. Here is the original code I found on the Triangle Generator. To assign colors to each side of the border, I am using the border-b-color syntax with pre-defined theme colors, which works well. However, when I try to use arbitrary values with the border-b-[#fff] syntax, it does not seem to work as expected.
Here is the full code snippet:
<!-- This approach does not produce the desired result -->
<div class="absolute z-1 -right-[1px] -bottom-[1px] w-0 h-0 border-solid border-t-0 border-r-0 border-b-[4em] border-l-[4em] border-t-transparent border-r-transparent border-l-transparent border-b-[#1D1F2D]"></div>
<!-- This method works correctly -->
<div class="absolute z-1 -right-[1px] -bottom-[1px] w-0 h-0 border-solid border-t-0 border-r-0 border-b-[4em] border-l-[4em] border-t-transparent border-r-transparent border-l-transparent border-b-primaryColor"></div>Any suggestions on how to resolve this issue while using tailwind?