Skip to content

Instantly share code, notes, and snippets.

@thetutlage
Created February 14, 2022 01:39
Show Gist options
  • Save thetutlage/092944a9d2a55e6614cececd3efad3ba to your computer and use it in GitHub Desktop.
Save thetutlage/092944a9d2a55e6614cececd3efad3ba to your computer and use it in GitHub Desktop.
TailwindCSS styles for styling markdown content for AdonisJS
.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;
}
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: [],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment