Tailwind

Dracula

Dark theme for Tailwind and 341+ apps

StarFork

Tailwind Theme Preview

4,335 views

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

Full Color Palette

You can also access a full range of color options (50 - 900) outside of the default colors:

darker/Nosferatu

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #cdd0e4 | #cdd0e4 100 | #b5bad6 | #b5bad6 200 | #9ea4c8 | #9ea4c8 300 | #888fb8 | #888fb8 400 | #727aa8 | #727aa8 500 | #5f6795 | #5f6795 600 | #53597c | #53597c 700 | #454a64 | #454a64 800 | #373a4d | #373a4d 900 | #282a36 | #282a36 DEFAULT | #282a36 | #282a36

dark/Aro

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #f7f7fb | #f7f7fb 100 | #dfe1ed | #dfe1ed 200 | #c7cadf | #c7cadf 300 | #b1b5d0 | #b1b5d0 400 | #9ba0c0 | #9ba0c0 500 | #858bb0 | #858bb0 600 | #71779f | #71779f 700 | #606689 | #606689 800 | #525771 | #525771 900 | #44475a | #44475a DEFAULT | #44475a | #44475a

light/Cullen

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #f8f8f2 | #f8f8f2 100 | #eaeada | #eaeada 200 | #dcdcc3 | #dcdcc3 300 | #cdcdac | #cdcdac 400 | #bdbd96 | #bdbd96 500 | #adad81 | #adad81 600 | #9c9c6c | #9c9c6c 700 | #85855d | #85855d 800 | #6d6d4f | #6d6d4f 900 | #565641 | #565641 DEFAULT | #f8f8f2 | #f8f8f2

blue/VonCount

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #f0f2f8 | #f0f2f8 100 | #d7dcec | #d7dcec 200 | #bec6df | #bec6df 300 | #a6b0d1 | #a6b0d1 400 | #8f9bc3 | #8f9bc3 500 | #7886b4 | #7886b4 600 | #6272a4 | #6272a4 700 | #54628c | #54628c 800 | #485273 | #485273 900 | #3b425a | #3b425a DEFAULT | #6272a4 | #6272a4

cyan/VanHelsing

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #fafeff | #fafeff 100 | #d4f8ff | #d4f8ff 200 | #aff0fe | #aff0fe 300 | #8be9fd | #8be9fd 400 | #67e1fb | #67e1fb 500 | #44d9f8 | #44d9f8 600 | #22d0f5 | #22d0f5 700 | #0dbfe5 | #0dbfe5 800 | #0ca0bf | #0ca0bf 900 | #0c819a | #0c819a DEFAULT | #8be9fd | #8be9fd

green/Blade

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #e2ffe9 | #e2ffe9 100 | #bcffcd | #bcffcd 200 | #97feb1 | #97feb1 300 | #73fc96 | #73fc96 400 | #50fa7b | #50fa7b 500 | #2df760 | #2df760 600 | #0cf346 | #0cf346 700 | #0ccd3d | #0ccd3d 800 | #0ba833 | #0ba833 900 | #0a8329 | #0a8329 DEFAULT | #50fa7b | #50fa7b

orange/Morbius

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #ffefdd | #ffefdd 100 | #ffdcb7 | #ffdcb7 200 | #ffca92 | #ffca92 300 | #ffb86c | #ffb86c 400 | #fda648 | #fda648 500 | #fb9325 | #fb9325 600 | #f38107 | #f38107 700 | #cd6d08 | #cd6d08 800 | #a75a08 | #a75a08 900 | #824707 | #824707 DEFAULT | #ffb86c | #ffb86c

pink/Buffy

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #ffeaf6 | #ffeaf6 100 | #ffc4e6 | #ffc4e6 200 | #ff9fd6 | #ff9fd6 300 | #ff79c6 | #ff79c6 400 | #fd55b6 | #fd55b6 500 | #fb31a5 | #fb31a5 600 | #f80e95 | #f80e95 700 | #d90880 | #d90880 800 | #b3086b | #b3086b 900 | #8e0855 | #8e0855 DEFAULT | #ff79c6 | #ff79c6

purple/Dracula

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #fefeff | #fefeff 100 | #e9dafe | #e9dafe 200 | #d3b6fc | #d3b6fc 300 | #bd93f9 | #bd93f9 400 | #a771f6 | #a771f6 500 | #924ff2 | #924ff2 600 | #7d2eed | #7d2eed 700 | #6916e0 | #6916e0 800 | #5914bb | #5914bb 900 | #491298 | #491298 DEFAULT | #bd93f9 | #bd93f9

red/Marcelin

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #ffecec | #ffecec 100 | #ffc6c6 | #ffc6c6 200 | #ffa0a0 | #ffa0a0 300 | #ff7b7b | #ff7b7b 400 | #ff5555 | #ff5555 500 | #fd3131 | #fd3131 600 | #fb0e0e | #fb0e0e 700 | #dd0606 | #dd0606 800 | #b70707 | #b70707 900 | #910707 | #910707 DEFAULT | #ff5555 | #ff5555

yellow/Lincoln

Number | Hex | Color Picker Boxes --- | --- | --- 50 | #fefff8 | #fefff8 100 | #fafed3 | #fafed3 200 | #f6fcaf | #f6fcaf 300 | #f1fa8c | #f1fa8c 400 | #ebf769 | #ebf769 500 | #e5f347 | #e5f347 600 | #dfef26 | #dfef26 700 | #ccdd12 | #ccdd12 800 | #abb811 | #abb811 900 | #899410 | #899410 DEFAULT | #f1fa8c | #f1fa8c

Stay up to date

Get updates about this theme and more. 7,266 people enjoy it.

Contributors

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

  • nickgraffis
  • screendriver
  • zenorocha
Edit this documentation on GitHub.

Made with by Zeno Rocha
under MIT license