My goal is to implement a variation of themes and be able to switch between them using tailwind CSS. I came across a tutorial on YouTube regarding this topic in JavaScript youtube video, but I am working with TypeScript and encountering issues with a custom function called with opacity. When using this function, the color does not display properly. However, if we pass a variable directly instead of using the custom function to apply opacity, it works correctly.
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--primary-color: #847869;
--secondary-color: #fae1c3;
--primary-background-color: #202020;
--secondary-background-color: #1d1d1d;
--accentColor: #91170c;
--robotoMono: "Roboto Mono", monospace;
--barlow: "Barlow", sans-serif;
}
}
html {
scroll-behavior: smooth;
}
.container {
width: 50%;
margin: 0 auto;
}
tailwind.config.ts
import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
function withOpacity(variableName: string) {
return ({ opacityValue }: { opacityValue: number | undefined }): string => {
if (opacityValue !== undefined) {
return `rgba(var(${variableName}), ${opacityValue})`;
}
return `rgb(var(${variableName}))`;
};
}
export default {
content: ["./src/**/*.tsx"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
textColor: {
skin: {
base: "var( --primary-color)",
// muted: withOpacity('--color-text-muted'),
// inverted: withOpacity('--color-text-inverted'),
},
},
backgroundColor: {
skin: {
withOpacity("--primary-background-color")
// fill: withOpacity("--primary-background-color") as unknown as string,
// 'button-accent': withOpacity('--color-button-accent'),
// 'button-accent-hover': withOpacity('--color-button-accent-hover'),
// 'button-muted': withOpacity('--color-button-muted'),
},
},
gradientColorStops: {
skin: {
// hue: withOpacity('--color-fill'),
},
},
},
},
plugins: [],
} satisfies Config;
Type '(: any) => any' is not assignable to type 'string | RecursiveKeyValuePair<string, string>'.ts(2322)
⨯ ./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/styles/globals.css
SyntaxError: Unexpected token (29:23)
Import trace for requested module:
./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/styles/globals.css
./src/styles/globals.css