custom colors not showing in tailwindcss v3 installed via npm

Question

I am using a tailwind cssv3 installed via NPM and I changed my tailwind.config.js to

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: [],
}

and I changed this code from

<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>

to

                    <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>

and the text color is not changing I tried every method in this tailwindcss official documentation link:https://tailwindcss.com/docs/customizing-colors and still no method is working please help me

Answer 1

You can directly use any custom color like this text-[#F1EBEB]

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

This is the complete code

<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>