A super tiny tailwind plugin that enables the use of the Dracula colour palette.
Hopefully this will give you some great dark colors in your next project, and save you 5 min of setting up custom colors.
npm i tailwind-dracula
In your tailwind.config.js:
plugins: [
require('tailwind-dracula'),
],You now have access to the Dracula theme anywhere you would use normally tailwind colours.
<div class="bg-buffy">
<p class="text-nosferatu ">I vant to suck your blood...</p>
</div>Color naming has two options (based on Dracula's names with some changes where needed):
- The color name option. ie. darker, pink, purple
- The vampire name option. ie. dracula, vonCount, buffy
✋ **The default color names for Dracula can override the tailwind default style names. See below on how to prefix your Dracula color names.
| Palette | Hex | RGB | HSL |  |
|---|---|---|---|---|
| Darker/Nosferatu | #282a36 |
40 42 54 |
231° 15% 18% |
 |
| Dark/Aro | #44475a |
68 71 90 |
232° 14% 31% |
 |
| Light/Cullen | #f8f8f2 |
248 248 242 |
60° 30% 96% |
 |
| Blue/VonCount | #6272a4 |
98 114 164 |
225° 27% 51% |
 |
| Cyan/VanHelsing | #8be9fd |
139 233 253 |
191° 97% 77% |
 |
| Green/Blade | #50fa7b |
80 250 123 |
135° 94% 65% |
 |
| Orange/Morbius | #ffb86c |
255 184 108 |
31° 100% 71% |
 |
| Pink/Buffy | #ff79c6 |
255 121 198 |
326° 100% 74% |
 |
| Purple/Dracula | #bd93f9 |
189 147 249 |
265° 89% 78% |
 |
| Red/Marcelin | #ff5555 |
255 85 85 |
0° 100% 67% |
 |
| Yellow/Lincoln | #f1fa8c |
241 250 140 |
65° 92% 76% |
 |