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"] }