base16-tailwind

base16-tailwind is a Tailwind CSS plugin that enables the usage of base16 color schemes as an alternative to the default Tailwind CSS colors.

The source code is available on GitHub.

Background

Chris Kempson is known for creating the original Base16 project. Each color scheme is a set of 16 colors that can be used in things like terminals, shells, and text editors.

The project lives on as Tinted Theming, and since I already use base16 schemes for my own setup, I wanted to let users choose between base16 schemes on websites and web apps as well.

Why base16-tailwind?

Tailwind CSS offers a slew of advantages over writing CSS raw, such as class checking with eslint-plugin-tailwindcss and hassle-free typography with @tailwindcss/typography.

By leveraging the power of Tailwind CSS, it becomes possible to offer all base16 color schemes without worrying about bundle size. Users instantly get access to all color schemes with auto-complete thanks to the Tailwind CSS language server.

How does it work?

Utility classes are created for each color scheme. CSS variables are used for the actual colors to enable the seamless switching between as many color schemes as one desires.

The library has 100% test coverage and thoroughly-written tests to ensure that everything works as expected.

Usage

You can use base16-tailwind in your own project by installing the package from the JavaScript Registry.

npx jsr add @donovanglover/base16-tailwind

This website uses base16-tailwind under the hood, and you can choose between hundreds of different color schemes below!