Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Tailwind different on build (w-20 w-full)

I’m using tailwind, vite, and react

I have an 2 elements, thats look like this :

<div class="font-normal bg-grey appearance-none rounded-3xl w-full leading-tight border-none ring-0 text-sapin focus:bg-menthe focus:outline-none focus:shadow-outline focus:placeholder:text-transparent  placeholder:font-thin placeholder:text-sapin-500 py-0 px-5 sm:py-2 w-20"></div>

In localhost, it working fine :

enter image description here

But in build, it’s have a different behavior :

enter image description here

If I inspect my browser, here the difference :

In localhost

enter image description here

In build

enter image description here

Why the w-20 is first on localhost, but not in build ?

Tags:

2

Answers


  1. 0

    In simple words,

    In local, your class sequence will be respected, hence w-20 which is at end works.
    While in Build, classes might be rearranged based on its (Tailwind’s) processing, hence w-full is considered.

    I will suggest, improve on writing classes and write classes which are truly useful, as it will improve performance. (remove any one width class!)

    (lastly, if you want to try some css, you can use !w-20)

    Login or Signup to reply.
  2. 0

    This issue is likely related to how Vite handles CSS differently between development and production modes. During development, Vite applies styles via inline <style> tags, ensuring that the last class defined in your tag (e.g., w-20) takes precedence. However, in production builds, Vite generates and minimizes static CSS files based on the order in which the utility classes are included in the final CSS. In your case, it seems w-full is being placed after w-20 in the compiled CSS, which is why it takes precedence.

    This scenario highlights a common pitfall: defining conflicting utility classes (e.g., w-20 and w-full) on the same element. To ensure consistent and predictable styling, it’s best to avoid applying multiple classes that set the same property (in this case, width). Instead, choose a single utility class that represents the desired style.

    Read more about Vite’s handling of CSS in development and production modes here: Vite CSS Features.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search