For definitions not working on alternate config for select
roni-estein opened this issue · 0 comments
roni-estein commented
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'),
]
}