Tokyo Night for Tailwind CSS v4

The Tokyo Night theme as Tailwind CSS theme color variables. Compatible with version 4 of Tailwind.

Usage

1. Copy the theme CSS file(s) to your project.

2. Import in the CSS file to be processed by Tailwind CSS.

   cssCopy

   /* styles.css or whatever your CSS file is named */
   @import "tailwindcss";
   
   @import "./tokyonight_day.css";
   @import "./tokyonight_moon.css";
   @import "./tokyonight_night.css";
   @import "./tokyonight_storm.css";
   

3. Use the theme's colors where ever you would normally reference colors.

   htmlCopy

   <button class="border border-tokyonight-moon-border bg-tokyonight-moon-bg text-tokyonight-moon-fg">
     Click me!
   </button>
   

Demos

Demos for each theme are available on Tailwind CSS's web playground:

• tokyonight_day
• tokyonight_moon
• tokyonight_night
• tokyonight_storm