mirror of
https://github.com/catppuccin/tailwindcss.git
synced 2026-01-09 05:01:09 +08:00
c0b77cd04a
* chore: cleanup and prepare for v4 Due to tailwinds extensive rewrite in version 4 a lot of things previously used in this repo aren't needed anymore. * feat: add SASS utilities * chore: build * chore: rename "shades" to "palette" * chore: unminified build * feat: add default prefix * feat(demo): very WIP not-even-MVP * feat(demo): responsive hero section * feat(demo): examples * feat(demo): calendar widget * feat(demo): credit card and new layout * feat(demo): animate on hover * refactor: use ctp/palette beta release instead of building the palette locally this now uses the beta relase from ctp/palette. * refactor: move to monorepo * build(npm): fix link * chore: rename `tailwind.config` -> `config` * build(npm): set version to `1.0.0-beta.1` * docs: more generic instructions * ci: don't try to publish on tag * feat!: generate frappe and macchiato alongside mocha * chore: remove publish * build(npm): add description * ci: specify node version * end of day commit – this is a mess * fix: typo `roswater` -> `rosewater` * feat(demo): working theme switcher * style(flavour switcher): apply proper CSS styling * fix(colour grid): avoid mobile overflow * fix(hero): no more ultra wide stretching * refactor(demo): use different colour for currently selected theme * chore: remove placeholder text * fix(colour swatches): mobile border collapse * feat(layout): add simple footer * refactor(hero): enlarge contents on higher resolutions * ci: update github-pages workflow & pnpm --------- Co-authored-by: sgoudham <sgoudham@gmail.com>
Catppuccin for TailwindCSS
Usage
-
Install the plugin
npm install -D @catppuccin/tailwindcss pnpm add -D @catppuccin/tailwindcss yarn add -D @catppuccin/tailwindcss -
Import the theme in the same file as your
tailwindcssimport@import "tailwindcss"; /* Choose between `mocha`, `frappe` or `macchiato` for dark mode, latte is included as the light mode flavour. We recommend using `mocha` for dark mode. */ @import "@catppuccin/tailwindcss/mocha.css"; -
Use it in your markup!
<!-- All colours are prefixed with `ctp` --> <body class="bg-ctp-base"> <h1 class="text-ctp-text">Welcome!</h1> <!-- Gradients are supported too --> <button className="bg-linear-50 from-ctp-red-400 to-ctp-mauve-400 text-ctp-base hover:from-ctp-red hover:to-ctp-mauve" > Click Here </button> <!-- Flavour variants are predefined (`latte`, `frappe`, `macchiato`, and `mocha`) which allows you to force specific flavours and support custom theme switchers. --> <div className="latte"> <p className="bg-ctp-base text-ctp-text">Hello from Latte!</p> </div> </body>
Check out some more advanced examples at tailwindcss.catppuccin.com!
💝 Thanks to
Current maintainers
Previous maintainer(s)
Copyright © 2021-present Catppuccin Org
