Skip to main content
Home
Browse packagesDocsSign in

@donovanglover/base16-tailwind@1.0.0
Built and signed on GitHub Actions

latest
donovanglover/base16-tailwind

Easily use base16 color schemes with Tailwind CSS.

This package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
100%
Published
5 months ago (1.0.0)

base16-tailwind

Easily use base16 color schemes with Tailwind CSS.

Features

  • All the latest base16 color schemes with base16-${name}, or bring your own
  • Light to dark shades in order from text-100 to text-800
  • Human-friendly class names like bg-orange and text-red
  • Interoperability with the base24 system and support for bright styles like bg-green-bright
  • Tailwind only imports color schemes you use, minimizing the bundle size
  • Support for dark: and other Tailwind variants with modern CSS variables
  • Built-in support for @tailwindcss/typography with the withTypography option

Installation

npx jsr add @donovanglover/base16-tailwind

See the jsr page for other package managers.

Usage

See Base16Options for the list of available options.

tailwind.config.ts:

import { base16Tailwind } from 'base16-tailwind'
import type { Config } from 'tailwindcss/types/config'

const tailwindConfig: Partial<Config> = {
  plugins: [
    base16Tailwind
  ]
}

export default tailwindConfig

app/layout.tsx:

import '@/app/globals.css'

export interface RootLayoutProps {
  children: React.ReactNode
}

export default function RootLayout ({ children }: RootLayoutProps): React.ReactElement {
  return (
    <html lang='en-US' className='base16-emil dark:base16-monokai'>
      <body className='text-100 bg-800'>
        {children}
      </body>
    </html>
  )
}

components/ChangeThemeButton.tsx:

'use client'

const themes = [
  'base16-danqing',
  'base16-tarot',
  'base16-embers'
]

function changeTheme (): void {
  document.documentElement.className = themes[Math.floor(Math.random() * themes.length)]
}

export default function ChangeThemeButton (): React.ReactElement {
  return (
    <button onClick={changeTheme}>Change Theme</button>
  )
}

Contributing

Run npm ci to do a clean install and use the lint and test scripts to check your work.

Built and signed on
GitHub Actions
View transparency log

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@donovanglover/base16-tailwind

Import symbol

import * as base___tailwind from "@donovanglover/base16-tailwind";
or

Import directly with a jsr specifier

import * as base___tailwind from "jsr:@donovanglover/base16-tailwind";

Add Package

pnpm i jsr:@donovanglover/base16-tailwind
or (using pnpm 10.8 or older)
pnpm dlx jsr add @donovanglover/base16-tailwind

Import symbol

import * as base___tailwind from "@donovanglover/base16-tailwind";

Add Package

yarn add jsr:@donovanglover/base16-tailwind
or (using Yarn 4.8 or older)
yarn dlx jsr add @donovanglover/base16-tailwind

Import symbol

import * as base___tailwind from "@donovanglover/base16-tailwind";

Add Package

npx jsr add @donovanglover/base16-tailwind

Import symbol

import * as base___tailwind from "@donovanglover/base16-tailwind";

Add Package

bunx jsr add @donovanglover/base16-tailwind

Import symbol

import * as base___tailwind from "@donovanglover/base16-tailwind";