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.
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.
If you’re using a CommonJS config, you can
require the plugin inline.
If you’re using an ESM config, you can
import the plugin.
prose class in the element wrapping your content.
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.
applyBaseStyles in the Astro config.
Create a custom
Import this file in your main layout.
In most other frameworks, you define a
globals.css file. Remove the
@tailwind base directive from your CSS.
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.