Tailwind

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: All Colors.