TailwindCSS UIKit Colors

A TailwindCSS plugin that adds iOS/macOS-style semantic colors with dark mode support.

Installation

npm install tailwindcss-uikit-colors

Usage

import { withUIKit } from 'tailwindcss-uikit-colors'
// or
import { withUIKit } from 'tailwindcss-uikit-colors/macos'

export default withUIKit({
  // your existing tailwind config
})

Then import the colors CSS in your main.css:

@import 'tailwindcss-uikit-colors/selector.css'

/*
  or
  @import 'tailwindcss-uikit-colors/media.css'
*/

Or macOS:

@import 'tailwindcss-uikit-colors/macos/selector.css'

/*
  or
  @import 'tailwindcss-uikit-colors/macos/media.css'
*/

For Tailwind CSS v4

Tailwind CSS v4

Colors

The plugin adds the following colors to your TailwindCSS configuration:

// tailwind.config.js

colors: {
  ...configColors,
}

License

2025 © Innei, Released under the MIT License.

Personal Website · GitHub @Innei