# # Tailwindcss

- Installation
- Theme
- Variations
- Color API

## # 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