dracula/tailwind

🧛🏻‍♂️ Dark theme for Tailwind

Dracula for Tailwind

A dark theme for Tailwind.

Install

All instructions can be found at draculatheme.com/tailwind.

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%

Team

This theme is maintained by the following person(s) and a bunch of awesome contributors.

Nick Graffis

Community

• Twitter - Best for getting updates about themes and new stuff.
• GitHub - Best for asking questions and discussing issues.
• Discord - Best for hanging out with the community.

License

MIT License

tailwind's Issues

Not an Issue

This is not a bug, just wanted to share updated tailwind config values.

module.exports = {
...,
theme: {
    extend: {
        colors: {
            darker: {
                    DEFAULT: '#282a36',
                    '50': '#f6f7f9',
                    '100': '#ecedf2',
                    '200': '#d5d7e2',
                    '300': '#b1b6c8',
                    '400': '#868faa',
                    '500': '#677090',
                    '600': '#525977',
                    '700': '#434861',
                    '800': '#3a3f52',
                    '900': '#343746',
                    '950': '#282a36',
                },
                dark: {
                    DEFAULT: '#44475a',
                    '50': '#f6f6f9',
                    '100': '#ededf1',
                    '200': '#d7d8e0',
                    '300': '#b3b6c6',
                    '400': '#8a8fa6',
                    '500': '#6c718b',
                    '600': '#565a73',
                    '700': '#44475a',
                    '800': '#3d404f',
                    '900': '#363844',
                    '950': '#24242d',
                },
                light: {
                    DEFAULT: '#f8f8f2',
                    '50': '#f8f8f2',
                    '100': '#f0f0e4',
                    '200': '#e1e1c7',
                    '300': '#cdcba4',
                    '400': '#b8b27f',
                    '500': '#aaa065',
                    '600': '#9c8d5a',
                    '700': '#82744c',
                    '800': '#6a5e42',
                    '900': '#574d37',
                    '950': '#2e281c',
                },
                blue: {
                    DEFAULT: '#6272a4',
                    '50': '#f3f6fa',
                    '100': '#e8f1f7',
                    '200': '#d6e3ef',
                    '300': '#bdcfe4',
                    '400': '#a1b7d8',
                    '500': '#89a0cb',
                    '600': '#7184ba',
                    '700': '#6272a4',
                    '800': '#4f5d84',
                    '900': '#444e6b',
                    '950': '#282e3e',
                },
                cyan: {
                    DEFAULT: '#8be9fd',
                    '50': '#ecfdff',
                    '100': '#cef7ff',
                    '200': '#8be9fd',
                    '300': '#65dffb',
                    '400': '#1fc6f1',
                    '500': '#03a9d7',
                    '600': '#0586b5',
                    '700': '#0c6b92',
                    '800': '#135877',
                    '900': '#154964',
                    '950': '#072f45',
                },
                green: {
                    DEFAULT: '#50fa7b',
                    '50': '#eefff1',
                    '100': '#d6ffe0',
                    '200': '#b0ffc4',
                    '300': '#73ff97',
                    '400': '#50fa7b',
                    '500': '#04e33d',
                    '600': '#00bd2e',
                    '700': '#019428',
                    '800': '#087325',
                    '900': '#085f21',
                    '950': '#00350f',
                },
                orange: {
                    DEFAULT: '#ffb86c',
                    '50': '#fff7ed',
                    '100': '#ffedd4',
                    '200': '#ffd8a9',
                    '300': '#ffb86c',
                    '400': '#fe9339',
                    '500': '#fc7313',
                    '600': '#ed5809',
                    '700': '#c54109',
                    '800': '#9c3410',
                    '900': '#7e2d10',
                    '950': '#441406',
                },
                pink: {
                    DEFAULT: '#ff79c6',
                    '50': '#fef1f9',
                    '100': '#fee5f4',
                    '200': '#ffcbec',
                    '300': '#ffa1da',
                    '400': '#ff79c6',
                    '500': '#fa3aa3',
                    '600': '#ea1880',
                    '700': '#cc0a65',
                    '800': '#a80c53',
                    '900': '#8c0f47',
                    '950': '#560127',
                },
                purple: {
                    DEFAULT: '#bd93f9',
                    '50': '#f9f5ff',
                    '100': '#f1e9fe',
                    '200': '#e5d6fe',
                    '300': '#d2b6fc',
                    '400': '#bd93f9',
                    '500': '#9b5af2',
                    '600': '#8439e4',
                    '700': '#7027c9',
                    '800': '#6025a4',
                    '900': '#4f1f84',
                    '950': '#330a61',
                },
                red: {
                    DEFAULT: '#ff5555',
                    '50': '#fff1f1',
                    '100': '#ffe1e1',
                    '200': '#ffc7c7',
                    '300': '#ffa0a0',
                    '400': '#ff5555',
                    '500': '#f83b3b',
                    '600': '#e51d1d',
                    '700': '#c11414',
                    '800': '#a01414',
                    '900': '#841818',
                    '950': '#480707',
                },
                yellow: {
                    DEFAULT: '#f1fa8c',
                    '50': '#fbfde9',
                    '100': '#f6fcc5',
                    '200': '#f1fa8c',
                    '300': '#f0f74d',
                    '400': '#f2f21d',
                    '500': '#e2da10',
                    '600': '#c3ad0b',
                    '700': '#9c7e0c',
                    '800': '#816312',
                    '900': '#6e5115',
                    '950': '#402b08',
                }
            }
        }
    }
}

Add documentation for shades

No breaking changes, but there are now shades called "50" - "900" similar to the tailwind color system. Add some documentation about this.

Request: Add TailWindCSS colour variants

I was wondering if you can add the additional the colour variants like TailWindCSS:

• bg-dracula-dracula (base)

• bg-dracula-dracula-50 ... bg-dracula-dracula-900

• text-dracula-dracula

• text-dracula-dracula-50 ... text-dracula-dracula-900

etc

web page has broken image links, tables not rendering

looks like you have broken links, and what looks like an intended markdwon table not getting translated, could be wrong though 😊