index.css

@import 'prism-themes/themes/prism-vsc-dark-plus.css';

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

:root {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: theme('colors.neutral.100');
  border: 1px none theme('colors.neutral.300');
  border-left-style: solid;
}

::-webkit-scrollbar-thumb {
  background: theme('colors.neutral.200');
  border: 1px solid theme('colors.neutral.300');
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: theme('colors.neutral.300');
}

:is(.dark) ::-webkit-scrollbar-track {
  background: theme('colors.neutral.950');
  border: 1px none theme('colors.neutral.900');
  border-left-style: solid;
}

:is(.dark) ::-webkit-scrollbar-thumb {
  background: theme('colors.neutral.900');
  border: 1px solid theme('colors.neutral.800');
  border-radius: 8px;
}

pre::-webkit-scrollbar-track {
  background: theme('colors.neutral.950');
  border: none;
}

pre::-webkit-scrollbar-thumb {
  background: theme('colors.neutral.900');
  border: none;
}

pre::-webkit-scrollbar-thumb:hover {
  background: theme('colors.neutral.800');
}

/**
 * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .code-highlight.
 */
.code-highlight {
  float: left; /* 1 */
  min-width: calc(100% - 3px); /* 2 */
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */
}

.code-line.inserted {
  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
}

.highlight-line {
  margin-left: -16px;
  margin-right: -16px;
  background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */
  border-left: 4px solid rgb(59, 130, 246); /* Set highlight accent border color */
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  margin-left: -8px;
  color: rgb(156, 163, 175); /* Line number color */
  content: attr(line);
}