Back to Tokyonight Nvim

Tokyo Night for Tailwind CSS v4

extras/tailwindv4/README.md

4.14.11.0 KB
Original Source

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: