Tailwind CSS improperly applied to `<Content />` components

[azure tangle]

Tailwind properly applies styles to all of the components in my Astro application, except the content inside content collections, loaded and rendered by rendering the <Content /> component on content collections loaded from .md files.

Do I need to come up with a way to load the content file explicitly using a Vite import() call, or is there a way to make this work? I'm using code copied from the Astroship template, but with updated versions of all packages:

• Astro 2.7.2
• <@&1055234544183287879>/tailwind 4.0.0
• Tailwindcss 3.3.2

Tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

[azure tangle]

I also tried rolling back to the same versions found in the Astroship template, with the same result.

The repo is here: https://github.com/tylergannon/basic-astro-template

See the blog posts. They look great except that the <Content /> component has all styles completely stripped.

[tough stirrup]

Your [post].astro doesn't wrap its content in your <Layout> component like the rest of your pages do.

[azure tangle]

I should have been more clear. The problem is visible at /blog/*. Deleting [post].astro doesn't alter the issue as manifested in /blog/[slug].astro.

I'm going to set up a minimal repro without anything else in it, see if I can isolate the issue.

[tough stirrup]

Sorry @azure tangle , I misunderstood your question.

Your blog template seems to be leveraging prose, which is part of the @tailwindcss/typography plugin.

However, you don't seem to have that dependency installed and configured in your project.

The original template does have @tailwindcss/typography installed and configured in their tailwind.config.cjs file:
https://github.com/surjithctly/astroship/blob/main/tailwind.config.cjs

You can follow the installation instructions from the Tailwind documentation:
https://tailwindcss.com/docs/typography-plugin

[azure tangle]

Ahh okay so if I can clarify ...

Without the typography plugin, all styles will be stripped from headings, ul's, paragraphs, etc?

If that's the case then all is explained. 🙂

[tough stirrup]

Yes, Tailwind applies a reset on all elements, so by default you don't have any styles.
You usually apply styling using Tailwind's classes, but for dynamic content, that's not always possible.

This is why @tailwindcss/typography exists. Any content within a .prose container will have some default styles applied.

[azure tangle]

Ahhh and there it is. I was copying code from another repo and didn't notice myself copying a prose class over.

I'll tinker with that and see if I can learn better.

This is really helpful, @tough stirrup thank you.

[zinc flare]

@tough stirrup Could you explain why we can't use common tailwind classes on <Content /> ? If I understand well, the markdown is converted to html on the fly. I could understand that CSS rules are not applied if so. But when we build a static web page, everything is flattened, CSS rules could have been applied. If you can help to understand better this part, it would be nice. Thanks.

[tough stirrup]

You can apply classes no problem.

However, Markdown content is rendered to HTML without any classes on the elements. Tailwind has a reset that removes all browser default styling on elements, so the HTML markup rendered from Markdown ends up being unstyled.

The typography plugin provides sane defaults for HTML elements if they are under a .prose class.

[zinc flare]

Hi @tough stirrup . Thanks. I understand, but i don't get why other tailwind classes above <Content /> don't work ? <section class="text-3xl text-color-600 uppercase"><Content /></section>