# 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.

   ```css
   /* 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.

   ```html
   <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](https://play.tailwindcss.com/kHihIJmxtf)
- [tokyonight_moon](https://play.tailwindcss.com/8yI7iYjuFj)
- [tokyonight_night](https://play.tailwindcss.com/L91QMbz7XU)
- [tokyonight_storm](https://play.tailwindcss.com/9mZNmRRIVQ)
