93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
|
const colors = require('tailwindcss/colors')
|
||
|
|
const plugin = require('tailwindcss/plugin')
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
content: [
|
||
|
|
"./components/**/*.{js,vue,ts}",
|
||
|
|
"./layouts/**/*.vue",
|
||
|
|
"./pages/**/*.vue",
|
||
|
|
"./plugins/**/*.{js,ts}",
|
||
|
|
"./app.vue",
|
||
|
|
"./error.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'])
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}
|