tailwind.config.js

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
        'primary-1': 'var(--color-primary-1)',
        'primary-2': 'var(--color-primary-2)',
        'primary-3': 'var(--color-primary-3)',
        'primary-4': 'var(--color-primary-4)',
        'primary-5': 'var(--color-primary-5)',
        'block-light': 'var(--color-block-light)',
        'line-black': 'var(--color-line-black)',
        'button-brown': 'var(--color-button-brown)',
        error: 'var(--color-error)',
        white: 'var(--color-white)',
      },
    },
  },
  plugins: [],
}

<div class="roi border-solid border-2 bg-color-primary-5 w-full h-full">
    Hello
</div>