Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customizing style not working #99

Open
rhkdgns95 opened this issue Jul 5, 2023 · 1 comment
Open

Customizing style not working #99

rhkdgns95 opened this issue Jul 5, 2023 · 1 comment

Comments

@rhkdgns95
Copy link

rhkdgns95 commented Jul 5, 2023

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.
// text-28 does not apply! (When checking in developer tools, it is not indicated in the class value)
const Text = tw.p`text-28 text-[white]`;

// When writing like this, only text-28 value is applied.
// text-[white] does not apply! (Likewise, the class is not marked)
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]`;

As shown above, when the customizing style is applied together, if the same text phrase (different style) is written, the style does not work.

Is there any way to solve these issues?

@AdiDance
Copy link

AdiDance commented Dec 5, 2024

Have the same issue when I define some backgrounds like:

    backgroundImage: {
        'background-stripes': `linear-gradient(
          45deg,
          #ede9e1 16.67%,
          #f7f6f2 0,
          #f7f6f2 50%,
          #ede9e1 0,
          #ede9e1 66.67%,
          #f7f6f2 0,
          #f7f6f2
        )`,
        'green-stripes': `linear-gradient(
          45deg,
          #dde9d3 16.67%,
          #bdd3a5 0,
          #bdd3a5 50%,
          #dde9d3 0,
          #dde9d3 66.67%,
          #bdd3a5 0,
          #bdd3a5
        )`,
      },
    backgroundSize: {
      'stripe-size': '4.24px 4.24px',
    },```


I can't use `bg-background-stripes` and `bg-stripe-size` together

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants