draculatheme.com Open in urlscan Pro
76.76.21.61  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Part of September's purchases will go towards curing childhood cancer. Read more
DraculaTheme

K
 * About
 * Blog
 * Contribute
 * Shop
 * Dracula PRO
 * 22,534


TAILWIND

Dracula Theme for 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.



DetailsView source codeDownload ZIP fileReport an issueEdit this page
Contributors3
 * 
   nickgraffis
 * 
   screendriver
 * 
   zenorocha

Be more productive


DRACULA PRO

Aesthetically pleasing, Dracula PRO is a color scheme and UI theme tailored for
programming.

Join the dark sideBe the first to know about new products, special releases, and
much more.
Subscribe
7,449 people enjoy it!

Subscribe to the RSS Feed.

Dracula ThemeThe most famous dark theme ever created and available
everywhere.Made with 💜 by Zeno Rocha and Luxonauta
Projects
 * Dracula Theme
 * Dracula PRO
 * Dracula UI
 * Dracula Shop

Resources
 * About
 * Blog
 * Contribute
 * Open Dashboard
 * Spec

Community
 * Twitter
 * Github
 * Discord
 * Reddit
 * Wikipedia