Article text recommend approach with tailwind

[ghost]

As someone new to tailwind I wanted to style a block of article text formatted for easy reading (as in a typical blog). This would involve adding some margins and leading to the default styles.

If I was writing SCSS by hand, I'd create a class with nested styles and apply the class to a div wrapping the article text.

From the screenshot, I think this seems very un-tailwind-like and I'm not sure what the best practice or recommended approach would be.

Would love to get your insight.

[adamwathan]

Hey! My usual approach is pretty similar to what you have there. Here is a markdown class that I use to wrap up markdown content in my personal blog for example:

.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;
    }
  }
}

(I use postcss-nesting to add support for nesting)

[ghost]

great, thank you for the feedback

[ernsheong]

A 2-cents feedback is that I found this pretty cumbersome given that I just want to launch a blog post quick and dirty and easy and now I've run into Tailwind resetting all my p,h1,h2,h3, etc.

[ghost]

@ernsheong I understand. Working with tailwind was a big change in mindset for me at first.

I was very accustomed to starting with a base framework like Foundation and then layering my own styles on top of it.

After using tailwind for a bit, I've found it the right tool for many jobs, but not every. In particular sites that require meticulous design control and don't have a CMS to contend with are good candidates for tailwind IMO.

[Jorgee97]

@adamwathan can you please provide some insight on how to do what you mention on your response, as I'm really new to TailwindCSS and frontend frameworks in general, I'm lookint to add this https://github.com/tailwindcss/docs/blob/master/source/_assets/less/markdown.less to my build in order to support markdown on my blog. thanks in advance.

[philippbosch]

@Jorgee97 the basic idea is to wrap your HTML which was rendered from Markdown in something like <div class="markdown">…</div>. Since you cannot add Tailwind classes to the HTML elements within that div as you usually would, you would add a section to your main CSS file (the one that contains the @tailwind directives) that targets child elements of an element with the class .markdown. Within each style declaration (e.g. .markdown h1 { … } you can use the @apply directive to pull in the styles from Tailwind classes (e.g. @apply text-blue-600 font-bold;).

I would not recommend to „blindly“ copy the file you referenced into your project. There‘s a lot of stuff in there that you don‘t need.

[iandinwoodie]

@Jorgee97 I recently created a repository for generating GitHub Flavored Markdown styles with Tailwind components (repository: https://github.com/iandinwoodie/github-markdown-tailwindcss). I think you will find the stylesheet in the repository more straightforward than the LESS file you were looking to copy in.

[Jorgee97]

Hey @philippbosch and @iandinwoodie Thank you guys so much for your help, I very appreciated.

I just added your styles to my tailwind.css and it's working fine, thanks for the repository, nice to have it.

[abishekrsrikaanth]

how do I go about adding this when using webpack based tailwind installation?