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:

1npm 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:

1import defaultTheme from 'tailwindcss/defaultTheme';
2import forms from '@tailwindcss/forms';
3 
4// Add this line
5import 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:

1// Replace this
2plugins: [forms],
3 
4// With this
5plugins: [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:

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

Step 5: Compile your assets

Finally, compile your assets to see the changes:

1npm run build

You can of course also use the Vite live preview:

1npm 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!

Syntax highlighting by Torchlight.dev