通过 npm 安装的 tailwindcss v3 中未显示自定义颜色

Question

我正在使用通过 NPM 安装的 tailwind cssv3，我将 tailwind.config.js 更改为

module.exports = {
  content: ["./*html"],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'myblack': '#ffffff',
      'myblack': '#000000',
      'myorange': '#FF7E00',
      'mygray': '#A8A8A8',
      'mywhiteuse1': '#F1EBEB',
      'mywhiteuse2': '#E9E9E9',
      'myaction': '#B31717',
      'myneutral1': '#A8DFBB',
      'myneutral2': '#93BF97',
    },
  },

  plugins: [],
}

我更改了此代码

<div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
    <div class="p-2 sm:w-1/2 w-full ">
        <div
            class="bg-orange-400 rounded flex p-4 h-full items-centertransition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                class="text-gray-500 w-6 h-6 flex-shrink-0 mr-4" viewBox="0 0 24 24">
                <path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
                <path d="M22 4L12 14.01l-3-3"></path>
            </svg>
            <span class="title-font font-medium text-gray-600">Attendance management</span>
        </div>
    </div>
</div>

到

                    <div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
                        <div class="p-2 sm:w-1/2 w-full ">
                            <div
                                class="bg-orange-400 rounded flex p-4 h-full items-centertransition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="3" class="text-gray-500 w-6 h-6 flex-shrink-0 mr-4"
                                    viewBox="0 0 24 24">
                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
                                    <path d="M22 4L12 14.01l-3-3"></path>
                                </svg>
                                <span class="title-font font-medium text-mywhiteuse1">Attendance management</span>
                            </div>
                        </div>
                    </div>

并且文本颜色没有改变我尝试了这个 tailwindcss 官方文档中的所有方法 link:https://tailwindcss.com/docs/customizing-colors 但仍然没有任何方法有效请帮助我

Answer 1

您可以像这样直接使用任何自定义颜色text-[#F1EBEB]

<span class="title-font font-medium text-[#F1EBEB]">Attendance management</span>

这是完整的代码

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
                        <div class="p-2 sm:w-1/2 w-full ">
                            <div
                                class="bg-orange-400 rounded flex p-4 h-full items-centertransition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="3" class="text-gray-500 w-6 h-6 flex-shrink-0 mr-4"
                                    viewBox="0 0 24 24">
                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
                                    <path d="M22 4L12 14.01l-3-3"></path>
                                </svg>
                                <span class="title-font font-medium text-[#F1EBEB]">Attendance management</span>
                            </div>
                        </div>
                    </div>

通过 npm 安装的 tailwindcss v3 中未显示自定义颜色

custom colors not showing in tailwindcss v3 installed via npm

javascript

html

colors

customization

tailwind-css