tailwindcss-forms | basic reset for form styles | Form library
kandi X-RAY | tailwindcss-forms Summary
kandi X-RAY | tailwindcss-forms Summary
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of tailwindcss-forms
tailwindcss-forms Key Features
tailwindcss-forms Examples and Code Snippets
Community Discussions
Trending Discussions on tailwindcss-forms
QUESTION
I am new to Tailwind CSS and stumbled across the tailwindcss-forms
plugin.
- Why exactly do we need that? Does it just provide new classes that I have to apply manually or does it by default apply some classes to forms?
- Can't I just apply classes from the regular Tailwind CSS to my forms?
- What's the difference to e.g.
tailwindcss-custom-forms
?
ANSWER
Answered 2021-Apr-18 at 20:22- Tailwind CSS is not exactly providing solutions for form elements like Select-tags and co. that work on all major browsers.
- If you apply those from Tailwind CSS, you may either add your own elements (e.g. arrows) for a Select tag, inputs, and co. or work with CSS. You can also look on how developers solved these issues with examples from Tailwind Components.
- Tailwind CSS Forms was made to make this possible and it works with Tailwind CSS 2 while Tailwind CSS Custom Form is deprecated.
QUESTION
When using Tailwind forms, I am expecting my element to be unstyled but it keeps the original styling for the text input.
It works fine if I do something like
How can I take away the built in styling for when using TailwindCSS-forms?
ANSWER
Answered 2021-Feb-02 at 16:36You need to add on a type="text"
.
So you would want something like this:
The reason being explained below from the @tailwindcss/forms docs:
Note that for text inputs, you must add the type="text" attribute for these styles to take effect. This is a necessary trade-off to avoid relying on the overly greedy input selector and unintentionally styling elements we don't have solutions for yet, like input[type="range"] for example.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install tailwindcss-forms
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page