tailwindlabs / tailwindcss-custom-forms Goto Github PK
View Code? Open in Web Editor NEWA better base for styling form elements with Tailwind CSS.
Home Page: https://tailwindcss-custom-forms.netlify.app/
License: MIT License
A better base for styling form elements with Tailwind CSS.
Home Page: https://tailwindcss-custom-forms.netlify.app/
License: MIT License
So I've been referencing the official Tailwind documentation, but I cannot for the life of me figure out how this works.
This doesn't seem to work;
customForms: {
verticalPadding: theme => theme('spacing.1'),
}
Neither does this;
customForms: {
verticalPadding: theme => theme('spacing.')[2],
}
Which is how the official documentation says to do it.
Error is always the same with either method;
TypeError: value.charCodeAt is not a function
Hopefully you can help. :)
Hi,
Found an issue where SVGs on .form-checkbox
, .form-radio
and .form-select
are not rendering as background-image
, because of missing '/
' on self-closing tags.
The customForms configuration for checkboxIcon
, radioIcon
and selectIcon
looks like this:
checkboxIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></svg>
,
radioIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"></svg>
,
selectIcon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></svg>
,
With that configuration SVGs are not rendering as background-image on .form-checkbox
, .form-radio
and .form-select
I've debugged and found out that if I put '/
' on self-closing tags <path />
and <circle />
everything renders properly.
checkboxIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z" /></svg>
,
radioIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3" /></svg>
,
selectIcon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z" /></svg>
,
Issue found using:
tailwindcss: 1.0.3
tailwindcss/custom-forms: 0.1.4
OS: Windows 10
Browser: Chrome Version 74.0.3729.169
I'm not sure, why exactly there's the issue with self-closing tags, since browsers allow the '/
' to be ommited.
Huge Thanks for all your great work and effort!
Can use font awesome icon like
customForms: theme => ({
default: {
select: {
icon: '<i className="fas fa-sort-down"></i>',
},
},
})
instead of SVG Icon
Using autocomplete="on"
on an input field overrides custom styles on an input field with browser default styles. The code to reproduce below:
<div>
<label for="full-name" class="block text-grey-900 font-bold">
Full Name
</label>
</div>
<div>
<input id="full-name" type="text" placeholder="Jane Doe" autocomplete="on" class="form-input bg-teal-300 border border-blue-600 rounded w-full py-2 px-4 text-grey-800 leading-tight">
</div>
I can make it work with https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ but that's basically duplicating my styles in non-tw manner.
I am using Next.js v9.1.2. I have Tailwind and the plugin installed and added to my tailwind.config.ts
file however the styles are not being picked up.
package.json
:
"devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1",
"autoprefixer": "^9.7.1",
"postcss-easy-import": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"tailwindcss": "^1.1.3",
"tslint": "^5.20.1",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.1.0"
},
tailwind.config.ts
:
export default module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: [
require('@tailwindcss/custom-forms')
]
}
Component:
return (
<div>
<label className="block">
<span className="text-gray-700">{props.label}</span>
<select
className="form-select block w-full mt-1"
onChange={props.onChange}
onBlur={props.onBlur}
>
{props.options.map((option, idx) => {
return (
<option key={idx} value={option.value} label={option.label}>
{option.label}
</option>
);
})}
</select>
</label>
</div>
);
This is in Chrome Version 78.0.3904.70 (Official Build) (64-bit) on Mac 10.14.2
I have tried custom-forms on my RoR and it's not working on select inputs. In our case, text white and small area,
// tailwind.config.js // ...
plugins: [
require('@tailwindcss/custom-forms'), require('tailwind-forms')(),
],
#view/page.html.erb
` <%= form_for @subscriptor do |f| %>
<%= f.text_field :nom, placeholder:'Nom', class:"rounded-l-lg p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" %>
<%= f.email_field :email, class:"p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center", placeholder:"[email protected]" %>
<%= f.select :font, ['Buscadors', 'Xarxes Socials', 'Boca oido', 'Altres'], class:"form-select mt-1 block w-ful", prompt:"A on ens has sentit? " %>
<%= f.submit 'Subscriu-te', class:"p-4 px-8 rounded-r-lg bg-teal-400 text-teal-800 font-bold uppercase border-gray-300 border-t border-b border-r text-center" %>
<% end %>`
#html result
`<form class="new_subscriptor" id="new_subscriptor" action="/subscriptors" accept-charset="UTF-8" method="post">
<input placeholder="Nom" class="rounded-l-lg p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" type="text" name="subscriptor[nom]" id="subscriptor_nom" />
<input class="p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" placeholder="[email protected]" type="email" name="subscriptor[email]" id="subscriptor_email" />
<select name="subscriptor[font]" id="subscriptor_font"><option value="">A on ens has sentit? </option>
<option value="Buscadors">Buscadors</option>
<option value="Xarxes Socials">Xarxes Socials</option>
<option value="Boca oido">Boca oido</option>
<option value="Altres">Altres</option></select>
<input type="submit" name="commit" value="Subscriu-te" class="p-4 px-8 rounded-r-lg bg-teal-400 text-teal-800 font-bold uppercase border-gray-300 border-t border-b border-r text-center" data-disable-with="Subscriu-te" />
</form>
``` `
Repsoitory: [https://github.com/coopeu/MilRevolts.com/tree/master1](url)
I noticed that the theme
yielded in customForms
does not include utilities that were added by other plugins. I have tried reordering the order of plugins such that @tailwindcss/custom-forms
is after my custom plugin, but it doesn't look like it reflects any changes to the theme. Here's an example to illustrate what's happening:
module.exports = {
theme: {
customForms: (theme) => {
console.log(theme('lineHeight')); // i don't see my added lineHeights
return {
..
};
}
},
plugins: [
require("./my-custom-theme"), // calls addUtilities(.., variants("lineHeight"))
require("@tailwindcss/custom-forms")
]
}
Is this supported?
On IOS, this is what a date field styled with .form-input
looks:
This is what the markup looks like:
<label class="block mb-6 mr-6">
<span class="text-gray-700">{{ __('Date') }}:</span>
<input type="date" class="form-input mt-1 block w-64" name="date" placeholder="yyyy-mm-dd">
</label>
It renders as expected on all other browsers.
Checkboxes with customized colors and sizes do not work. Even on the demo site the color is still the same.
I'm having issues with the radio dot and checkbox check being centered in Chrome 69-72. From what I can tell Chrome 69 was a big update that introduced a lot of bugs.
The background image is positions in the top left of the element, instead of the center. I suspect it has something to do with the background image being an SVG.
Hi there,
I tried to install this package on a NuxtJS project but I not sure if it is a Nuxt issue with the package. I get this error when I add the plugin on the tailwind.config.js
file the way the docs says:
To make sure if it was a problem with my computer, I cloned the repository, run it and it works. So that's why I am not quite sure if there is something missing to make it work with a NuxtJS project.
Using the custom SVG icon example on the homepage the iconColor doesn't output correctly.
// tailwind.config.js
module.exports = {
theme: {
customForms: theme => ({
default: {
checkbox: {
icon: iconColor => '<svg fill="${iconColor}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>',
iconColor: theme('colors.gray.800'),
'&:hover': {
iconColor: theme('colors.gray.700'),
},
},
},
})
},
plugins: [
require('@tailwindcss/custom-forms'),
]
}
I installed a fresh install of tailwind with the custom-forms
plugin installed and it outputs the following:
.form-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg fill='%24%7biconColor%7d' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3e%3cpath d='M0 11l2-2 5 5L18 3l2 2L7 18z'%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
In particular notice the fill is showing fill='%24%7biconColor%7d'
Many thanks,
Gavin
I ran into a situation today where I wanted to change the color of the tick icon that is rendered within the checkbox when it is checked. Since we're able to change the background color using the bg-{color}
classes wouldn't it be nice if the tick itself could be styled by using the text-{color}
classes?
So far I've achieved this by adding the following css code but this doesn't feel like the "tailwind" way of doing things:
<input type="checkbox" checked class="form-checkbox w-8 h-8 border-gray-300 text-gray-600 bg-white"/>
.form-checkbox:checked {
&.text-gray-600 {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23718096' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e")
}
}
The fill
property of the SVG that is used as the background-image needs to be adjusted. I'm sure this could be automated by generating the css above with all the text-{color} variations there are.
can we add support for custom select dropdowns?
I know that I can select multiple checkboxes in a form but how do I select multiple buttons that change their state (color) after the click in a single form? Is there a JavaScript component I need to look into along with the custom-forms package? I've included the block of code I'm using to build these buttons. Thanks in advance!
`
<div class = "p-5">
<button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
<div class = "text-left text-black font-bold">
Option1
</div>
</button>
</div>
<div class = "p-5">
<button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
<div class = "text-left text-black font-bold">
Option2
</div>
</button>
</div>
<div class = "p-5">
<button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
<div class = "text-left text-black font-bold">
Option3
</div>
</button>
</div>
<div class = "p-5">
<button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
<div class = "text-left text-black font-bold">
Option4
</div>
</button>
</div>
<div class = "p-5">
<button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
<div class = "text-left text-black font-bold">
Option5
</div>
</button>
</div>
The ability to style the option group label in a multi-select right out of the box would be fantastic. Currently adding a tailwindcss classes to the option group styles the entire option group.
I'm wondering whether it would be possible to have custom-forms
pick up custom theme colors automatically and use them for things like border & text colors, instead of the default tailwind colors? More specifically, when extending the default theme with custom grays (replacing the default grays), custom-forms
still uses the grays that ship with tailwind itself.
This would make customizing form inputs easier and faster, as one would simply have to set up custom grays and nothing else for it to take effect. RIght now it seems that I have to specifically provide a custom configuration for custom-forms
.
module.exports = {
theme: {
extend: {
colors: {
gray: {
50: "#FBFAF9",
100: "#F7F6F4",
200: "#EBE9E5",
300: "#DCD9D2", // no effect on forms by default :/
400: "#B2AC9F",
500: "#80796B",
600: "#635B4B",
700: "#514737",
800: "#3F3625",
900: "#2E2716"
}
},
// 1. this has no effect for forms :/
borderColor: theme => ({ default: theme("colors.gray.300", "currentColor") }),
// 2. this works, but it'd be nice if the color would be inherited by default
customForms: theme => ({
default: {
"input, textarea, multiselect, select": {
borderColor: theme("colors.gray.300")
}
}
})
}
},
plugins: [
require("@tailwindcss/custom-forms")
]
};
I haven't studied the internals of how tailwind or plugins resolve the configuration, so it may well be that this would mean venturing into dangerous territory involving recursive loops or priority issues. However, consider this as an idea to simplify customizations.
Hi! I'm trying to upgrade to 0.2 version and moving my simple config from:
customForms: theme => ({ focusShadow: theme("boxShadow.none") })
to (according to the docs)
customForms: theme => ({
input: {
"&:focus": {
boxShadow: undefined
}
}
})
and still seeing boxShadow on inputs.
I did a quick console.log driven debugging and found out that my custom options are not even passed to addInput
function. To do that and not to break custom variants it needs to be wrapped into default
key, ie:
customForms: theme => ({
default: {
input: {
"&:focus": {
boxShadow: undefined,
}
}
}
})
Is that right and docs are just missing that?
When using text-xs and leading-none on text input and select, their heights are different.
Please check this fiddle - https://jsfiddle.net/us5y8nhv/1
Right now, the base selector is hardcoded -- .form-checkbox
. I would like to style the checkbox
element globally, since I'm working with a platform that's extensible and extensions aren't written with this plugin in mind.
It might be possible to achieve this by using input[type=checkbox] { @extend .form-checkbox }
, but I think having a configurable base selector is a more elegant solution.
Trying to follow guide @ https://tailwindcss-custom-forms.netlify.com/, but for some reason the form components aren't ending up in my CSS file. Can't figure out what's wrong.
Using the CLI version of tailwind (version 1.1.2), since we're on create-react-app -> tailwind build ./src/tailwind.input.css -c ./src/tailwind.config.js -o ./src/index.css
.
Happy to provide any other information that could be of interest :)
Hi guys, is possibile to apply classes using @apply in SCSS? (with Laravel Mix).
I've made some test but compiler returns this error:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(161:3) `@apply` cannot be used with `.form-input` because `.form-input` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.form-input` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
159 |
160 | input {
> 161 | @apply form-input;
| ^
162 | }
163 |
Thanks!
Versions:
Misc:
Details:
Form styles are applied to inputs via @apply
to WordPress generated fields. Form styles works perfect in dev but gets removed in prod.
For accessibility, radio groups and checkbox groups should use <fieldset>
as a wrapper and <legend>
as a label. They both come with their own default browser styles.
Here are a few references (the IU design system has had a lot of vetting):
I can work on a PR for markup - but may need help with style choices.
I have a website built using tailwind—it is a Gatsby site, using postcss to handle tailwind.
Built the entire site with no issues—I installed custom-forms, and nothing will run—I just get a cryptic "theme is not a function" error. I can verify if I uninstall custom-forms, and remove from tailwind config plugins, it runs. Reinstall, add as a plugin, breaks.
Anyone had anything similar?
Thanks!
The css generated when a checkbox with class form-checkbox
is checked is:
background-image: {
url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='//www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e")
}
However, the check does not show; I can only see a fully-filled-in blue box with no check.
If I manually modify the css to escape all single quotes and add http:
to the w3.org link instead of //
, then it works correctly:
background-image: {
url("data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z\'/%3e%3c/svg%3e")
}
I am using:
"@tailwindcss/custom-forms": "^0.2.1",
"tailwindcss": "^1.6.0",
...on a Laravel 7 project. N.B. It works fine when I use it from within a vue-cli project.
Thanks
when manipulating default forms for a site, I've noticed that I can hard code it in html with something like text-indigo-500, however I can't apply that in tailwind config.js.
Code snippet:
theme: {
customForms: theme => ({
default: {
'input, textarea, multiselect, select': {
borderRadius: theme('borderRadius.none'),
borderColor: theme('colors.gray.400'),
borderWidth: theme('width.px'),
fontSize: theme('fontSize.sm'),
boxShadow: theme('boxShadow.md'),
paddingTop: theme('padding.3'),
paddingBottom: theme('padding.3'),
},
checkbox: {
borderColor: theme('colors.gray.500'), //<- will work
textColor: theme('colors.indigo.500'), //<-wont change the selected state
//bg color of the check or radio
height: theme('height.5'),
width: theme('width.5'),
boxShadow: theme('boxShadow.md'),
},
radio: {
borderColor: theme('colors.gray.500'),
boxShadow: theme('boxShadow.md'),
height: theme('height.5'),
width: theme('width.5'),
icon: '<svg fill="#fff" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4.5"/></svg>'
},
However that radio will change if I do it in a css class.
<label class="inline-flex items-center">
<input type="radio" name="radio" id="radio" class="form-radio text-indigo-500" value="1" {{ old('radio','') == 1 ? 'checked':'' }}>
<span class="ml-2">Radio</span>
</label>
Any advice appreciated.
Having a dark theme with a focus effect doesn't seem to work as intended. I expect the border to change to red when I focus an input text field but it just doesn't change at all. Also removing the default :focus and :disable renders different results on the dark theme focus when focused.
Am I doing this wrong?
module.exports = {
theme: {
customForms: theme => ({
dark: {
'input, select, checkbox, multiselect, textarea': {
backgroundColor: theme('colors.transparent'),
borderColor: theme('colors.blue.900'),
color: theme('colors.white'),
},
input: {
'&:focus': {
boxShadow: undefined,
borderColor: theme('colors.red.200'),
},
'&:disabled': {
backgroundColor: theme('colors.gray.700'),
opacity: 0.4,
},
},
},
default: {
'input, select, textarea': {
backgroundColor: theme('colors.transparent'),
'&:focus': {
boxShadow: undefined,
borderColor: theme('colors.gray.800'),
},
'&:disabled': {
backgroundColor: theme('colors.gray.100'),
opacity: 0.4,
},
},
checkbox: {
width: theme('spacing.6'),
height: theme('spacing.6'),
},
},
sm: {
'input, textarea, multiselect, select': {
fontSize: theme('fontSize.sm'),
padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
},
select: {
paddingRight: `${theme('spacing.4')}`,
},
'checkbox, radio': {
width: theme('spacing.3'),
height: theme('spacing.3'),
},
},
}),
},
plugins: [
require('@tailwindcss/custom-forms'),
],
};
I've noticed that addInput
does not use replaceIconDeclarations
, but icons are often used in login designs (e.g Netlify).
I can work around this by configuring a select class and adding that to an input field. This just feels like a dirty fix though. Any plans on adding this? Can make a PR if needed.
Or it doesn't write !importants into the finished css.
Is it possible to disable focus on the checkbox somehow? I tried adding the class focus:outline-none
but doesn't seem to work. Thanks!
I already tested it on a real project and it works great so far. What do you think about separating some configuration attributes per form type? In my case, for instance, I set the border to none, because I don't need the borders on the input elements (textfield, textarea etc.). But disabling it also disables the border for the checkboxes which is not what I want.
I could imagine that separating it would make sense. What do you think?
It's not clear whether a checkbox/radio is checked when it is printed and background graphics are disabled (default setting):
It's fixable with -webkit-print-color-adjust: exact;
for webkit, but I don't think there's a quick solution for other browsers.
I guess wrapping the custom checkbox/ in a @media not print {}
query would be the easiest solution, although this would break the sizing (whitespace where the checkbox should be).
Or we could add something like
@media print {
.form-checkbox {
appearance: checkbox;
width: auto !important;
height: auto !important;
}
.form-radio {
appearance: radio;
width: auto !important;
height: auto !important;
}
}
// I tried combining the selectors and use `appearance: initial`, but that didn't work
to force normal checkboxes/radios for print and disable the sized checkboxes.
Possibly we'll need something alike for the custom select.
Unlike default modifier, if I want to make a new modifier for select with different iconColor, it's must to add icon too or return an error.
eg:
the
default
modifier (Work)
customForms: theme => ({
default: {
select: {
backgroundColor: theme('colors.white'),
iconColor: theme('colors.blue.700'),
}
},
}),
my
light
modifier (Not Work)
customForms: theme => ({
light: {
select: {
backgroundColor: theme('colors.white'),
iconColor: theme('colors.blue.700'),
}
},
}),
my
light
modifier (Work)
customForms: theme => ({
light: {
select: {
backgroundColor: theme('colors.white'),
iconColor: theme('colors.blue.700'),
icon: iconColor => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${iconColor}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
}
},
}),
I’d say adding support for at least input[type=“color”]
and input[type=“range”]
would make the plugin twice as useful as it is now.
input[type=“file”]
would also be cool but I’m not sure how much can you style the button and not loose the ability to display the selected file name without using any JS.
Then there’s all those inputs for date, time, week, month… Not even sure what could be done for those (I’ve never styled them without using any JS library). Just mentioning them in case someone else sees this and has some experience doing it or something.
In regards to your Tailwind UI newsletter
Tailwind UI Update # 6: Everything you ever (never?) wanted to know about sizing form controls
I have an existing html base where I cannot change the html markup. I am utilizing this by building my styles as components with @apply
. That is working great, but my tailwind.css file is getting super long, so I was hoping to separating sections of the tailwind.css in their own files and utilizing @import via your instructions in the documentation, https://tailwindcss.com/docs/using-with-preprocessors/#build-time-imports.
Here is a glance of what my tailwind.css file looks like.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* basic form */
.mpp_formField {
@apply block;
}
.mpp_formControl input[type=checkbox] {
@apply form-checkbox text-indigo-600;
}
I get the following error...
CssSyntaxError: /Users/bz/Dev/mp-portal-skin-tailwind/public/tailwind.css:94:5: @apply
cannot be used with .form-checkbox
because .form-checkbox
either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .form-checkbox
exists, make sure that any @import
statements are being properly processed before Tailwind CSS sees your CSS, as @apply
can only be used for classes in the same CSS tree.
[0]
I'm working on two different sites (designed by different folks) and for both I had to implement this kind of radio input:
Due to icon
only being applied to :checked
elements, I couldn't rely on it to style the input. Given it automatically escapes the SVG code and let's us take advantage of iconColor
, it would be great if we could use it to add a bg-image to all radios regardless of their state.
Hey @adamwathan, thanks for the amazing library and this plugin!
I'm writing here so I mostly don't forget, but it seems that .form-checkbox
removes native stylings but doesn't add one for the indeterminate state.
Checkboxes can be checked, unchecked, as well as indeterminate. Indeterminate is not usually used, but has its visual benefits. More info on MDN.
Would be great if the form-checkbox
class supports the indeterminate state.
Sorry the title is almost meaningless, I couldn't figure out a best way to describe it.
Issue: I have more than one default for custom form plug-in:
The code should clear it up, I'll post the whole webpack.mix.js at the end for reference, but for example this segment:
customForms: theme => ({
default: {
'input, textarea, multiselect, select': {
width: theme('width.full'),
borderRadius: theme('borderRadius.none'),
borderColor: theme('colors.gray.400'),
borderWidth: theme('width.px'),
fontSize: theme('fontSize.sm'),
boxShadow: theme('boxShadow.md'),
paddingTop: theme('padding.3'),
paddingBottom: theme('padding.3'),
},
checkbox: {
height: theme('height.5'),
width: theme('width.5'),
boxShadow: theme('boxShadow.md'),
color: theme('colors.brand.600'),
},
radio: {
boxShadow: theme('boxShadow.md'),
height: theme('height.5'),
width: theme('width.5'),
color: theme('colors.brand.600'),
icon: '<svg fill="#fff" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4.5"/></svg>'
},
'input, textarea, multiselect, select, checkbox, radio': {
'&:focus': {
borderColor: theme('colors.brand.400'),
boxShadow: theme('boxShadow.outline'),
transition: 'box-shadow 100ms ease-in-out',
},
},
},
required: {
'input, textarea, multiselect, select': {
width: theme('width.full'),
borderRadius: theme('borderRadius.none'),
borderColor: theme('colors.gray.600'),
borderWidth: theme('width.px'),
fontSize: theme('fontSize.sm'),
boxShadow: theme('boxShadow.md'),
paddingTop: theme('padding.3'),
paddingBottom: theme('padding.3'),
paddingLeft: theme('padding.3'),
},
'input, textarea, multiselect, select, checkbox, radio': {
'&:focus': {
outline: 'none',
borderColor: theme('colors.brand.400'),
boxShadow: theme('boxShadow.outline'),
transition: 'box-shadow 100ms ease-in-out',
},
},
},
Defines a default, in my case optional variation that seems to work perfectly.
creating form-input, form-select,form-checkbox
etc....
It also creates the group: 'form-input-required, form-select-required` and so on
I've noticed that default form classes all work perfectly, however, the required form classes actually work, but not for "form-select" which is defined but missing issues.
Rendered CSS:
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e");
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
background-repeat: no-repeat;
background-color: #fff;
border-color: #cbd5e0;
border-width: 1px;
border-radius: 0;
padding-top: 0.75rem;
padding-right: 2.5rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
font-size: .75rem;
line-height: 1.5;
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
width: 100%;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.form-select-required {
width: 100%;
border-radius: 0;
border-color: #718096;
border-width: 1px;
font-size: .75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}
I think it's not recognizing it as a select and just a styled component.
Here is the whole file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
screens: {
xs: '440px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
fontSize: {
'xx': '0.550rem',
'xs': '.625rem', // 10px
'sm': '.75rem', // 12px
'base': '.875rem', // 14px
'lg': '1rem', // 16px
'xl': '1.125rem', // 18px
'2xl': '1.25rem', // 20px
'3xl': '1.5rem', // 24px
'4xl': '1.75rem', // 28px
'5xl': '2.25rem', // 36px
'6xl': '3rem', // 48px
'7xl': '4rem', // 48px
},
extend: {
fontFamily: {
sans: [
'Avenir Next',
'Proxima Nova',
...defaultTheme.fontFamily.sans,
],
header: [
'Montserrat',
...defaultTheme.fontFamily.sans,
]
},
colors: {
brand: {...defaultTheme.colors.teal},
smoke: {
'100': 'rgba(0, 0, 0, 0.1)',
'200': 'rgba(0, 0, 0, 0.2)',
'300': 'rgba(0, 0, 0, 0.3)',
'400': 'rgba(0, 0, 0, 0.4)',
'500': 'rgba(0, 0, 0, 0.5)',
'600': 'rgba(0, 0, 0, 0.6)',
'700': 'rgba(0, 0, 0, 0.7)',
'800': 'rgba(0, 0, 0, 0.8)',
'900': 'rgba(0, 0, 0, 0.9)',
},
turquoise: {
'100': '#BDDBED',
'200': '#A2E1F3',
'300': '#80d6ef',
'400': '#71c2f5',
'500': '#1899be',
'600': '#0E7BBF',
'700': '#094d78',
'800': '#041f30',
'900': '#03111B',
},
'white-alpha': 'hsla(0, 0%, 100%, 0.15)',
'white-semi-trans': 'hsla(0, 0%, 100%, 0.65)',
},
boxShadow: theme => ({
outline: `0 0 0 3px ${theme('colors.brand.500')}60`,
}),
width: {
'7': '1.75rem',
'14': '3.5rem',
},
height: {
'7': '1.75rem',
'80': '20rem',
'96': '24rem',
'128': '32rem',
'192': '48rem',
'256': '64rem',
},
customForms: theme => ({
default: {
'input, textarea, multiselect, select': {
width: theme('width.full'),
borderRadius: theme('borderRadius.none'),
borderColor: theme('colors.gray.400'),
borderWidth: theme('width.px'),
fontSize: theme('fontSize.sm'),
boxShadow: theme('boxShadow.md'),
paddingTop: theme('padding.3'),
paddingBottom: theme('padding.3'),
},
checkbox: {
height: theme('height.5'),
width: theme('width.5'),
boxShadow: theme('boxShadow.md'),
color: theme('colors.brand.600'),
},
radio: {
boxShadow: theme('boxShadow.md'),
height: theme('height.5'),
width: theme('width.5'),
color: theme('colors.brand.600'),
icon: '<svg fill="#fff" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4.5"/></svg>'
},
'input, textarea, multiselect, select, checkbox, radio': {
'&:focus': {
borderColor: theme('colors.brand.400'),
boxShadow: theme('boxShadow.outline'),
transition: 'box-shadow 100ms ease-in-out',
},
},
},
required: {
'input, textarea, multiselect, select': {
width: theme('width.full'),
borderRadius: theme('borderRadius.none'),
borderColor: theme('colors.gray.600'),
borderWidth: theme('width.px'),
fontSize: theme('fontSize.sm'),
boxShadow: theme('boxShadow.md'),
paddingTop: theme('padding.3'),
paddingBottom: theme('padding.3'),
paddingLeft: theme('padding.3'),
},
'input, textarea, multiselect, select, checkbox, radio': {
'&:focus': {
outline: 'none',
borderColor: theme('colors.brand.400'),
boxShadow: theme('boxShadow.outline'),
transition: 'box-shadow 100ms ease-in-out',
},
},
},
}),
}
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
},
plugins: [
require('@tailwindcss/custom-forms'),
]
}
Hi, I am building custom CSS file with Tailwind (1.2.0), Tailwind custom forms (0.2.1), and latest PostCSS and PurgeCSS.
However, with a minimal tailwind.config.js
the built CSS file does not include any of the custom form styles. Only when I use the full Tailwind config file (tailwind init --full
), do the custom form styles appear in the built CSS file. Below is my minimal tailwind.config.js
:
module.exports = {
theme: {
extend: {
colors: {
mycolor: "#c53030"
}
},
variants: {},
plugins: [require("@tailwindcss/custom-forms")]
}
};
Hi,
I noticed your library is even bigger than tailwindcss by a large margin due to lodash.
https://bundlephobia.com/[email protected]
https://bundlephobia.com/result?p=@tailwindcss/[email protected]
Does that increase our app's file size or does tailwindcss extract the css only?
Hi, I want to change the border
and select
color of the option
element.
It should be editable in the config file.
Havn't s seen it in the code, so please tell me, if I missed something.
html:
<select>
<option value="Shipping">Shipping</option>
<option value="Shipped">Shipped</option>
</select>
The config should be something like
tailwind.config.js
customForms: theme => ({
default: {
"input, select, option": {
borderColor: theme("colors.gray.600"),
},
},
}),
I find the default border color (gray 300) a little hard to see and suggest increasing it to gray 400.
The gray 400 color is almost identical to the border color for bootstrap.
I know that you can customize the border color in the config but I wanted to suggest the default be raised.
I'm having some styling issues with select fields. Using the example from the docs the fields does not get styled as expected. This is using tailwind, no other CSS or resets present. Any ideas?
<label class="block mt-4"> <span class="text-gray-700">Requested Limit</span> <select class="form-select mt-1 block w-full"> <option>$1,000</option> <option>$5,000</option> <option>$10,000</option> <option>$25,000</option> </select> </label>
custom-forms with applyComplexClasses on, shows focus state as default state
Are you seeing the same?
When I deactivate applyComplexClasses everything comes back to normal
We should provide some basic theming for the :disabled
state. Probably a color setting which will be applied as background.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.