How to add Tailwind prose to Laravel Breeze

Introduction

Need to use the Tailwind Prose styles in your Laravel Breeze app? No problem! Here's how to do it.

Step 1: Install the Tailwind Typography plugin

First, install the Tailwind Typography plugin using NPM:

npm install -D @tailwindcss/typography

Step 2: Import the plugin in your tailwind.config.js file

Next, open the tailwind.config.js file in the root of your Laravel Breeze project.

At the top of the file are some import statements. Add the following to the bottom of the list:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

// Add this line
import typography from '@tailwindcss/typography';

Step 3: Add the plugin to the plugins array

Further down in the file, you'll find a plugins array. Add the typography plugin to the list:

// Replace this
plugins: [forms],

// With this
plugins: [forms, typography],

Step 4: Add the prose class to your Blade/HTML

Now you can use the prose class in your Blade/HTML to apply the Tailwind Typography styles:

<div class="prose dark:prose-invert">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Step 5: Compile your assets

Finally, compile your assets to see the changes:

npm run build

You can of course also use the Vite live preview:

npm run dev

Conclusion

That's it! You've successfully added the Tailwind Typography plugin to your Laravel Breeze project. Enjoy using the prose class to style your text!

Comments

[david duymelinck]

How is this a laravel breeze tutorial? The only thing is step 4, and even there you write blade/html.

[CodeWithCaen]

It uses the Laravel Breeze Tailwind configuration file. I often add this when I use Breeze, so I created this post to note the minimal steps needed to set it up. It can of course be used in other contexts too!