### Install Catppuccin TailwindCSS Plugin Source: https://github.com/catppuccin/tailwindcss/blob/main/README.md Install the Catppuccin TailwindCSS plugin using npm, pnpm, or yarn. This is the first step to integrating the theme into your project. ```sh npm install -D @catppuccin/tailwindcss pnpm add -D @catppuccin/tailwindcss yarn add -D @catppuccin/tailwindcss ``` -------------------------------- ### Create Gradients with Catppuccin Colors Source: https://context7.com/catppuccin/tailwindcss/llms.txt Illustrates how to create linear gradients using Catppuccin colors with TailwindCSS v4's gradient utilities. Examples include a simple button gradient with hover states, a complex gradient with multiple stops, and a text gradient using background clip. ```html

Get Started

Latte

``` -------------------------------- ### HTML: Display Accent Catppuccin Colors Source: https://context7.com/catppuccin/tailwindcss/llms.txt Illustrates the usage of accent color classes from the Catppuccin theme for text elements. These colors come with shade variants (e.g., 50-950) not shown in this basic example. ```html Catppuccin Accent Colors

Rosewater

Flamingo

Pink

Mauve

Red

Maroon

Peach

Yellow

Green

Teal

Sky

Sapphire

Blue

Lavender

``` -------------------------------- ### Utilize Catppuccin Accent Color Shades Source: https://context7.com/catppuccin/tailwindcss/llms.txt Shows how to apply specific shades (50-950) of Catppuccin accent colors for precise control over UI elements. Examples include background colors for divs, demonstrating the range from lightest to darkest variants. ```html

``` -------------------------------- ### Apply Catppuccin Flavor Variants Source: https://context7.com/catppuccin/tailwindcss/llms.txt Demonstrates how to force specific Catppuccin flavors (Latte, Frappé, Macchiato, Mocha) on elements using predefined flavor classes or flavor-specific variants. This allows for consistent theming across different sections or the entire page. ```html

This section always uses Latte colors regardless of system preference.

This section always uses Mocha dark theme colors.

Latte Section

Frappé Section

``` -------------------------------- ### Import Catppuccin Theme CSS Source: https://github.com/catppuccin/tailwindcss/blob/main/README.md Import the Catppuccin theme CSS after your main TailwindCSS import. You can choose from 'mocha', 'frappe', or 'macchiato' for dark mode, with 'latte' included for light mode. ```css @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"; ``` -------------------------------- ### Implement Theme Switching with JavaScript Source: https://context7.com/catppuccin/tailwindcss/llms.txt This JavaScript code enables dynamic theme switching by allowing users to select Catppuccin flavors (Latte, Frappé, Macchiato, Mocha) via radio buttons. It toggles flavor classes on the `document.documentElement`, saves the preference in `localStorage`, and respects system dark mode preferences. ```javascript function handleThemeChange() { const theme = document.querySelector('input[name="flavour"]:checked').value; if (theme === "auto") { // Respect system preference const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const defaultTheme = prefersDark ? "mocha" : "latte"; document.documentElement.className = defaultTheme; localStorage.setItem("theme-auto", "true"); } else { // Apply selected theme document.documentElement.className = theme; localStorage.setItem("theme", theme); localStorage.setItem("theme-auto", "false"); } } // Listen for theme changes const form = document.getElementById("flavour-switcher"); form.querySelectorAll('input[type="radio"]').forEach((selector) => { selector.addEventListener("change", handleThemeChange); }); // Restore saved theme on page load document.addEventListener("DOMContentLoaded", () => { const savedTheme = localStorage.getItem("theme"); if (savedTheme) { const radio = document.getElementById(savedTheme); if (radio) { radio.checked = true; handleThemeChange(); } } }); // Listen for system preference changes when in auto mode window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => { if (localStorage.getItem("theme-auto") === "true") { document.documentElement.className = event.matches ? "mocha" : "latte"; } }); ``` -------------------------------- ### HTML for Theme Switcher Form Source: https://context7.com/catppuccin/tailwindcss/llms.txt This HTML structure provides a user interface for selecting Catppuccin themes using radio buttons. Each option is styled to be visually appealing, with a `peer-checked` class to indicate the active selection. ```html ``` -------------------------------- ### HTML: Display Base Catppuccin Colors Source: https://context7.com/catppuccin/tailwindcss/llms.txt Demonstrates how to apply base Catppuccin background and text color classes to HTML elements. These classes represent non-accent colors without shade variants. ```html Catppuccin Base Colors

Base background

Mantle layer

Crust layer

Surface 0

Surface 1

Surface 2

Overlay 0

Overlay 1

Overlay 2

Primary text

Subtext 0

Subtext 1

``` -------------------------------- ### Define Custom Semantic Colors with CSS Source: https://context7.com/catppuccin/tailwindcss/llms.txt This CSS snippet demonstrates how to import Catppuccin themes and define custom semantic color aliases using CSS custom properties. It allows for consistent branding by mapping Catppuccin colors to semantic names like `--color-ctp-primary`. ```css /* styles/global.css */ @import "tailwindcss"; @import "@catppuccin/tailwindcss/mocha.css"; /* Custom dark variant definition */ @custom-variant dark (&:where(.frappe, .frappe *, .macchiato, .macchiato *, .mocha, .mocha *)); /* Define semantic color aliases */ @theme { /* Primary color mapped to blue */ --color-ctp-primary: var(--catppuccin-color-blue); --color-ctp-primary-50: var(--catppuccin-color-blue-50); --color-ctp-primary-100: var(--catppuccin-color-blue-100); --color-ctp-primary-200: var(--catppuccin-color-blue-200); --color-ctp-primary-300: var(--catppuccin-color-blue-300); --color-ctp-primary-400: var(--catppuccin-color-blue-400); --color-ctp-primary-500: var(--catppuccin-color-blue-500); --color-ctp-primary-600: var(--catppuccin-color-blue-600); --color-ctp-primary-700: var(--catppuccin-color-blue-700); --color-ctp-primary-800: var(--catppuccin-color-blue-800); --color-ctp-primary-900: var(--catppuccin-color-blue-900); --color-ctp-primary-950: var(--catppuccin-color-blue-950); /* Secondary color mapped to sky */ --color-ctp-secondary: var(--catppuccin-color-sky); --color-ctp-secondary-50: var(--catppuccin-color-sky-50); --color-ctp-secondary-100: var(--catppuccin-color-sky-100); --color-ctp-secondary-200: var(--catppuccin-color-sky-200); --color-ctp-secondary-300: var(--catppuccin-color-sky-300); --color-ctp-secondary-400: var(--catppuccin-color-sky-400); --color-ctp-secondary-500: var(--catppuccin-color-sky-500); --color-ctp-secondary-600: var(--catppuccin-color-sky-600); --color-ctp-secondary-700: var(--catppuccin-color-sky-700); --color-ctp-secondary-800: var(--catppuccin-color-sky-800); --color-ctp-secondary-900: var(--catppuccin-color-sky-900); --color-ctp-secondary-950: var(--catppuccin-color-sky-950); } ``` -------------------------------- ### Use Semantic Colors in HTML Components Source: https://context7.com/catppuccin/tailwindcss/llms.txt This HTML snippet shows how to apply the custom semantic Catppuccin colors defined in CSS to Tailwind CSS classes for elements like buttons and badges. It utilizes the `--color-ctp-primary`, `--color-ctp-secondary`, and `--color-ctp-crust` variables for styling. ```html Badge ``` -------------------------------- ### Use Catppuccin Colors in HTML Source: https://github.com/catppuccin/tailwindcss/blob/main/README.md Apply Catppuccin color themes to your HTML elements using the 'ctp' prefix for colors. Gradients and flavor variants like 'latte' are also supported. ```html

Welcome!

Hello from Latte!

``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.