Dark theme for Tailwind and 214+ apps


Tailwind Theme Preview



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 --save-dev


In your tailwind.config.js:

  plugins: [

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>

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: [

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!

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!

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'

Stay up to date

Receive updates about this theme and more about Dracula.


This theme wouldn't exist without these people. Wanna help too? Check the repository on GitHub.

  • nickgraffis
  • zenorocha

Made with by Zeno Rocha
under MIT license