opnform/tailwind.config.js

90 lines
2.3 KiB
JavaScript

const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
],
safelist: [
{
pattern: /.*bg-(blue|gray|red|yellow|green).*/,
},
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
keyframes: {
'bonce-slow': {
'0%, 20%': {transform: 'translateY(0)'},
'8%': {transform: 'translateY(-25%)'},
'16%': {transform: 'translateY(+10%)'}
},
'infinite-scroll': {
from: { transform: 'translateX(0)' },
to: { transform: 'translateX(-100%)' },
}
},
animation: {
'bounce-slow': 'bonce-slow 3s ease-in-out infinite',
'infinite-scroll': 'infinite-scroll 50s linear infinite',
},
maxHeight: {
42: '10.5rem'
},
minHeight: {
6: '1.5rem',
8: '2rem'
},
maxWidth: {
15: '15rem',
10: '10rem',
8: '2rem'
},
translate: {
5.5: '1.4rem'
},
boxShadow: {
'inner-notion': '#0f0f0f1a 0px 0px 0px 1px inset',
'focus-notion': '#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important'
},
colors: {
gray: colors.slate,
'nt-blue': {
lighter: colors.blue['100'],
light: colors.blue['300'],
default: colors.blue['600'],
DEFAULT: colors.blue['600'],
dark: colors.blue['800']
},
'notion-dark': {
DEFAULT: '#191919',
light: '#2e2e2e'
},
'notion-input': {
background: '#F7F6F3',
backgroundDark: '#272B2C',
help: '#37352f99',
helpDark: '#fff9'
},
'form-color': 'var(--bg-form-color)'
},
transitionProperty: {
height: 'height',
width: 'width',
maxWidth: 'max-width',
spacing: 'margin, padding'
}
}
},
plugins: [
require('@tailwindcss/aspect-ratio'),
plugin(function({ addVariant }) {
addVariant('between', '&:not(:first-child):not(:last-child)')
addVariant('hocus', ['&:hover', '&:focus'])
})
]
}