TailwindCSS styles for styling markdown content for AdonisJS

markdown.css

.markdown {
  @apply text-prose font-body text-gray-800;
}

/**
 * ------------------------------------------------------
 *  Headings
 * ------------------------------------------------------
 */
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5 {
  @apply font-display font-semibold text-gray-900 leading-normal tracking-tight;
}
.markdown h1 a, .markdown h2 a, .markdown h3 a, .markdown h4 a, .markdown h5 a {
  @apply text-gray-900 no-underline;
}
.markdown h1 {
  @apply text-5xl mb-3 md:text-prose-6xl;
}
.markdown h1 code {
  @apply text-5xl md:text-prose-6xl;
}
.markdown h2 {
  @apply text-prose-4xl mt-24 mb-3;
}
.markdown h2 code {
  @apply text-prose-4xl;
}
.markdown h3 {
  @apply text-prose-3xl mb-2 mt-12;
}
.markdown h3 code {
  @apply text-prose-3xl;
}
.markdown h4 {
  @apply text-prose-2xl mb-2;
}
.markdown h4 code {
  @apply text-prose-2xl;
}

/**
 * ------------------------------------------------------
 *  Margins for all elements
 * ------------------------------------------------------
 */
.markdown p, .markdown, .markdown figure, .markdown table, .markdown .dimer-highlight, .markdown ul, .markdown ol, .markdown .alert {
  @apply mb-6;
}

/**
 * ------------------------------------------------------
 *  Table
 * ------------------------------------------------------
 */
.markdown table {
  @apply min-w-full border-collapse table-auto;
}
.markdown table tr th, .markdown table tr td {
  @apply border border-gray-300 text-left px-3 py-2;
}
.markdown table tr th {
  @apply font-semibold bg-gray-200;
}

/**
 * ------------------------------------------------------
 *  Codeblocks
 * ------------------------------------------------------
 */
.markdown code {
  @apply text-prose-codeblocks font-mono;
}
.markdown :not(pre) > code {
  @apply text-gray-900 font-medium whitespace-nowrap;
}

.markdown .dimer-highlight pre {
  @apply subpixel-antialiased;
}
.markdown .dimer-highlight {
  @apply relative bg-gray-900 rounded-md pt-6 pb-8 overflow-x-auto;
}

/**
 * ------------------------------------------------------
 *  Codeblocks Highlighted lines
 * ------------------------------------------------------
 */
.markdown .dimer-highlight:hover .line.dim {
  @apply opacity-100;
}
.markdown .dimer-highlight .line {
  @apply px-8 relative;
}
.markdown .dimer-highlight .line.dim {
  @apply opacity-40 transition-opacity;
}
.markdown .dimer-highlight .line.highlight-delete {
  @apply border-l-4 border-red-500;
  background-color: rgb(244 63 94/.15);
}
.markdown .dimer-highlight .line.highlight-delete:before {
  @apply text-red-500 absolute font-mono content-['-'] left-[10px];
}
.markdown .dimer-highlight .line.highlight-insert {
  @apply border-l-4 border-green-500;
  background-color: rgb(45 212 191/.15);
}
.markdown .dimer-highlight .line.highlight-insert:before {
  @apply text-green-500 absolute font-mono left-[10px] content-['+'];
}

/**
 * ------------------------------------------------------
 *  Codeblocks with title
 * ------------------------------------------------------
 */
.markdown .dimer-highlight .codeblock-title {
  @apply text-gray-300 bg-translucent py-1.5 px-4 rounded-xl inline-block font-mono text-sm font-semibold mb-4 mx-8;
}
.markdown .dimer-highlight .ctc-action {
  @apply absolute right-0 mr-6 text-gray-600 mt-2 hover:text-gray-300 z-20 transition-colors hidden lg:block;
}

/**
 * ------------------------------------------------------
 *  Codegroups
 * ------------------------------------------------------
 */
.markdown .codegroup {
  @apply relative bg-gray-900 rounded-md overflow-hidden;
}
.markdown .codegroup-tabs {
  @apply flex px-8 scroll-pl-8 relative overflow-x-scroll py-6 -mx-4;
}
.markdown .codegroup .dimer-highlight {
  @apply pt-0;
}
.markdown .codegroup-tabs .highlighter {
  @apply absolute bg-translucent z-10 rounded-xl transition-left;
}
.markdown .codegroup-tabs a {
  @apply text-gray-600 rounded-xl font-mono text-sm font-semibold no-underline py-1.5 px-4 whitespace-nowrap relative z-20 transition-colors hover:text-gray-300;
}
.markdown .codegroup-tabs a.active {
  @apply text-gray-300;
}

/**
 * ------------------------------------------------------
 *  Alerts
 * ------------------------------------------------------
 */
.markdown .alert {
  @apply border-2 rounded-md pr-3 pl-16 py-3 relative;
}
.markdown .alert .icon {
  @apply left-[15px] top-[18px];
}
.markdown .alert *:last-child {
  @apply mb-0;
}
.markdown .alert.alert-tip {
  @apply border-green-500;
}
.markdown .alert.alert-tip .icon {
  @apply absolute bg-green-500 text-white rounded-md px-1 py-1;
}
.markdown .alert.alert-note {
  @apply border-gray-600;
}
.markdown .alert.alert-note .icon {
  @apply absolute bg-gray-300 text-gray-600 rounded-md px-1 py-1;
}

/**
 * ------------------------------------------------------
 *  Images
 * ------------------------------------------------------
 */
.markdown figure {
  @apply max-w-full overflow-hidden min-w-min w-fit;
}
.markdown figure.boxed {
  @apply border-4 border-gray-300 rounded-md flex flex-col items-center;
}
.markdown figure.boxed img {
  @apply px-8 py-8;
}
.markdown figure > figcaption {
  @apply bg-gray-200 border-t border-gray-300 px-4 py-6 text-center text-sm font-display;
}

/**
 * ------------------------------------------------------
 *  Unordered list items
 * ------------------------------------------------------
 */
.markdown ul {
  @apply ml-6 list-disc;
}
.markdown ul li {
  @apply mb-3 pl-1;
}
.markdown ul li::marker {
  @apply text-brand;
}
.markdown ul li ul {
  @apply mb-0 mt-3 list-circle;
}

/**
 * ------------------------------------------------------
 *  Ordered list items
 * ------------------------------------------------------
 */
.markdown ol {
  @apply ml-6 list-decimal;
}
.markdown ol li {
  @apply mb-3 pl-2;
}
.markdown ol li::marker {
  @apply text-brand font-medium text-lg;
}
.markdown ol li ol {
  @apply mb-0 mt-3 list-circle;
}

/**
 * ------------------------------------------------------
 *  All other elements
 * ------------------------------------------------------
 */
.markdown a {
  @apply text-brand underline;
}
.markdown strong {
  @apply font-medium;
}

/**
 * ------------------------------------------------------
 *  Captions
 * ------------------------------------------------------
 */
.markdown .caption {
  @apply relative pr-3 pl-10 py-3 font-medium;
}
.markdown .caption > *:last-child {
  @apply mb-0;
}
.markdown .caption::before {
  @apply absolute w-px top-[39px] bottom-0 left-[18.5px] content-[''];
}
.markdown .caption .icon {
  @apply absolute left-0 mt-[4.9px] ml-2;
}
.markdown .caption-error .icon {
  @apply bg-red-500 text-white px-2 py-2 rounded-full;
}
.markdown .caption-error::before {
  @apply bg-red-500;
}
.markdown .caption-success .icon {
  @apply bg-green-500 text-white px-2 py-2 rounded-full;
}
.markdown .caption-success::before {
  @apply bg-green-500;
}

/**
 * ------------------------------------------------------
 *  Section CTA
 * ------------------------------------------------------
 */
.markdown .cta {
  @apply bg-gray-900 text-gray-300 rounded-xl py-3 px-6 text-base font-medium font-display whitespace-nowrap no-underline inline-flex items-center space-x-1 transition-colors hover:bg-gray-900 hover:text-white md:text-left;
}

tailwind.config.js

module.exports = {
  content: ['resources/views/**/*.edge'],
  theme: {
    colors: {
      white: '#fff',
      transparent: 'transparent',
      translucent: 'rgba(255, 255, 255, 0.16)',
      brand: '#5a45ff',
      green: {
        500: '#2dd4bf',
      },
      red: {
        500: '#fb7185',
      },
      gray: {
        200: '#f8f7f6',
        300: '#e7e5e0',
        600: '#72716d',
        800: '#40403d',
        900: '#1a1a19',
      },
    },
    fontFamily: {
      display: ['PolySans'],
      body: ['Calibre'],
      mono: ['Operator Mono'],
    },
    extend: {
      listStyleType: {
        circle: 'circle',
      },
      transitionProperty: {
        left: 'left',
      },
      fontSize: {
        'prose-lg': '1.025rem',
        'prose-xl': '1.125rem',
        'prose-6xl': '3.25rem',
        'prose-4xl': '2.025rem',
        'prose-3xl': '1.6rem',
        'prose-2xl': '1.3rem',
        'prose-codeblocks': '1rem',
        'prose': '1.25rem',
      },
    },
  },
  plugins: [],
}