如何在React的Tailwind中使用HSL自定义颜色作为任意值？

需求 #

希望在React的<ul>标签的className中，使用以下HSL颜色作为Tailwind任意值：

• 柔和橙色：hsl(35, 77%, 62%)
• 柔和红色：hsl(5, 85%, 63%)

当前代码片段 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        colors: {
            'orange': 'hsl(35, 77%, 62%)',
            'red': 'hsl(5, 85%, 63%)'
        }

    },
    plugins: []
};

App.js #

<ul className="flex font-['Inter-Regular'] hover:text-[color:hsl(35, 77%, 62%)] flex-row items-center"> ...

</ul>

index.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

//...

遇到的问题 #

尝试过相关解决方案但无效，希望无需安装任何依赖，直接在<ul>的className中使用hsl()作为任意值且不转换格式，恳请帮助！

内容的提问来源于stack exchange，提问作者user