Override Default Styles Feature

[gho1b]

This pull request adds a new feature to Tailwind CSS that allows you to override the default styles for forms. To do this, you add a new forms object to the theme section of your tailwind.config.js file. Within this object, you can define custom styles for any aspect of your forms, such as the input fields, buttons, and labels.

module.exports = {
  content: ['./index.html', './kitchen-sink.html'],
  theme: {
    extend: {
      forms: ({ theme }) => ({
        baseTextColor: colors.amber[500],
        baseBorderRadius: theme('borderRadius.xs'),
        baseFocusBorderColor: theme('colors.yellow.500'),
      }),
    },
  },
  plugins: [require('./src')],
}

The forms object follow below schema

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {
        "Root": {
            "title": "Root",
            "type": "object",
            "properties": {
                "baseAppearance": {
                    "type": "string",
                    "title": "baseAppearance"
                },
                "basebackgroundColor": {
                    "type": "string",
                    "title": "basebackgroundColor"
                },
                "baseBorderColor": {
                    "type": "string",
                    "title": "baseBorderColor"
                },
                "baseBorderWith": {
                    "type": "string",
                    "title": "baseBorderWith"
                },
                "baseBorderRadius": {
                    "type": "string",
                    "title": "baseBorderRadius"
                },
                "baseTextColor": {
                    "type": "string",
                    "title": "baseTextColor"
                },
                "basePaddingTop": {
                    "type": "string",
                    "title": "basePaddingTop"
                },
                "basePaddingRight": {
                    "type": "string",
                    "title": "basePaddingRight"
                },
                "basePaddingBottom": {
                    "type": "string",
                    "title": "basePaddingBottom"
                },
                "basePaddingLeft": {
                    "type": "string",
                    "title": "basePaddingLeft"
                },
                "baseFontSize": {
                    "type": "string",
                    "title": "baseFontSize"
                },
                "baseLineHeight": {
                    "type": "string",
                    "title": "baseLineHeight"
                },
                "baseTwShadow": {
                    "type": "string",
                    "title": "baseTwShadow"
                },
                "baseFocusOutline": {
                    "type": "string",
                    "title": "baseFocusOutline"
                },
                "baseFocusOutlineOffset": {
                    "type": "string",
                    "title": "baseFocusOutlineOffset"
                },
                "baseFocusTwRingInset": {
                    "type": "string",
                    "title": "baseFocusTwRingInset"
                },
                "baseFocusTwRingOffsetWidth": {
                    "type": "string",
                    "title": "baseFocusTwRingOffsetWidth"
                },
                "baseFocusTwRingOffsetColor": {
                    "type": "string",
                    "title": "baseFocusTwRingOffsetColor"
                },
                "baseFocusTwRingColor": {
                    "type": "string",
                    "title": "baseFocusTwRingColor"
                },
                "baseFocusTwRingOffsetShadow": {
                    "type": "string",
                    "title": "baseFocusTwRingOffsetShadow"
                },
                "baseFocusTwRingShadow": {
                    "type": "string",
                    "title": "baseFocusTwRingShadow"
                },
                "baseFocusBoxShadow": {
                    "type": "string",
                    "title": "baseFocusBoxShadow"
                },
                "baseFocusBorderColor": {
                    "type": "string",
                    "title": "baseFocusBorderColor"
                },
                "basePlaceholderTextColor": {
                    "type": "string",
                    "title": "basePlaceholderTextColor"
                },
                "basePlaceholderOpacity": {
                    "type": "string",
                    "title": "basePlaceholderOpacity"
                },
                "webkitDatetimePadding": {
                    "type": "string",
                    "title": "webkitDatetimePadding"
                },
                "webkitDatetimeMinHeight": {
                    "type": "string",
                    "title": "webkitDatetimeMinHeight"
                },
                "webkitDatetimeTextAlign": {
                    "type": "string",
                    "title": "webkitDatetimeTextAlign"
                },
                "webkitDatetimeDisplay": {
                    "type": "string",
                    "title": "webkitDatetimeDisplay"
                },
                "webkitDatetimePaddingTop": {
                    "type": "number",
                    "title": "webkitDatetimePaddingTop"
                },
                "webkitDatetimePaddingBottom": {
                    "type": "number",
                    "title": "webkitDatetimePaddingBottom"
                },
                "selectBackgroundColor": {
                    "type": "string",
                    "title": "selectBackgroundColor"
                },
                "selectBackgroundImage": {
                    "type": "string",
                    "title": "selectBackgroundImage"
                },
                "selectBackgroundPosition": {
                    "type": "string",
                    "title": "selectBackgroundPosition"
                },
                "selectBackgroundRepeat": {
                    "type": "string",
                    "title": "selectBackgroundRepeat"
                },
                "selectBackgroundSize": {
                    "type": "string",
                    "title": "selectBackgroundSize"
                },
                "selectPaddingRight": {
                    "type": "string",
                    "title": "selectPaddingRight"
                },
                "selectPrintColorAdjust": {
                    "type": "string",
                    "title": "selectPrintColorAdjust"
                },
                "selectMultipleBackgroundImage": {
                    "type": "string",
                    "title": "selectMultipleBackgroundImage"
                },
                "selectMultipleBackgroundPosition": {
                    "type": "string",
                    "title": "selectMultipleBackgroundPosition"
                },
                "selectMultipleBackgroundRepeat": {
                    "type": "string",
                    "title": "selectMultipleBackgroundRepeat"
                },
                "selectMultipleBackgroundSize": {
                    "type": "string",
                    "title": "selectMultipleBackgroundSize"
                },
                "selectMultiplePaddingRight": {
                    "type": "string",
                    "title": "selectMultiplePaddingRight"
                },
                "selectMultiplePrintColorAdjust": {
                    "type": "string",
                    "title": "selectMultiplePrintColorAdjust"
                },
                "checkboxAppearance": {
                    "type": "string",
                    "title": "checkboxAppearance"
                },
                "checkboxPadding": {
                    "type": "string",
                    "title": "checkboxPadding"
                },
                "checkboxPrintColorAdjust": {
                    "type": "string",
                    "title": "checkboxPrintColorAdjust"
                },
                "checkboxDisplay": {
                    "type": "string",
                    "title": "checkboxDisplay"
                },
                "checkboxVerticalAlign": {
                    "type": "string",
                    "title": "checkboxVerticalAlign"
                },
                "checkboxBackgroundOrigin": {
                    "type": "string",
                    "title": "checkboxBackgroundOrigin"
                },
                "checkboxUserSelect": {
                    "type": "string",
                    "title": "checkboxUserSelect"
                },
                "checkboxFlexShrink": {
                    "type": "string",
                    "title": "checkboxFlexShrink"
                },
                "checkboxHeight": {
                    "type": "string",
                    "title": "checkboxHeight"
                },
                "checkboxWidth": {
                    "type": "string",
                    "title": "checkboxWidth"
                },
                "checkboxColor": {
                    "type": "string",
                    "title": "checkboxColor"
                },
                "checkboxBackgroundColor": {
                    "type": "string",
                    "title": "checkboxBackgroundColor"
                },
                "checkboxBorderColor": {
                    "type": "string",
                    "title": "checkboxBorderColor"
                },
                "checkboxBorderWidth": {
                    "type": "string",
                    "title": "checkboxBorderWidth"
                },
                "checkboxTWShadow": {
                    "type": "string",
                    "title": "checkboxTWShadow"
                },
                "checkboxBorderRadius": {
                    "type": "string",
                    "title": "checkboxBorderRadius"
                },
                "radioBorderRadius": {
                    "type": "string",
                    "title": "radioBorderRadius"
                },
                "checkboxFocusOutline": {
                    "type": "string",
                    "title": "checkboxFocusOutline"
                },
                "checkboxFocusOutlineOffset": {
                    "type": "string",
                    "title": "checkboxFocusOutlineOffset"
                },
                "checkboxFocusTwRingInset": {
                    "type": "string",
                    "title": "checkboxFocusTwRingInset"
                },
                "checkboxFocusTwRingOffsetWidth": {
                    "type": "string",
                    "title": "checkboxFocusTwRingOffsetWidth"
                },
                "checkboxFocusTwRingOffsetColor": {
                    "type": "string",
                    "title": "checkboxFocusTwRingOffsetColor"
                },
                "checkboxFocusTwRingColor": {
                    "type": "string",
                    "title": "checkboxFocusTwRingColor"
                },
                "checkboxFocusTwRingOffsetShadow": {
                    "type": "string",
                    "title": "checkboxFocusTwRingOffsetShadow"
                },
                "checkboxFocusTwRingShadow": {
                    "type": "string",
                    "title": "checkboxFocusTwRingShadow"
                },
                "checkboxFocusBoxShadow": {
                    "type": "string",
                    "title": "checkboxFocusBoxShadow"
                },
                "checkboxBackgroundSize": {
                    "type": "string",
                    "title": "checkboxBackgroundSize"
                },
                "checkboxBackgroundPosition": {
                    "type": "string",
                    "title": "checkboxBackgroundPosition"
                },
                "checkboxBackgroundRepeat": {
                    "type": "string",
                    "title": "checkboxBackgroundRepeat"
                },
                "checkboxBackgroundFillColor": {
                    "type": "string",
                    "title": "checkboxBackgroundFillColor"
                },
                "checkboxBackgroundImage": {
                    "type": "string",
                    "title": "checkboxBackgroundImage"
                },
                "checkboxCheckedBackgroundFillColor": {
                    "type": "string",
                    "title": "checkboxCheckedBackgroundFillColor"
                },
                "checkboxCheckedBackgroundColor": {
                    "type": "string",
                    "title": "checkboxCheckedBackgroundColor"
                },
                "checkboxCheckedBackgroundImage": {
                    "type": "string",
                    "title": "checkboxCheckedBackgroundImage"
                },
                "radioCheckedBackgroundFillColor": {
                    "type": "string",
                    "title": "radioCheckedBackgroundFillColor"
                },
                "radioCheckedBackgroundImage": {
                    "type": "string",
                    "title": "radioCheckedBackgroundImage"
                },
                "checkboxCheckedHoverBorderColor": {
                    "type": "string",
                    "title": "checkboxCheckedHoverBorderColor"
                },
                "checkboxCheckedHoverBackgroundColor": {
                    "type": "string",
                    "title": "checkboxCheckedHoverBackgroundColor"
                },
                "checkboxIndeterminateBorderColor": {
                    "type": "string",
                    "title": "checkboxIndeterminateBorderColor"
                },
                "checkboxIndeterminateBackgroundColor": {
                    "type": "string",
                    "title": "checkboxIndeterminateBackgroundColor"
                },
                "checkboxIndeterminateBackgroundSize": {
                    "type": "string",
                    "title": "checkboxIndeterminateBackgroundSize"
                },
                "checkboxIndeterminateBackgroundPosition": {
                    "type": "string",
                    "title": "checkboxIndeterminateBackgroundPosition"
                },
                "checkboxIndeterminateBackgroundRepeat": {
                    "type": "string",
                    "title": "checkboxIndeterminateBackgroundRepeat"
                },
                "checkboxIndeterminateHoverBorderColor": {
                    "type": "string",
                    "title": "checkboxIndeterminateHoverBorderColor"
                },
                "checkboxIndeterminateHoverBackgroundColor": {
                    "type": "string",
                    "title": "checkboxIndeterminateHoverBackgroundColor"
                },
                "fileBackground": {
                    "type": "string",
                    "title": "fileBackground"
                },
                "fileBorderColor": {
                    "type": "string",
                    "title": "fileBorderColor"
                },
                "fileBorderWidth": {
                    "type": "string",
                    "title": "fileBorderWidth"
                },
                "fileBorderRadius": {
                    "type": "string",
                    "title": "fileBorderRadius"
                },
                "filepadding": {
                    "type": "string",
                    "title": "filepadding"
                },
                "fileFontSize": {
                    "type": "string",
                    "title": "fileFontSize"
                },
                "fileLineHeight": {
                    "type": "string",
                    "title": "fileLineHeight"
                },
                "fileFocusOutline": {
                    "anyOf": [
                        {
                            "type": "array",
                            "items": {
                                "type": "string"
                            }
                        },
                        {
                            "type": "string"
                        }
                    ],
                    "title": "fileFocusOutline"
                }
            }
        }
    }
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tailwindcss-forms	✅ Ready (Inspect)	Visit Preview	Sep 28, 2023 10:13pm

[adamwathan]

Hey thanks for the PR! Our old forms plugin used to work this way but when we built this new one we decided that approach was way too cumbersome and felt like needless indirection, and instead built this plugin with the intention of it being customized by just writing your own CSS:

#33 (comment)

So unfortunately going to close this as it doesn't align with the goals of the project right now. Appreciate it either way 🤝