catppuccin / tailwindcss Goto Github PK

I have a yew.rs project that I'm just using the standalone tailwindcss cli for, no npm. My deploy script curl's it and on my personal dev machine I just have it installed from the aur.

Is it possible to use this plugin for it without npm install -D?

The colors from the Catppuccin plugin don't override the colors injected into the .prose class. I've managed to fix a few, but I'm uncertain if this is the correct way, and the plugin should take care of it out of the box or there should be documentation around it.

Also, for some reason, setting colors from the theme is not working. For example setting the "--tw-prose-links": theme("colors.sky"), doesn't work.

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  darkMode: "media",
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      typography: (theme) => {
        console.log(theme("colors.text"));
        return {
          DEFAULT: {
            css: {
              "--tw-prose-body": "rgb(var(--ctp-text))",
              "--tw-prose-headings": "rgb(var(--ctp-text))",
              "--tw-prose-lead": "rgb(var(--ctp-text))",
              "--tw-prose-links": "rgb(var(--ctp-sky))",
              "--tw-prose-bold": "rgb(var(--ctp-text))",
              "--tw-prose-counters": theme("colors.pink[600]"),
              "--tw-prose-bullets": theme("colors.pink[400]"),
              "--tw-prose-hr": theme("colors.pink[300]"),
              "--tw-prose-quotes": "rgb(var(--ctp-text))",
              "--tw-prose-quote-borders": theme("colors.pink[300]"),
              "--tw-prose-captions": theme("colors.pink[700]"),
              "--tw-prose-code": "rgb(var(--ctp-text))",
              "--tw-prose-pre-code": theme("colors.pink[100]"),
              "--tw-prose-pre-bg": "rgb(var(--ctp-text))",
              "--tw-prose-th-borders": theme("colors.pink[300]"),
              "--tw-prose-td-borders": theme("colors.pink[200]"),
              "--tw-prose-invert-body": theme("colors.pink[200]"),
              "--tw-prose-invert-headings": theme("colors.white"),
              "--tw-prose-invert-lead": theme("colors.pink[300]"),
              "--tw-prose-invert-links": theme("colors.white"),
              "--tw-prose-invert-bold": theme("colors.white"),
              "--tw-prose-invert-counters": theme("colors.pink[400]"),
              "--tw-prose-invert-bullets": theme("colors.pink[600]"),
              "--tw-prose-invert-hr": theme("colors.pink[700]"),
              "--tw-prose-invert-quotes": theme("colors.pink[100]"),
              "--tw-prose-invert-quote-borders": theme("colors.pink[700]"),
              "--tw-prose-invert-captions": theme("colors.pink[400]"),
              "--tw-prose-invert-code": theme("colors.white"),
              "--tw-prose-invert-pre-code": theme("colors.pink[300]"),
              "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
              "--tw-prose-invert-th-borders": theme("colors.pink[600]"),
              "--tw-prose-invert-td-borders": theme("colors.pink[700]"),
            },
          },
        };
      },
    },
  },
  plugins: [
    require("@catppuccin/tailwindcss"),
    require("@tailwindcss/typography"),
  ],
};

Title may have been confusing, so I'll show an example.

Suppose you have the defaultFlavour set to 'latte' and the class 'ctp-latte' on your body element.
Now picture this theme picker:

It seems fine when the selected flavour is the default one. But when I change it to another one, Mocha for example:

It adopts the colors from the current flavour instead of keeping its own colors, even when its class is set to 'ctp-latte'.
The code for each flavour demo is basically this:

<div className='ctp-{flavor}'>
  // flavour name and demo colors
</div>

And I'm setting the global theme on the wrapping div on App.tsx (I'm using React).
Hope you understand my explanation :)

I got a bit disappointed when the little squares showing the color preview didn't work.
I'm not sure if that's possible with plugins but it would be nice to have them.

Is there some way to add custom palette variants? Like yea, I get that the point of catppuccin is having 4 variant that work great together, but honestly I'd love using this as a theme engine with the extra benefit of having catppucccin my beloved built-in, but also allowing a custom theme in case needed.
I expect this to get rejected as 'Not Planned', but hey, it doesn't hurt to ask, right? 🚀

hey!

I have an app running with DaisyUI and a couple of custom styles like this:

.sumiu-gradient-rules {
  @apply bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-500;
  @apply dark:from-blue-600  dark:to-purple-400;
}

as soon as I add the plugin, without any config, just require("@catppuccin/tailwindcss"), I start to see errors like this

14:04:45 css.1  | Rebuilding...
14:04:45 css.1  | CssSyntaxError: tailwindcss: /Users/luiz/Projects/sumiu/app/assets/stylesheets/application.tailwind.css:10:3: The `focus:ring-blue-400` class does not exist. If `focus:ring-blue-400` is a custom class, make sure it is defined within a `@layer` directive.
14:04:45 css.1  |
14:04:45 css.1  |    8 |   @apply text-gray-900 bg-gray-50 rounded-lg placeholder:text-slate-400;
14:04:45 css.1  |    9 |   @apply dark:bg-[#1f2129] dark:border-gray-600 dark:text-white dark:placeholder:text-slate-500;
14:04:45 css.1  | > 10 |   @apply focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400;

ring-blue-400 is a class from tailwind and now it can't be found. It happens to a number of other classes as well, like from-pink-400, text-blue-900, etc.

So I have these light and dark theming where i changed the flavour depending on which mode is used, so at the 1st run there will be only 1 variant that was used, because of that when I changed the variant from latte to macchiato, it didn't take effect unless I it's reload or jsx file change (saving occur) which trigger tailwind postcss to rebuilt which i think might be the main problem here. It would also work if, I changed the jsx file manually to use a certain flavour in which case postcss built the css, and if I'm not doing yarn run dev again my code would work
<div className={`theme-${themeOptions[flavour].flavour}`}>

So my current solution is just to declare all the class flavour without actually using it (basically declare it in a hidden tag).

<div hidden>
    <span className="theme-latte" />
    <span className="theme-frappe" />
    <span className="theme-macchiato" />
    <span className="theme-mocha" />
</div>

Is there other solution I could use? Or there's an option in the postcss configuration i could change?
Thanks in advance.

When using no prefix like 'ctp' in config,

module.exports = {
  plugins: [require("@catppuccin/tailwindcss")],
};

text-base overrides the original tailwind class related to size, applying 'base' color instead.

I just saw this tweet by Adam Wathan about the early Tailwind v4 alpha:
https://twitter.com/adamwathan/status/1764383146559017048

In it, it's mentioned that the Tailwind config file (tailwind.config.mjs) is no longer necessary.

How will this affect the Catppuccin plugin?

I was trying the examples but then ended up with this error. The svelte example needs to be updated

Error -:

@AyushSehrawat ➜ /workspaces/tailwindcss/examples/svelte (main) $ npm install

> [email protected] prepare
> svelte-kit sync

`svelte-kit sync` now runs on "postinstall" — please remove the "prepare" script from your package.json


added 286 packages, and audited 288 packages in 7s

46 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
@AyushSehrawat ➜ /workspaces/tailwindcss/examples/svelte (main) $ npm run dev

> [email protected] dev
> svelte-kit dev


> svelte-kit dev is no longer available — use vite dev instead
  1. Install vite as a devDependency with npm/pnpm/etc
  2. Create a vite.config.js with the @sveltejs/kit/vite plugin (see below)
  3. Update your package.json scripts to reference `vite dev` instead of `svelte-kit dev`

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
        plugins: [sveltekit()]
};

export default config;

So this is some interesting behavior I found...

I couldn't get the themes working with a defaultFlavour set (I think it was mocha or latte), so I investigated in the generated CSS and saw that my root styles were not on top of the document. CSS literally means Cascading Style Sheet, so this is a bug and shouldn't be happening.

The problem is the variants map, which has a fixed order and doesn't put the defaultFlavour dynamically on top of the other variants (in first place/index inside the map).

I edited the plugin myself and made a fix for this... I could enhance this and contribute later when I have some free time.

// generates the css variables, injected in the addBase() function
const generateColorCss = (defaultFlavour = "", prefix = false) => {
	const result = {};
	variants.map((variant) => {
		// if a prefix is defined, use e.g. '.ctp-mocha' instead of '.mocha'
		const className = prefix ? `.${prefix}-${variant}` : `.${variant}`;

		// if the current variant is defaultFlavour, add to ':root'
		const keyName = variant === defaultFlavour ? ":root" : className;

		result[keyName] = {};
		colours.map((colour) => {
			result[keyName][`--ctp-${colour}`] = parseHexToRGB(
				palette[variant][colour]
			);
		});
	});
	return result;
};

// generates the css variables, injected in the addBase() function
const generateColorCss = (defaultFlavour = "", prefix = false) => {
	const result = {};

	if (variants.includes(defaultFlavour)) {
    		const defaultIndex = variants.indexOf(defaultFlavour);
    		const rootElement = variants.splice(defaultIndex, 1)[0];
    		variants.unshift(rootElement);
	}

	variants.map((variant) => {
		// if a prefix is defined, use e.g. '.ctp-mocha' instead of '.mocha'
		const className = prefix ? `.${prefix}-${variant}` : `.${variant}`;

		// if the current variant is defaultFlavour, add to ':root'
		const keyName = variant === defaultFlavour ? ":root" : className;

		result[keyName] = {};
		colours.map((colour) => {
			result[keyName][`--ctp-${colour}`] = parseHexToRGB(
				palette[variant][colour]
			);
		});
	});
	return result;
};

If someone wants a more detailed description:
The variants map looks like this (if I can remember correctly):

• latte
• frappe
• macchiato
• mocha

The classes get added to the CSS in this order. If your defaultFlavour is mocha, it gets added as root element.
Now the Problem is this: When you want to apply the latte theme it gets overridden by the mocha root variants, which is not good.

Since I've upgrade to tailwindcss 3.3 and tried to customize the colors, some of the colors mismatch with tailwindcss's new 3.3 version

As you can see in the screenshot, I get an error when adding prefix & defaultFlavour to the tailwind config:
Type error: This expression is not callable.
Type 'typeof import("/opt/repos/projects/portfolio/node_modules/.pnpm/@catppuccin[email protected][email protected]/node_modules/@catppuccin/tailwindcss/dist/index")' has no call signatures.

When removing the prefix & defaultFlavour, it works..

I have an project that I started using CreateT3App and the default type safety configurations add tailwind.config.cjs to the ts type checker and i get an error from typescript:

/** @type {import('tailwindcss').Config} */
const config = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"), // Don't show any errors
    require('@catppuccin/tailwindcss')({ // almost jumps out of my pc and punches me in the face
      prefix: 'ctp',
    }),
  ],
};

module.exports = config;

Could not find a declaration file for module '@catppuccin/tailwindcss'. '$PROJECT_ROOT/node_modules/@catppuccin/tailwindcss/plugin.js' implicitly has an 'any' type. 
Try 'npm i --save-dev @types/catppuccin__tailwindcss' if it exists or add a new declaration (.d.ts) file containing 'declare module @catppuccin/tailwindcss';

As i obviously tried installing @types/catppuccin__taildwindcss and it didn't even run, here i'm asking for an .d.ts file for type checking purposes.