Giter Club home page Giter Club logo

Comments (4)

sklawren avatar sklawren commented on August 15, 2024

Here is the element as rendered in the browser when it has focus:

<input aria-invalid="false" autocomplete="off" class="block w-full focus-visible:ring mt-1 focus-visible" id="test" name="Input Field" placeholder="Type something here" type="text" value="" data-focus-visible-added="">

Here are two screenshots of the inspector of that input field with normal compilation and JIT.

Normal
normal

JIT
JIT

For some reason, the JIT compiler is adding those extra styles. This is across the board for other form elements such as select, checkbox, radio, etc.

from tailwindcss-forms.

roberttravispierce avatar roberttravispierce commented on August 15, 2024

I'm seeing the same issue with form select element styling (gradient background, small height, svg down arrow on right) after moving to JIT. I reverted back from JIT and still am seeing it so I'm thinking something happened during the install that messed up the @tailwind/forms styling or precedence. I'm investigating.

Screen Shot 2021-04-07 at 21 47 18

Screen Shot 2021-04-07 at 21 46 55

from tailwindcss-forms.

roberttravispierce avatar roberttravispierce commented on August 15, 2024

I couldn't figure it out in a reasonable amount of time, so I ended up just grabbing "select" styles from @tailwindcss/forms and putting them in custom stylesheet for higher precedence. Unsatisfying and not ideal, but I'll revisit later. It's working now and bigger fish to fry. :)

// javascript/components/forms.scss
// These three "select" styles are resets from tailwindcss/forms.css styles - Fixes something clobbering them along the way.
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: #2563eb;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
}

from tailwindcss-forms.

bradlc avatar bradlc commented on August 15, 2024

Hey @sklawren. I'm going to close this issue because I'm pretty sure that it was fixed in #81. If not please open a new issue with a proper reproduction — a Tailwind Play if the issue can be reproduced there, or a GitHub repository where you already have everything all set up so we can clone it and immediately see the issue without configuring everything by hand.

from tailwindcss-forms.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.