#Astro + Tailwind CSS | Styling MD Blog Posts

1 messages · Page 1 of 1 (latest)

heady gorge
#

Adding Tailwind CSS nukes the default styling for MD blog posts. How do I edit the layout to get styles applied to, say, p tags.

Adding regular styles to p in the regular style tag seems to do nothing, despite the fact that it clearly works on .title just fine.

I tried adding a second style element with lang="postcss" to the head, and then applying styles to p={@apply my-4} but nothing changes. Does anyone have any ideas on this?

#

I know Amy was getting into this but I can never remember her LBT handle, nor can I search her by name. 😟

brazen elk
#

what does your current css look like?

#

What are your links/files like?

heady gorge
#

Oh. Weird. To make it even stranger, I can add a single style tag to a regular .astro file like my index.astro and I don't even need to add lang="postcss".... and the Tailwind styles apply using the @apply driective.

<style>
  p {
    @apply mb-4;
  }
</style>

🤷‍♂️

rapid oar
wary sentinel
#

@rapid oar thanks for the tag … my handle has become a problem on Twitter too 😭

#

@heady gorge did you get everything working?

heady gorge
wary sentinel
#

I know with Svelte, it will only render classes that are in the current file. When you want to style .md files then you have to add your classes to the global CSS file or use:
:global(.something) { ... }

heady gorge
wary sentinel
#

Got it

heady gorge
wary sentinel
#

ehh, I'm not sure exactly. I've dabbled in astro but haven't built a full-fledged app in astro yet.

#

I have your project up and running on my machine.

#

Is there a specific example I can look at?

heady gorge
#

The blog posts, in particular.

#

Sorry for the sporadic replies. Just getting ready for the day. I'll all here now. 😉

#

@wary sentinel Essentially I'd like to style the headings, paragraphs, and a few other things. When I add Tailwind to the project, it nukes a few of the base styles. Luckily, it keeps the styling around the code blocks, which is nice. But I just want to create some extra space on the page. I'm also not sure what I'll need to do when I start adding things like Tables and Images.

#

I'm not terribly familiar with how PostCSS works. It's always "just worked" when I use it with Vue or Svelte. So I think there might be something I'm not understanding about the loading process. I feel like I may need to somehow wait until the rest of the page or component is loaded (rendered from markdown to html) and THEN apply the styles. But I'm really not sure how to instruct Tailwind or Astro to do that.

#

I'm just guessing & testing at this point, but one thing I found interesting is that in /layouts/BlogPost.astro, I tried replacing all of the original style tag contents with @apply directives and tailwind styles. I tried this because inside of a page you can apparently just use a regular style tag without a lang="postcss" attribute and it works. However, using the @apply directive inside of a layout appears to break. Even with the lang attribute, it's not happy about it.

#

pages/index.astro

<!DOCTYPE html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    <style>
      p {
        @apply mb-4;
      }
    </style>
  </head>
  <body>
  ...
#

☝ That works.

#

But then in layouts/BlogPost.astro

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
     <style lang="postcss" >
      .title {
        @apply text-2xl;
      }
      hr {
        @apply border-t-1 border-gray-300 my-4;
      }
      p {
        @apply py-4;
      }
      </style>
    </head>
  <body>
  ...
#

☝ That doesn't. 🤷‍♂️

#

With or without the lang="postcss" attribute.

#

I have to run but I'll check back later. Amy, you're a rockstar. Thank you for your help. 🤗♥

wary sentinel
#

Hey! Just ran out and grabbed lunch ... Taking a look....

#

it looks like Astro has first-class Tailwind support. So, when you add tailwind to your project, it adds Tailwind to your astro config ... which you have 🎉

#

I didn't mess with your config. But, I did try adding classes in a few places to see what happens.

#

On blog.astro this works:

<time datetime={post.frontmatter.pubDate} class="text-red-500">
  {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })}
</time>```
#

and turns your time red.

#

I even tried to swapping out some of the classes in the style block for Tailwind classes. So, this also works (same file)

ul li {
    @apply flex;
}```
#

Within layouts/BlogPost.astro changes that I made within the style block to the p tag didn't seem to take an effect, but I'm pretty sure it's for the reason something like that doesn't work within SvelteKit. There's not a p tag in the file to apply the styles too

#

Because this does work:

:global(p) {
  @apply pb-4 text-red-500;
}```
#

You don't have to use lang="postcsss" because Astro does have first class Tailwind support.