Tailswatch

Customizable Tailwind CSS 4+ themes for import into other applications. Includes 43 ready-to-use themes inspired by Bootswatch, Material Design, and popular programming languages.

Live Demo & Documentation →

Installation

npm install @pegasusheavy/tailswatch
# or
pnpm add @pegasusheavy/tailswatch
# or
yarn add @pegasusheavy/tailswatch

Quick Start

Import a theme in your CSS:

@import "@pegasusheavy/tailswatch/themes/cosmo";

Or import directly in your JavaScript/TypeScript:

import "@pegasusheavy/tailswatch/themes/cosmo";

That's it! Your Tailwind classes will now use the Cosmo theme colors.

Available Themes (43)

Bootswatch-Inspired (25)

| Theme | Description | Mode | |-------|-------------|------| | cerulean | A calm blue sky theme | Light | | cosmo | An ode to Metro | Light | | cyborg | Jet black and electric blue | Dark | | darkly | Flatly in night mode | Dark | | flatly | Flat and modern | Light | | journal | Crisp like a new sheet of paper | Light | | litera | The medium is the message | Light | | lumen | Light and shadow | Light | | lux | A touch of class | Light | | materia | Material is the metaphor | Light | | minty | A fresh feel | Light | | morph | A neumorphic layer | Light | | pulse | A trace of purple | Light | | quartz | A glassmorphic layer | Dark | | sandstone | A touch of warmth | Light | | simplex | Mini and minimalist | Light | | sketchy | A hand-drawn look | Light | | slate | Shades of gunmetal gray | Dark | | solar | A spin on Solarized | Dark | | spacelab | Silvery and sleek | Light | | superhero | The brave and the blue | Dark | | united | Ubuntu orange and unique font | Light | | vapor | A cyberpunk aesthetic | Dark | | yeti | A friendly foundation | Light | | zephyr | Breezy and light | Light |

Material Design (12)

| Theme | Description | Mode | |-------|-------------|------| | material-light-blue | Material Blue on light | Light | | material-dark-blue | Material Blue on dark | Dark | | material-light-indigo | Material Indigo on light | Light | | material-dark-indigo | Material Indigo on dark | Dark | | material-light-purple | Material Purple on light | Light | | material-dark-purple | Material Purple on dark | Dark | | material-light-teal | Material Teal on light | Light | | material-dark-teal | Material Teal on dark | Dark | | material-light-green | Material Green on light | Light | | material-dark-green | Material Green on dark | Dark | | material-light-deeporange | Material Deep Orange on light | Light | | material-dark-deeporange | Material Deep Orange on dark | Dark |

Programming Language-Inspired (4)

| Theme | Description | Mode | |-------|-------------|------| | oxide | Rust programming language inspired | Dark | | gopher | Go programming language inspired | Light | | evergreen | Node.js ecosystem inspired | Dark | | kernel | C/C++ inspired, professional and battle-tested | Dark |

Base Themes (2)

| Theme | Description | Mode | |-------|-------------|------| | default | Generic Tailwind CSS, no customization | Light | | dark | Simple dark mode base | Dark |

Usage Examples

With Tailwind CSS 4+

/* In your main CSS file */
@import "tailwindcss";
@import "@pegasusheavy/tailswatch/themes/cosmo";

Dynamic Theme Switching

<!-- Load themes as separate stylesheets -->
<link id="theme" rel="stylesheet" href="node_modules/@pegasusheavy/tailswatch/dist/themes/cosmo.css">

<script>
  function switchTheme(themeName) {
    document.getElementById('theme').href =
      `node_modules/@pegasusheavy/tailswatch/dist/themes/${themeName}.css`;
  }
</script>

Using CSS Variables

All themes expose CSS custom properties you can use directly:

.my-component {
  background: var(--color-primary-500);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

Design Tokens

Each theme provides a comprehensive set of design tokens:

Colors (50-950 shades)

• --color-primary-{shade} - Primary brand color
• --color-secondary-{shade} - Secondary color
• --color-accent-{shade} - Accent color
• --color-success-{shade} - Success states
• --color-warning-{shade} - Warning states
• --color-error-{shade} - Error states
• --color-info-{shade} - Info states

Surfaces

• --color-background - Page background
• --color-foreground - Default text color
• --color-surface - Card/component background
• --color-surface-elevated - Elevated surface
• --color-surface-muted - Muted surface
• --color-border - Border color

Typography

• --font-sans - Sans-serif font stack
• --font-heading - Heading font stack
• --font-mono - Monospace font stack

Effects

• --radius-{size} - Border radius (sm, default, md, lg, xl)
• --shadow-{size} - Box shadows (sm, default, md, lg, glow)

Creating Custom Themes

Create a new theme file:

@use "tailwindcss";

:root {
  /* Define your color palette */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* ... define other colors ... */

  color-scheme: light;
}

@theme {
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  /* ... register with Tailwind ... */
}

Project Structure

tailswatch/
├── src/
│   └── themes/           # Theme source files
│       ├── cosmo.scss
│       ├── material-light-blue.scss
│       └── ...
├── dist/                 # Compiled CSS (generated)
│   └── themes/
├── docs/                 # Documentation site (Angular)
└── scripts/              # Build scripts

Development

# Install dependencies
pnpm install

# Build all themes
pnpm run build

# Run documentation site
cd docs && pnpm install && pnpm start

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

MIT © Pegasus Heavy Industries LLC