import { defineConfig, presetTypography, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(), // Required!
    presetTypography(),
  ],
})

<article class="prose">
  <h1>My Article</h1>
  <p>This is styled with typographic defaults...</p>
</article>

<article class="prose prose-sm">Small</article>
<article class="prose prose-base">Base (default)</article>
<article class="prose prose-lg">Large</article>
<article class="prose prose-xl">Extra large</article>
<article class="prose prose-2xl">2X large</article>

<article class="prose prose-sm md:prose-base lg:prose-lg">
  Responsive typography
</article>

<article class="prose prose-gray">Gray (default)</article>
<article class="prose prose-slate">Slate</article>
<article class="prose prose-blue">Blue</article>

<article class="prose dark:prose-invert">
  Dark mode typography
</article>

<article class="prose">
  <p>Styled</p>
  <div class="not-prose">
    <p>NOT styled</p>
  </div>
</article>

presetTypography({
  selectorName: 'prose', // Custom selector
  cssVarPrefix: '--un-prose', // CSS variable prefix
  important: false, // Make !important
  cssExtend: {
    'code': { color: '#8b5cf6' },
    'a:hover': { color: '#f43f5e' },
  },
})