tailwind.config.js

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{vue,ts}'],
  theme: {
    extend: {
      colors: {
        'main-text': 'var(--color-main-text)',
        'text-maxcontrast': 'var(--color-text-maxcontrast)',
        'border-dark': 'var(--color-border-dark)',
        'main-background': 'var(--color-main-background)',
        'background-dark': 'var(--color-background-dark)',
        'background-darker': 'var(--color-background-darker)',
        'background-hover': 'var(--color-background-hover)',
        'primary-element': 'var(--color-primary-element)',

        unbalanced: colors.yellow[100],
        'unbalanced-dark': colors.yellow[700]
      },
      gridTemplateColumns: {
        transactionListItem: '44px 1fr minmax(0, 4fr) 2fr 1fr 44px'
      }
    }
  },
  corePlugins: {
    preflight: false
  },
  plugins: [],
  important: true,
  darkMode: ['class', '[data-theme-dark]']
};