From 641349d3ee5b99aba587ec6004985b3a1092891d Mon Sep 17 00:00:00 2001 From: Muhtasham Nawr al-Mahmud <72372229+mnalmahmud@users.noreply.github.com> Date: Sat, 17 Oct 2026 08:17:45 +0600 Subject: [PATCH 1/2] Generate Tailwind CSS Sass palette with Whiskers --- .github/workflows/whiskers-check.yml | 15 +++ packages/catppuccin-tailwindcss/README.md | 5 + .../catppuccin-tailwindcss/src/_palette.scss | 116 ++++++++++++++++++ .../catppuccin-tailwindcss/src/_theme.scss | 10 +- tailwindcss.tera | 17 +++ 5 files changed, 158 insertions(+), 5 deletions(-) create mode 100644 .github/workflows/whiskers-check.yml create mode 100644 packages/catppuccin-tailwindcss/src/_palette.scss create mode 100644 tailwindcss.tera diff --git a/.github/workflows/whiskers-check.yml b/.github/workflows/whiskers-check.yml new file mode 100644 index 0000000..6a542d6 --- /dev/null +++ b/.github/workflows/whiskers-check.yml @@ -0,0 +1,15 @@ +name: whiskers + +on: + workflow_dispatch: + push: + branches: [main] + pull_request: + branches: [main] + +jobs: + run: + uses: catppuccin/actions/.github/workflows/whiskers-check.yml@v1 + with: + args: tailwindcss.tera + secrets: inherit diff --git a/packages/catppuccin-tailwindcss/README.md b/packages/catppuccin-tailwindcss/README.md index ac8e6ab..4158d33 100644 --- a/packages/catppuccin-tailwindcss/README.md +++ b/packages/catppuccin-tailwindcss/README.md @@ -60,6 +60,11 @@ Check out some more advanced examples at [tailwindcss.catppuccin.com](https://tailwindcss.catppuccin.com)! +## Development + +Install [Whiskers](https://github.com/catppuccin/whiskers) and run +`whiskers tailwindcss.tera` from the repository root to regenerate the Sass palette. + ## 💝 Thanks to **Current maintainers** diff --git a/packages/catppuccin-tailwindcss/src/_palette.scss b/packages/catppuccin-tailwindcss/src/_palette.scss new file mode 100644 index 0000000..b1a0542 --- /dev/null +++ b/packages/catppuccin-tailwindcss/src/_palette.scss @@ -0,0 +1,116 @@ +// Generated by Whiskers from tailwindcss.tera. Do not edit directly. + +$palette: ( + "latte": ( + "base": #eff1f5, + "blue": #1e66f5, + "crust": #dce0e8, + "flamingo": #dd7878, + "green": #40a02b, + "lavender": #7287fd, + "mantle": #e6e9ef, + "maroon": #e64553, + "mauve": #8839ef, + "overlay0": #9ca0b0, + "overlay1": #8c8fa1, + "overlay2": #7c7f93, + "peach": #fe640b, + "pink": #ea76cb, + "red": #d20f39, + "rosewater": #dc8a78, + "sapphire": #209fb5, + "sky": #04a5e5, + "subtext0": #6c6f85, + "subtext1": #5c5f77, + "surface0": #ccd0da, + "surface1": #bcc0cc, + "surface2": #acb0be, + "teal": #179299, + "text": #4c4f69, + "yellow": #df8e1d + ), + "frappe": ( + "base": #303446, + "blue": #8caaee, + "crust": #232634, + "flamingo": #eebebe, + "green": #a6d189, + "lavender": #babbf1, + "mantle": #292c3c, + "maroon": #ea999c, + "mauve": #ca9ee6, + "overlay0": #737994, + "overlay1": #838ba7, + "overlay2": #949cbb, + "peach": #ef9f76, + "pink": #f4b8e4, + "red": #e78284, + "rosewater": #f2d5cf, + "sapphire": #85c1dc, + "sky": #99d1db, + "subtext0": #a5adce, + "subtext1": #b5bfe2, + "surface0": #414559, + "surface1": #51576d, + "surface2": #626880, + "teal": #81c8be, + "text": #c6d0f5, + "yellow": #e5c890 + ), + "macchiato": ( + "base": #24273a, + "blue": #8aadf4, + "crust": #181926, + "flamingo": #f0c6c6, + "green": #a6da95, + "lavender": #b7bdf8, + "mantle": #1e2030, + "maroon": #ee99a0, + "mauve": #c6a0f6, + "overlay0": #6e738d, + "overlay1": #8087a2, + "overlay2": #939ab7, + "peach": #f5a97f, + "pink": #f5bde6, + "red": #ed8796, + "rosewater": #f4dbd6, + "sapphire": #7dc4e4, + "sky": #91d7e3, + "subtext0": #a5adcb, + "subtext1": #b8c0e0, + "surface0": #363a4f, + "surface1": #494d64, + "surface2": #5b6078, + "teal": #8bd5ca, + "text": #cad3f5, + "yellow": #eed49f + ), + "mocha": ( + "base": #1e1e2e, + "blue": #89b4fa, + "crust": #11111b, + "flamingo": #f2cdcd, + "green": #a6e3a1, + "lavender": #b4befe, + "mantle": #181825, + "maroon": #eba0ac, + "mauve": #cba6f7, + "overlay0": #6c7086, + "overlay1": #7f849c, + "overlay2": #9399b2, + "peach": #fab387, + "pink": #f5c2e7, + "red": #f38ba8, + "rosewater": #f5e0dc, + "sapphire": #74c7ec, + "sky": #89dceb, + "subtext0": #a6adc8, + "subtext1": #bac2de, + "surface0": #313244, + "surface1": #45475a, + "surface2": #585b70, + "teal": #94e2d5, + "text": #cdd6f4, + "yellow": #f9e2af + ) +); diff --git a/packages/catppuccin-tailwindcss/src/_theme.scss b/packages/catppuccin-tailwindcss/src/_theme.scss index 255bde3..0f959b7 100644 --- a/packages/catppuccin-tailwindcss/src/_theme.scss +++ b/packages/catppuccin-tailwindcss/src/_theme.scss @@ -5,6 +5,7 @@ $dark-variant: "mocha" !default; @use 'sass:map'; @use "@catppuccin/palette/scss/catppuccin"; +@use "palette" as generated; $prefix: '-ctp'; $variants: ( @@ -19,14 +20,13 @@ $variants: ( } @mixin createFlavorPalette($flavor) { - @each $ctp-color-name, $ctp-color-value in map.get(catppuccin.$palette, "latte") { - // this is using latte as a dummy because it only needs to iterate over the structure - --catppuccin-color-#{$ctp-color-name}: #{catppuccin.get-color( $flavor, $ctp-color-name)}; + @each $ctp-color-name, $ctp-color-value in map.get(generated.$palette, $flavor) { + --catppuccin-color-#{$ctp-color-name}: #{$ctp-color-value}; @if (isAccent($ctp-color-name)) { @each $variant-type, $variant-identifier in $variants { @for $i from 1 through list.length($variant-identifier) { @if ($variant-type == "default") { - --catppuccin-color-#{$ctp-color-name}-#{$variant-identifier}: #{catppuccin.get-color( $flavor, $ctp-color-name)}; + --catppuccin-color-#{$ctp-color-name}-#{$variant-identifier}: #{$ctp-color-value}; } @else { --catppuccin-color-#{$ctp-color-name}-#{list.nth($variant-identifier, $i)}: #{catppuccin.get-color( $flavor, $ctp-color-name, $variant-type, $i)}; } @@ -37,7 +37,7 @@ $variants: ( } @theme inline { - @each $ctp-color-name, $ctp-color-value in map.get(catppuccin.$palette, 'latte') { // this is using latte as a dummy because it only needs to iterate over the structure + @each $ctp-color-name, $ctp-color-value in map.get(generated.$palette, 'latte') { --color#{$prefix}-#{$ctp-color-name}: var(--catppuccin-color-#{$ctp-color-name}); @if (isAccent($ctp-color-name)) { @each $variant-type, $variant-identifier in $variants { diff --git a/tailwindcss.tera b/tailwindcss.tera new file mode 100644 index 0000000..a3fd3ea --- /dev/null +++ b/tailwindcss.tera @@ -0,0 +1,17 @@ +--- +whiskers: + version: "^2.9.0" + filename: "packages/catppuccin-tailwindcss/src/_palette.scss" + hex_format: "#{{r}}{{g}}{{b}}{{z}}" +--- +// Generated by Whiskers from tailwindcss.tera. Do not edit directly. + +$palette: ( +{%- for flavor_id in ["latte", "frappe", "macchiato", "mocha"] %} + "{{ flavor_id }}": ( + {%- for color_id, color in flavors[flavor_id].colors %} + "{{ color_id }}": {{ color.hex }}{%- if not loop.last %},{% endif %} + {%- endfor %} + ){%- if not loop.last %},{% endif %} +{%- endfor %} +); From 3c318c5638a5f064649a95e7f43eb99ac5a78608 Mon Sep 17 00:00:00 2001 From: Muhtasham Nawr al-Mahmud <72372229+mnalmahmud@users.noreply.github.com> Date: Sat, 17 Oct 2026 08:25:09 +0600 Subject: [PATCH 2/2] fix: align Tailwind Whiskers template with shared check workflow --- tailwindcss.tera | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/tailwindcss.tera b/tailwindcss.tera index a3fd3ea..226d569 100644 --- a/tailwindcss.tera +++ b/tailwindcss.tera @@ -1,17 +1,15 @@ --- whiskers: version: "^2.9.0" + matrix: + - output: ["palette"] filename: "packages/catppuccin-tailwindcss/src/_palette.scss" hex_format: "#{{r}}{{g}}{{b}}{{z}}" --- // Generated by Whiskers from tailwindcss.tera. Do not edit directly. $palette: ( -{%- for flavor_id in ["latte", "frappe", "macchiato", "mocha"] %} - "{{ flavor_id }}": ( - {%- for color_id, color in flavors[flavor_id].colors %} - "{{ color_id }}": {{ color.hex }}{%- if not loop.last %},{% endif %} - {%- endfor %} - ){%- if not loop.last %},{% endif %} -{%- endfor %} -); +{% for flavor_id in ["latte", "frappe", "macchiato", "mocha"] %} "{{ flavor_id }}": ( +{% for color_id in ["base", "blue", "crust", "flamingo", "green", "lavender", "mantle", "maroon", "mauve", "overlay0", "overlay1", "overlay2", "peach", "pink", "red", "rosewater", "sapphire", "sky", "subtext0", "subtext1", "surface0", "surface1", "surface2", "teal", "text", "yellow"] %} "{{ color_id }}": {{ flavors[flavor_id].colors[color_id].hex }}{% if not loop.last %},{% endif %} +{% endfor %} ){% if not loop.last %},{% endif %} +{% endfor %});