# 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