# Tailwindcss

# Installation

If you want to include Alerts in your Tailwindcss build, then intall the plugin.

module.exports = {
    plugins: [
        require('@vue-interface/alert/tailwind')
    ]
};

# Theme

These are the default values. Only override what you need.

const Color = require('color');

module.exports = {
    theme: {
        alert: {
            borderRadius: '.25rem',
            borderStyle: 'solid',
            borderWidth: '1px',
            colors: {
                ...theme('colors'), {
                    primary: theme('colors.blue.500', '#9E9E9E'),
                    secondary: Color(theme('colors.gray.600', '#718096')).lighten(.05).hex(),
                    danger: theme('colors.red.600', '#E53E3E'),
                    success: Color(theme('colors.green.500', '#48BB78')).lighten(.10).hex(),
                    warning: theme('colors.orange.500', '#ED8936'),
                    info: theme('colors.teal.400', '#68D391'),
                    dark: theme('colors.gray.800', '#2D3748'),
                    light: theme('colors.gray.100', '#F7FAFC'),
                    muted: theme('colors.white', '#FFF')
                }
            },
            close: {
                position: 'absolute',
                top: 0,
                right: 0,
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                color: 'inherit',
                padding: '.66rem',
                lineHeight: '1rem',
                fontSize: '1.5rem',
            },
            dismissable: {
                padding: '0 0 0 3em'
            },
            fade: 'opacity .15s linear',
            header: {
                display: 'block',
                fontSize: '1.25rem'
            },
            lineHeight: '1.5rem',
            link: {
                color: 'currentColor'
            },
            position: 'relative',
            px: '.5rem',
            py: '1rem'
        }
    }
}

# Variations

The colors variations allow contextual colors for alerts. These are variation names are taken from Bootstrap 4 and can be used for convenience, or backwards compatibility. Any color name from your theme can be used or assigned to a contextual variation.

Default variations:

primary, secondary, danger, success, warning, info, dark, light, muted

# Color API

color is used to manipulate colors dynamically. API Docs