An issue occurs when I customize font-size.

[Jae Han Song]

There is an error that results in priority when customizing the naming of the font size.

Normal

tailwind-styled-components Tag	Normal Tag	Result

Customize

tailwind-styled-components Tag	Normal Tag

Result	tailwind.config.js

Does anyone have the same issue as this?

[Brian Fernandez]

I have the same problem, were you able to solve it?

[Jae Han Song]

I have the same problem, were you able to solve it?

Not yet. I just solved that temporarily by giving className outside the tag and only giving text effects.

[Brian Fernandez]

It seems to me that it might be a tailwind-merge problem, but I'm not entirely sure. 🤔

[Jae Han Song]

It seems to me that it might be a tailwind-merge problem, but I'm not entirely sure. 🤔

Oh, Thanks :) I'll be check this out.
tailwind-merge

[Carlos Mion]

any news on that?

[ivvv111]

@Wisesaturn Did you solve the problem?

[Jae Han Song]

any news on that?
@Wisesaturn Did you solve the problem?

No, I'm just going on with it.

[김광훈]

The bug occurs when:

// tailwind.config.js
const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((_, i) => `${i}px`) };
const px0_400 = { ...Array.from(Array(401)).map((_, i) => `${i}px`) };

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/routers/**/*.{js,ts,jsx,tsx}",
    "./src/icons/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        pretendard: ["Pretendard"],
        poppins: ["Poppins"],
      },
      borderWidth: px0_10,
      fontSize: px0_100,
      lineHeight: px0_100,
      minWidth: px0_200,
      minHeight: px0_200,
      spacing: px0_200,
      padding: px0_400,
    },
  },
  plugins: [],
};

// When text is repeatedly entered, only the last text-[white] value is applied.
const Text = tw.p`text-28 text-[white]`;

// When writing like this, only text-28 value is applied.
const OtherText = tw.p`text-[white] text-28`;

// When writing like this, Both text-[white] and text-[28px] are applied.
const OtherText = tw.p`text-[white] text-[28px]`;

Maybe, is there a solution?

[Jae Han Song]

@rhkdgns95
It's a bit of a hassle, but I think it's a good way

[김광훈]

@Wisesaturn hmm.. Do you think so?

The issue has not been resolved yet, so I hope someone can suggest a way to solve it.