Using Tailwind with External Content

Tailwind is incredibly popular, and for good reason. It’s an amazing utility-class CSS solution with a ton of flexibility making CSS much less painful to write. However, the second you need to load external content, suddenly styles are out of your control. This guides takes you through a few different ways to style your external content.

@tailwindcss/typography

The easiest way to style your content in Tailwind, is using the @tailwindcss/typography plugin. This plugin adds a set of opinionated typographic defaults, made available via the prose class utilities.

Install the package, and add the plugin to your Tailwind config.

npm i @tailwindcss/typography

If you’re using a CommonJS config, you can require the plugin inline.

module.exports = {
  ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

If you’re using an ESM config, you can import the plugin.

import typography from '@tailwindcss/typography'

const config = {
  ...
  plugins: [
    typography()
  ],
}

export default config

Use the prose class in the element wrapping your content.

---
import Content from '../content/example.md'
---

<Layout>
  <main class="prose">
    <Content/>
  </main>
</Layout>

Disabling Base Styles

Tailwind ships with Preflight, an “opinionated set of base styles”, by default. These styles act as a reset, and remove many of the default styles from elements, like font-size, margin, etc. Disabling Preflight allows you to use the browser defaults.

In Astro

Disable applyBaseStyles in the Astro config.

import { defineConfig } from 'astro/config'

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false
    })
  ]
})

Create a custom base.css file.

@tailwind components;
@tailwind utilities;

Import this file in your main layout.

---
import 'base.css'
---

...

Other Frameworks

In most other frameworks, you define a base.css or globals.css file. Remove the @tailwind base directive from your CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

Custom Base Styles

If you like the idea of a typography plugin, but want a unique style, you can create your own plugin to suit your needs. Use addBase to add custom base styles to HTML elements.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
        'h3': { fontSize: theme('fontSize.lg') },
      })
    })
  ]
}