Skip to content

Instantly share code, notes, and snippets.

@adamwathan
Created August 9, 2019 23:52
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save adamwathan/d257699f16ec7cc1b002b5fb7f81f35c to your computer and use it in GitHub Desktop.
Save adamwathan/d257699f16ec7cc1b002b5fb7f81f35c to your computer and use it in GitHub Desktop.
.markdown {
@apply text-lg text-grey-darkest leading-normal;
& > * + *, & li + li, & li > p + p {
@apply mt-6;
}
& strong {
@apply text-black font-bold;
}
& a {
@apply text-black font-semibold;
}
& strong a {
@apply font-bold;
}
& h2 {
@apply leading-tight text-xl font-bold text-black mb-2 mt-10;
}
& h3 {
@apply leading-tight text-lg font-bold text-black mt-8 -mb-2;
}
& code {
@apply font-mono text-sm inline bg-grey-lighter px-1;
}
& pre code {
@apply block bg-black p-4 rounded;
}
& blockquote {
@apply border-l-4 border-grey-light pl-4 italic;
}
& ul, & ol {
@apply pl-5;
@screen sm {
@apply pl-10;
}
}
}
@dhymik
Copy link

dhymik commented Feb 19, 2020

Adam,
& seems to be sass ampersand, but file name says .css. Can you disclose what you are doing here with &?
All the best, Mikael

@adamwathan
Copy link
Author

I usually use this PostCSS plugin for nesting support:

https://github.com/jonathantneal/postcss-nesting#readme

@dhymik
Copy link

dhymik commented Feb 23, 2020

Thank you, Adam, cool. Looking forward to TW UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment