Comments (4)
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.
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.
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.
from tailwindcss-forms.
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.
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)
- CSS color-adjust property is deprecated
- Invalid padding for <select> in Firefox HOT 1
- No longer works with @nuxtjs/tailwindcss - 5.1.2 HOT 1
- "MODULE_NOT_FOUND" if tailwind config is in another directory HOT 3
- Tailwindcss/forms failed to install HOT 2
- input should always default to [type='text'] styling. HOT 4
- input type="checkbox" { @apply rounded-full; } leaving syntax error expecting { instead of = HOT 1
- input [type="checkbox"] { @apply rounded-full; } does not work HOT 1
- Placeholder color not compatible with css variables HOT 3
- Adding the plugin breaks TailwindCSS extension in VSCode on macOS HOT 1
- Tailwindcss/forms and other plugin compatibility issue (DaisyUI) HOT 2
- Select with size option shows chevron HOT 4
- Outdated installation instructions HOT 1
- next.js | Error: Cannot find module '@tailwindcss/forms' HOT 1
- Disable tailwindcss-forms for a specific form HOT 2
- appearance-none not working for select tag
- Select input options in Chrome not displaying properly HOT 4
- 'require' not define, cannot import plugin to tailwind config HOT 3
- How to remove the caret in the select input? HOT 1
- Date length error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss-forms.