tailwindlabs / tailwindcss-custom-forms Goto Github PK

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

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'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.

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.

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.

Datalist with form-select shows system's dropdown icon.

Using this code:

<input class="form-select" list="list" />
<datalist id="list">
  <option value="1">First one</option>
  <option value="2">Second one</option>
</datalist>

Hi there, When I use this plugin while I setup important : true in tailwind.config.js setting file, all styles are with suffix !important but the styles from this plugin.

I hope it's clear.

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>

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?

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.

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!

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.

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.

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

In regards to your Tailwind UI newsletter

Tailwind UI Update # 6: Everything you ever (never?) wanted to know about sizing form controls

I find the default border color (gray 300) a little hard to see and suggest increasing it to gray 400.

https://imgur.com/4xaDkvp

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.

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.

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.

Images:

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'),
    ]
}

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.

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")]
  }
};

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 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.

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"),
    },
  },
}),

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 :)

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

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.

Versions:

• tailwindcss 1.1.2
• custom-forms 0.2.1

Misc:

• package manager yarn
• laravel-mix for bundling
• Using laravel-mix-purgecss

Details:
Form styles are applied to inputs via @apply to WordPress generated fields. Form styles works perfect in dev but gets removed in prod.

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.

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!

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?

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?

can we add support for custom select dropdowns?

Or it doesn't write !importants into the finished css.

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.

Can use font awesome icon like

customForms: theme => ({
      default: {
        select: {
          icon: '<i className="fas fa-sort-down"></i>',
        },
      },
    })

instead of SVG Icon

On MacOS Mojave Version 10.14.5 (18F132) and Safari Version 12.1.1 (14607.2.6.1.1), the checkboxes do not respond to any styling (colours or sizes). Radio buttons display correctly as styled.

For example, from Workcation live stream:

And viewing the custom-forms documentation page:

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?

Checkboxes with customized colors and sizes do not work. Even on the demo site the color is still the same.

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):

• A11y Style Guide
• IU's Design System

I can work on a PR for markup - but may need help with style choices.

We should provide some basic theming for the :disabled state. Probably a color setting which will be applied as background.

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>
  );

In broswer:

css:

This is in Chrome Version 78.0.3904.70 (Official Build) (64-bit) on Mac 10.14.2

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.

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]

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.

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!

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

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 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)