README.md

Tailwind Dracula

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

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

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 ALL 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'
      }
    }
  },

Color Palette

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%

Credits

Dracula Theme
Dracula Theme GitHub