Subscribe to the RSS Feed.

Tailwind
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.
Installation
npm i tailwind-dracula --save-dev
Usage
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. <i>ie. darker, pink, purple</i>
- The vampire name option. <i>ie. dracula, vonCount, buffy</i>
The default color names for Dracula can override the tailwind default style names.
Prefixing color names
By default the plugin accepts a prefix that can be used for the color name options (to avoid clashes with tailwind defaults).
plugins: [ require('tailwind-dracula')('dracula'), ],
Then use the color name option with the dracula prefix, but use the vampire name options without the prefix
<div class="bg-dracula-pink"> <p class="text-nosferatu">I vant to suck your blood...</p> <p class="text-pink-500">Tailwind is cool...</p> //still works! </div>
You can also add the prefix for <b><i>ALL</i></b> names by passing true
into the second parameter.
plugins: [ require('tailwind-dracula')('dracula', true), ],
Now all colors within dracula will require the dracula prefix
<div class="bg-dracula-pink"> //works! <p class="text-nosferatu ">I vant to suck your blood...</p> //doesn't work! <p class="text-dracula-buffy ">Flesh of my flesh...</p> //works! <p class="text-pink-500 ">Tailwind is cool...</p> //still works! </div>
Changing color names
You can just pull in some of the colors and add them to tailwind
const dracula = require('tailwind-dracula/colors')
theme: {
extend: {
colors: {
...dracula //adds all the colors
pinkish: dracula.buffy //just adds buffy with the name 'pinkish'
}
}
},
Full Color Palette
You can also access a full range of color options (50 - 900) outside of the default colors:
darker/Nosferatu
Number | Hex |
--- | --- | ---
50 |
#cdd0e4
|
100 |
#b5bad6
|
200 |
#9ea4c8
|
300 |
#888fb8
|
400 |
#727aa8
|
500 |
#5f6795
|
600 |
#53597c
|
700 |
#454a64
|
800 |
#373a4d
|
900 |
#282a36
|
DEFAULT |
#282a36
|
dark/Aro
Number | Hex |
--- | --- | ---
50 |
#f7f7fb
|
100 |
#dfe1ed
|
200 |
#c7cadf
|
300 |
#b1b5d0
|
400 |
#9ba0c0
|
500 |
#858bb0
|
600 |
#71779f
|
700 |
#606689
|
800 |
#525771
|
900 |
#44475a
|
DEFAULT |
#44475a
|
light/Cullen
Number | Hex |
--- | --- | ---
50 |
#f8f8f2
|
100 |
#eaeada
|
200 |
#dcdcc3
|
300 |
#cdcdac
|
400 |
#bdbd96
|
500 |
#adad81
|
600 |
#9c9c6c
|
700 |
#85855d
|
800 |
#6d6d4f
|
900 |
#565641
|
DEFAULT |
#f8f8f2
|
blue/VonCount
Number | Hex |
--- | --- | ---
50 |
#f0f2f8
|
100 |
#d7dcec
|
200 |
#bec6df
|
300 |
#a6b0d1
|
400 |
#8f9bc3
|
500 |
#7886b4
|
600 |
#6272a4
|
700 |
#54628c
|
800 |
#485273
|
900 |
#3b425a
|
DEFAULT |
#6272a4
|
cyan/VanHelsing
Number | Hex |
--- | --- | ---
50 |
#fafeff
|
100 |
#d4f8ff
|
200 |
#aff0fe
|
300 |
#8be9fd
|
400 |
#67e1fb
|
500 |
#44d9f8
|
600 |
#22d0f5
|
700 |
#0dbfe5
|
800 |
#0ca0bf
|
900 |
#0c819a
|
DEFAULT |
#8be9fd
|
green/Blade
Number | Hex |
--- | --- | ---
50 |
#e2ffe9
|
100 |
#bcffcd
|
200 |
#97feb1
|
300 |
#73fc96
|
400 |
#50fa7b
|
500 |
#2df760
|
600 |
#0cf346
|
700 |
#0ccd3d
|
800 |
#0ba833
|
900 |
#0a8329
|
DEFAULT |
#50fa7b
|
orange/Morbius
Number | Hex |
--- | --- | ---
50 |
#ffefdd
|
100 |
#ffdcb7
|
200 |
#ffca92
|
300 |
#ffb86c
|
400 |
#fda648
|
500 |
#fb9325
|
600 |
#f38107
|
700 |
#cd6d08
|
800 |
#a75a08
|
900 |
#824707
|
DEFAULT |
#ffb86c
|
pink/Buffy
Number | Hex |
--- | --- | ---
50 |
#ffeaf6
|
100 |
#ffc4e6
|
200 |
#ff9fd6
|
300 |
#ff79c6
|
400 |
#fd55b6
|
500 |
#fb31a5
|
600 |
#f80e95
|
700 |
#d90880
|
800 |
#b3086b
|
900 |
#8e0855
|
DEFAULT |
#ff79c6
|
purple/Dracula
Number | Hex |
--- | --- | ---
50 |
#fefeff
|
100 |
#e9dafe
|
200 |
#d3b6fc
|
300 |
#bd93f9
|
400 |
#a771f6
|
500 |
#924ff2
|
600 |
#7d2eed
|
700 |
#6916e0
|
800 |
#5914bb
|
900 |
#491298
|
DEFAULT |
#bd93f9
|
red/Marcelin
Number | Hex |
--- | --- | ---
50 |
#ffecec
|
100 |
#ffc6c6
|
200 |
#ffa0a0
|
300 |
#ff7b7b
|
400 |
#ff5555
|
500 |
#fd3131
|
600 |
#fb0e0e
|
700 |
#dd0606
|
800 |
#b70707
|
900 |
#910707
|
DEFAULT |
#ff5555
|
yellow/Lincoln
Number | Hex |
--- | --- | ---
50 |
#fefff8
|
100 |
#fafed3
|
200 |
#f6fcaf
|
300 |
#f1fa8c
|
400 |
#ebf769
|
500 |
#e5f347
|
600 |
#dfef26
|
700 |
#ccdd12
|
800 |
#abb811
|
900 |
#899410
|
DEFAULT |
#f1fa8c
|