Default Tailwind Config

tailwind.config.js

const _ = require("lodash");
const twTheme = require("tailwindcss/defaultTheme");
const Color = require("color");

const brandColors = {};

const customColors = {
    primary: {
        default: twTheme.colors.blue[500],
        text: 'white'
    },
    secondary: {
        default: twTheme.colors.gray[500],
        text: 'black'
    },
    danger: {
        default: twTheme.colors.red[500],
        text: 'white'
    },
    warning: {
        default: twTheme.colors.orange[500],
        text: 'black'
    },
    success: {
        default: twTheme.colors.green[500],
        text: 'white'
    },
    info: {
        default: twTheme.colors.indigo[500],
        text: 'white'
    },
};

module.exports = {
    theme: {
        colors: {
            customColors,
            ...colors
        },
        extend: {
            fontFamily: {
                nunito: ["Nunito", "sans-serif"]
            }
        },
        container: {
            center: true
        },
        customForms: {
            default: {
                "input, textarea, select, multiselect, checkbox, radio": {
                    borderColor: twTheme.colors.gray[400],
                    transition:
                        "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
                    "&:focus": {
                        borderColor: twTheme.colors.blue[400],
                        boxShadow: `0 0 0 .2em ${Color(twTheme.colors.blue[500])
                            .alpha(0.35)
                            .rgb()
                            .toString()}`
                    },
                    "&.is-invalid": {
                        borderColor: twTheme.colors.red[500]
                    },
                    "&.is-invalid:focus": {
                        boxShadow: `0 0 0 .2em ${Color(twTheme.colors.red[500])
                            .alpha(0.25)
                            .rgb()
                            .toString()}`
                    }
                },
                "input, textarea, select, multiselect": {
                    paddingTop: twTheme.spacing["1"],
                    paddingBottom: twTheme.spacing["1"]
                }
            }
        }
    },
    variants: {},
    plugins: [
        require("@tailwindcss/custom-forms"),
        require("tailwind-bootstrap-grid")({
            gridGutterWidth: "24px",
            containerMaxWidths: twTheme.screens,
            generateContainer: false
        }),
        function({ addUtilities }) {
            const newUtilities = {
                ".is-invalid": {
                    color: twTheme.colors.red[100],
                    fontSize: twTheme.fontSize.sm
                }
            };

            addUtilities(newUtilities);
        },
        function({ addComponents }) {
            const customAlerts = {
                ".alert": {
                    display: "block",
                    padding: `${twTheme.spacing["2"]} ${twTheme.spacing["4"]}`,
                    fontSize: twTheme.fontSize.base,
                    fontWeight: twTheme.fontWeight.normal,
                    lineHeight: twTheme.lineHeight.tight,
                    borderRadius: twTheme.borderRadius.default
                },
                ".alert-danger": {
                    background: Color(customColors.danger)
                        .alpha(0.35)
                        .rgb()
                        .toString(),
                    text: customColors.danger
                },
                ".alert-warning": {
                    background: Color(customColors.warning)
                        .alpha(0.35)
                        .rgb()
                        .toString(),
                    text: customColors.warning
                },
                ".alert-success": {
                    background: Color(customColors.success)
                        .alpha(0.35)
                        .rgb()
                        .toString(),
                    text: customColors.success
                },
                ".alert-info": {
                    background: Color(customColors.info)
                        .alpha(0.35)
                        .rgb()
                        .toString(),
                    text: customColors.info
                }
            };

            addComponents(customAlerts);
        },
        function({ addComponents, e }) {
            const customButtons = [
                {
                    ".btn": {
                        display: "inline-block",
                        padding: `${twTheme.spacing["2"]} ${twTheme.spacing["4"]}`,
                        fontSize: twTheme.fontSize.base,
                        fontWeight: twTheme.fontWeight.semibold,
                        lineHeight: twTheme.lineHeight.tight,
                        borderRadius: twTheme.borderRadius.default,
                        textDecoration: "none",
                        transition:
                            "border-color .15s ease-in-out, box-shadow .15s ease-in-out"
                    },
                    ".btn-sm": {
                        padding: `${twTheme.spacing["2"]} ${twTheme.spacing["3"]}`,
                        fontSize: twTheme.fontSize.sm
                    },
                    ".btn-lg": {
                        padding: `${twTheme.spacing["3"]} ${twTheme.spacing["6"]}`,
                        fontSize: twTheme.fontSize.lg
                    }
                },
                ..._.map(customColors, (colorOptions, name) => {
                    return {
                        [`.btn-${e(name)}`]: {
                            backgroundColor: colorOptions.default,
                            color: colorOptions.text,
                            border: `solid 1px ${colorOptions.default}`,
                            "&:focus": {
                                outline: 0,
                                border: `solid 1px ${_.get(
                                    colorOptions,
                                    "activeBackground",
                                    Color(colorOptions.default)
                                        .darken(0.1)
                                        .hex()
                                        .toString()
                                )}`,
                                boxShadow: `0 0 0 .2em ${Color(
                                    colorOptions.default
                                )
                                    .alpha(0.35)
                                    .rgb()
                                    .toString()}`
                            },
                            "&:hover": {
                                backgroundColor: _.get(
                                    colorOptions,
                                    "hoverBackground",
                                    Color(colorOptions.default)
                                        .darken(0.1)
                                        .hex()
                                        .toString()
                                ),
                                border: `solid 1px ${_.get(
                                    colorOptions,
                                    "activeBackground",
                                    Color(colorOptions.default)
                                        .darken(0.1)
                                        .hex()
                                        .toString()
                                )}`,
                                color: _.get(
                                    colorOptions,
                                    "hoverText",
                                    colorOptions.text
                                )
                            },
                            "&:active": {
                                backgroundColor: _.get(
                                    colorOptions,
                                    "activeBackground",
                                    Color(colorOptions.default)
                                        .darken(0.1)
                                        .hex()
                                        .toString()
                                ),
                                border: `solid 1px ${_.get(
                                    colorOptions,
                                    "activeBackground",
                                    Color(colorOptions.default)
                                        .darken(0.1)
                                        .hex()
                                        .toString()
                                )}`,
                                color: _.get(
                                    colorOptions,
                                    "activeText",
                                    colorOptions.text
                                )
                            }
                        }
                    };
                })
            ];

            addComponents(customButtons);
        }
    ]
};