# tailwindcss-themes

> Simple Tailwind CSS themes switcher

Latest version **1.0.0** (published 2023-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-themes
pnpm add tailwindcss-themes
yarn add tailwindcss-themes
bun add tailwindcss-themes
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-01-09 |
| First published | 2023-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jose María Gómez |
| Maintainers | josegm |
| Keywords | Tailwind, CSS, Theme |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-themes
- Repository: https://github.com/josemariagomez/tailwindcss-custom-themes
- Homepage: https://github.com/josemariagomez/tailwindcss-custom-themes#readme
- Issues: https://github.com/josemariagomez/tailwindcss-custom-themes/issues
- npm.io page: https://npm.io/package/tailwindcss-themes

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-01-09

## README

# Apply themes to Tailwind CSS 💅🏻

This Tailwind CSS plugin can be used to create custom themes and apply styles just like native dark mode.
Just use your theme as an usual Tailwind CSS variant.

### Installation

First, you need to have [Tailwind CSS](https://tailwindcss.com/) installed. Then, install the plugin by running this command:

```bash
npm install tailwindcss-themes
```

### Configuration

Set your theme names in your `tailwind.config.js` file and register the plugin

```js
module.exports = {
  theme: {
    themeClasses: ['retro', 'minimal'], // All themes you want to use
  },
  plugins: [require('tailwindcss-themes')],
};
```

### Usage

The plugin will add a new variant for each theme class that you configured before, so using it is as easy as using the default dark mode variant.

**Remember that you need to set a class in your HTML, maybe in the `<html>`, or simply wrap your code in a tag with the class you want.**

```html
<html>
  <!-- Just switch this class to change your website/app theme -->
  <body class="retro">
    <h1 class="text-3xl font-serif retro:font-mono minimal:font-sans">Hello World</h1>
  </body>
</html>
```

---
_Source: https://npm.io/package/tailwindcss-themes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._