💨 Soothing pastel theme for Tailwind CSS

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 :)

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.

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.

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.