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", "./lib/forms/form-themes.js" ], safelist: [ { pattern: /.*bg-(blue|gray|red|yellow|green).*/, }, ...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat(), // Alerts ...['dark:hover:bg-notion-dark-light'] ], 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']) }) ] }