Criei classes dropShadow personalizadas. E quero fazê-lo usar o sistema de cores do Tailwind como red-500
blue-200
.
Minha configuração atual:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
dropShadow: {
/* Adding all color I need is take so long!!! so I wanna use Tailwind's Color e.g red-500 blue-200 */
'custom-red': '0 4px 6px rgba(255, 0, 0, 0.5)',
'custom-green': '0 4px 6px rgba(0, 255, 0, 0.5)',
'custom-blue': '0 4px 6px rgba(0, 0, 255, 0.5)',
},
},
},
plugins: [],
}
Meu objetivo é usá-lo assim:
<div class="drop-shadow-custom-red-500 p......"></div>
<div class="drop-shadow-custom-purple-600 p......"></div>
<div class="drop-shadow-custom-blue-200 p......"></div>
Sei que posso simplesmente adicionar cada cor à configuração quando precisar, mas se eu puder usar a cor do tailwind, será mais útil.