Quick Fix for Tailwind CSS Issues in Next.js 13 with Shadcn UI

Adding Shadcn UI breaks Tailwind CSS in your Next.js 13 project ? Let's tackle the common issues swiftly.

The Problem: Tailwind Styles Not Applying

Post Shadcn UI installation, Tailwind styling might disappear. Here’s how to fix it:

Fix 1: Correct Your Content Paths

If your project uses a src folder, adjust your tailwind.config.js:

Adjust Content Paths:

content: [
  './src/app/**/*.{ts,tsx}',
  './src/components/**/*.{ts,tsx}',
]

This ensures Tailwind looks in the correct directories.

Fix 2: Include Shadcn Components in Tailwind

Shadcn components might not find Tailwind styles. Here's the fix:

Update tailwind.config.js:

content: [
  // ... other paths
  './@/**/*.{ts,tsx}',
]

This inclusion makes sure Shadcn components are styled by Tailwind.

Summary

Check your project structure and tailwind.config.js paths for a smooth integration of Tailwind CSS with Shadcn UI in Next.js 13.