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 공식 문서 링크: https://tailwindcss.com/docs/customizing-colors 에서 모든 방법을 시도했지만 여전히 방법이 작동하지 않습니다. 도와주세요.
이와 같은 사용자 정의 색상을 직접 사용할 수 있습니다.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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다