Styling Long-form Content with Tailwind’s CDN: a Quick “Prose” Guide

Styling Long-form Content with Tailwind’s CDN: a Quick “Prose” Guide

If you’re pulling Tailwind in with a single <script> tag, you can still unlock the Typography plugin (the source of the handy prose class) — no build step required.

1. Load Tailwind + Typography in one line

<!-- Tailwind Play-CDN + Typography plugin -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<!-- Optional: Alpine.js or any other script -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

2. (Optional) Inline-tune the design

<script>
tailwind.config = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            color: theme('colors.slate.800'),
            h3: { fontWeight: '600', color: theme('colors.slate.900') },
            strong: { color: theme('colors.slate.900') },
          },
        },
      }),
    },
  },
};
</script>

3. Wrap your markup with prose

<section class="bg-gray-50 py-8">
  <article class="prose lg:prose-lg max-w-3xl mx-auto bg-white shadow rounded-xl p-6">
    <h3>Heylen Real Estate: Your Partner in Successful Property Deals</h3>
    <p>Navigating a dynamic housing market can be challenging, but …</p>
    <!-- more content -->
  </article>
</section>

Why this matters

Benefit	Detail
Zero build step	Perfect for a landing page, CMS snippet, or widget where you can’t run Node/Bundlers.
Great defaults	Readable line-height, balanced white-space, and responsive scaling (lg:prose-lg).
Easy customisation	Override colors, fonts, or add dark-mode variants via inline tailwind.config.
Small footprint	Play-CDN generates just the classes you reference, keeping the payload lean.

When to consider a full build

The CDN approach shines for prototypes and small-to-medium sites. For production-scale apps you’ll usually switch to a local build:

• Purging unused CSS becomes deterministic across dozens of files.
• Add custom or third-party plugins not available via the plugins= param.
• Bundlers enable tree-shaking, minification, and versioning.

But when you just need rich, well-spaced text quickly, dropping in the Play-CDN with plugins=typography is hard to beat.

Happy writing — and enjoy those beautifully rendered paragraphs!

Before

 

 

 

After