https://github.com/mia-cx/tailwindcss-themes
TailwindCSS plugin for theming. Supports configurable selectors, media queries, and utility defaults.
https://github.com/mia-cx/tailwindcss-themes
dark-mode tailwindcss tailwindcss-plugin themes
Last synced: 2 months ago
JSON representation
TailwindCSS plugin for theming. Supports configurable selectors, media queries, and utility defaults.
- Host: GitHub
- URL: https://github.com/mia-cx/tailwindcss-themes
- Owner: mia-cx
- Created: 2024-06-19T14:43:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-24T02:32:34.000Z (almost 2 years ago)
- Last Synced: 2025-01-13T19:52:03.742Z (over 1 year ago)
- Topics: dark-mode, tailwindcss, tailwindcss-plugin, themes
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@mia-cx/tailwindcss-themes
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# [@mia-cx/tailwindcss-themes](https://github.com/mia-cx/tailwindcss-themes)
A Tailwind plugin for theming. Provide media queries and/or multiple selectors, and variants for each theme will be generated!
Heavily inspired and massively enabled by [JNavith/tailwindcss-theme-variants](https://github.com/JNavith/tailwindcss-theme-variants)
## Getting Started
```sh
pnpm i -D @mia-cx/tailwindcss-themes
```
```js
// tailwind.config.js
const themes = require('@mia-cx/tailwindcss-themes');
module.exports = {
// ...
plugins: [
// ...
themes({
themes: {
light: {
selectors: '.light',
},
dark: {
selectors: '.dark',
},
},
baseSelector: ':root',
fallback: 'dark',
}),
],
// ...
};
```
## To Do
- [ ] Add auto-generated utilities based on each theme's `theme` definition.