mirror of
https://github.com/catppuccin/tailwindcss.git
synced 2026-01-09 05:01:09 +08:00
Catppuccin for TailwindCSS
Usage
- Install the plugin
npm install -D @nekowinston/ctp-tailwindcss
- Configure your
tailwind.config.js
module.exports = {
// ...other settings
plugins: [
require('@nekowinston/ctp-tailwindcss'),
],
}
- Optional: customize the plugin
module.exports = {
// ...other settings
plugins: [
require('@nekowinston/ctp-tailwindcss')({
// prefix to use, e.g. `text-pink` becomes `text-ctp-pink`.
// default is `false`, which means no prefix
prefix: 'ctp',
// which flavour of colours to use by default, in the `:root`
defaultFlavour: 'latte'
}),
],
}
- Use it in your markup!
<!-- switching the class for parent elements changes the flavour! -->
<body class="frappe">
<h1 class="bg-base text-pink">
Hello world!
</h1>
</body>
You can find examples for Next.js and Svelte in the examples folder.
💝 Thanks to
Copyright © 2021-present Catppuccin Org
