An oldschool VGUI color scheme for Tailwind

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  margin: 0;
}

@layer base {
  .outset {
    @apply border-[1px] border-l-vgui-border-light border-t-vgui-border-light border-r-vgui-border-dark border-b-vgui-border-dark;
  }

  .inset {
    @apply border-[1px] bg-vgui-default-dark border-l-vgui-border-dark border-t-vgui-border-dark border-r-vgui-border-light border-b-vgui-border-light;
  }
}

/* width */
::-webkit-scrollbar {
  @apply bg-vgui-default-dark;
}

/* Track */
::-webkit-scrollbar-track {
  @apply bg-vgui-default-dark;
  border-bottom: 1px solid #889180;
  border-right: 1px solid #889180;
  border-top: 1px solid #282E22;
  border-left: 1px solid #282E22;
  padding: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply bg-vgui-default;
  border-left: 1px solid #889180;
  border-top: 1px solid #889180;
  border-right: 1px solid #282E22;
  border-bottom: 1px solid #282E22;
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        "vgui-default": "#4C5844",
        "vgui-default-dark": "#3E4637",
        "vgui-text": "#D8DED3",
        "vgui-text-highlight": "#C4B550",
        "vgui-border-light": "#889180",
        "vgui-border-dark": "#282E22"
      }
    },
  },
  plugins: [],
}