Skip to content
This repository has been archived by the owner on Sep 11, 2021. It is now read-only.

Consider picking up theme colors automatically #59

Open
ragulka opened this issue Mar 17, 2020 · 1 comment
Open

Consider picking up theme colors automatically #59

ragulka opened this issue Mar 17, 2020 · 1 comment

Comments

@ragulka
Copy link

ragulka commented Mar 17, 2020

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.

@eduarguz
Copy link

eduarguz commented Oct 8, 2020

Just found out about this, I thought I was using my custom grays for ages

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants