search

tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
https://tailwindcss-custom-forms.netlify.app/
MIT License
1.55k stars 72 forks source link

For definitions not working on alternate config for select #54

Open roni-estein opened 4 years ago

roni-estein commented 4 years ago

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:

Screen Shot 2020-01-03 at 2 01 30 PM

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