Tint is a theme management plugin for Tailwind CSS 4, allowing you to define, organize, and apply themes dynamically. It provides a structured way to manage colors and tokens, ensuring consistency and contrast compliance across light and dark modes.
- 🎨 Multiple Theme Support – Easily define and switch between themes.
- 🌗 Light & Dark Modes – Customize themes with fine-tuned lightness values.
- ⚡ Token-Based Styling – Define reusable tokens for surfaces, actions, and interactive elements.
- 📦 Seamless Tailwind Integration – Works with
@configin Tailwind CSS.
npx jsr add @skylerknight/tint@latestpnpm dlx jsr add @skylerknight/tint@latestdeno add jsr:@skylerknight/tint@latestDefine your themes inside tint.config.js:
import tint from '@skylerknight/tint';
export default tint({
defaults: {
theme: 'light',
},
themes: [
{
name: 'light',
lightness: 85,
colors: {
base: '#ffffff',
brand: '#f87c17',
},
tokens: {
surface: {
default: -1.15,
well: -1.1,
raised: -1.2,
lowlight: -1.3,
highlight: -1.35,
},
action: {
default: 4,
hover: 5,
active: 6,
},
on: {
surface: 12,
action: -2,
},
},
},
{
name: 'dark',
lightness: 20,
colors: {
base: '#000000',
brand: '#f87c17',
},
tokens: {
surface: {
default: -1.3,
well: -1.35,
raised: -1.2,
lowlight: -1.15,
highlight: -1.1,
},
action: {
default: 4,
hover: 5,
active: 6,
},
on: {
surface: 12,
action: -2,
},
},
},
],
});Modify your main Tailwind CSS file (app.css or global.css):
@import 'tailwindcss';
@config './tint.config.js';This ensures that Tailwind processes the themes defined in tint.config.js.
Finally, you'll need to add a data-theme attribute to the root (html) of your project.
For example, if your theme name is dark you would add a data-theme="dark" attribute like so:
<html lang="en" data-theme="dark">
...
</html>- Themes are defined as objects inside
tint.config.js. - Light & Dark Modes are managed using
lightnessvalues. - Tokens allow structured styling with reusable values.
- Variants define how themes switch dynamically.
Tint will generate tailwind utility classes based on your configuration tokens like:
.bg-surface {
background-color: var(--color-surface);
}
.bg-surface-raised {
background-color: var(--color-surface-raised);
}
.bg-action {
color: var(--color-action);
}
.bg-action\:hover {
color: var(--color-action-hover);
}
.bg-action\:active {
color: var(--color-action-active);
}
.text-on-action {
color: var(--color-on-action);
}which can then be used like so:
<article class="bg-surface-raised p-8 rounded-xl">
<button class="bg-action text-on-action hover:bg-action-hover active:bg-action-active">Save</button>
</article>We welcome contributions! Feel free to open issues or submit pull requests.
This project is licensed under the MIT License.
If you find Tint useful, consider starring the repo! 🚀
For feedback and support, open an issue or reach out on Twitter.