Tailwind class overrides mistakenly

[prakash03yes]

/** @type {import('tailwindcss').Config} */
import { Colors } from './src/constants/colors.const';

export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		colors: Colors,
		fontFamily: {
			raleway: ["'Raleway Variable'", 'sans-serif'],
			roboto: ["'Roboto'", "sans-serif"]
		},
		fontWeight: {
			100: "100",
			200: "200",
			300: "300",
			400: "400",
			500: "500",
			600: "600",
			700: "700",
			800: "800",
			900: "900"
		},
		fontSize: {
			10: "0.625rem",
			12: "0.75rem",
			14: "0.875rem",
			16: "1rem",
			18: "1.125rem",
			20: "1.25rem",
			24: "1.5rem",
			32: "2rem",
			40: "2.5rem",
			50: "3.125rem",
		},
		extend: {
		},
	},
	plugins: [],
}

// ./Heading.astro

---
import { tv } from "tailwind-variants";

interface Props {
    className?: string;
    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
    color?: "orange" | "black" | "black04";
}

const { className = "", tag: Tagname = "h2", color = "black" } = Astro.props;

const heading = tv({
    base: ["font-raleway"],
    variants: {
        color: {
            orange: ["text-secondaryOrange"],
            black: ["text-teritaryBlack"],
            black04: ["text-teritaryBlack04"],
        },
        tag: {
            h1: ["font-700 text-32"],
            h2: ["font-700 text-24"],
            h3: ["font-600 text-20"],
            h4: ["font-600 text-18"],
            h5: ["font-600 text-16"],
            h6: ["font-600 text-14"],
        },
    },
    defaultVariants: {
        color: color,
        tag: Tagname,
    },
});
---

<Tagname class={heading({ class: className })}>
    <slot />
</Tagname>

// ./banner.astro
---
import { Heading, Parah } from "@/components/common";
import { LinkButton } from "@/components/form";
import Container from "@/components/layouts/Container/Container.astro";
import clsx from "clsx";
---

<section id="BANNER" class="bg-primaryYellow01">
            <Heading color="black" tag="h1" className="whitespace-nowrap">
                Modern
            </Heading> 
</section>

As you can see in the screenshot there is no "text-secondaryOrange" it overrides with "text-32" which is unconvintional

[mskelton]

You are likely missing configuration for Tailwind merge which is required when adding customizing certain options in your Tailwind config file (e.g. text-).

You can read about configuring tailwind merge in the docs:

• https://www.tailwind-variants.org/docs/config#config-options
• https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md

[prakash03yes]

Yeah I saw the documention and changed my tailwind-merge config file. thanks.

import { defaultConfig } from 'tailwind-variants';
import { COLORS } from './src/constants/colors.const';
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from "./src/constants/font.const";


defaultConfig.twMergeConfig = {
  classGroups: {
    'font-size': [{ text: Object.keys(FONT_SIZE) }],
    'font-weight': [{ font: Object.keys(FONT_WEIGHT) }],
    'font-family': [{ font: Object.keys(FONT_FAMILY) }],
    'text-color': [{ text: Object.keys(COLORS) }],
  },
};

this is how my objects look ( for whoom doesn't understand whats going )

export const FONT_SIZE = {
    "10": "0.625rem",
    "12": "0.75rem",
    "14": "0.875rem",
    "16": "1rem",
    "18": "1.125rem",
    "20": "1.25rem",
    "24": "1.5rem",
    "32": "2rem",
    "40": "2.5rem",
    "50": "3.125rem",
};

export const FONT_WEIGHT = {
    "100": "100",
    "200": "200",
    "300": "300",
    "400": "400",
    "500": "500",
    "600": "600",
    "700": "700",
    "800": "800",
    "900": "900"
};

export const FONT_FAMILY = {
    "raleway": ["'Raleway Variable'", 'sans-serif'],
    "roboto": ["'Roboto'", "sans-serif"]
}