DEV Community


Posted on • Originally published at

How to add Tailwind prose to Laravel Breeze


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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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],
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Step 5: Compile your assets

Finally, compile your assets to see the changes:

npm run build
Enter fullscreen mode Exit fullscreen mode

You can of course also use the Vite live preview:

npm run dev
Enter fullscreen mode Exit fullscreen mode


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!

Top comments (2)

xwero profile image
david duymelinck

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

codewithcaen profile image

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!