Shadcn UI installation breaks Tailwind CSS – Next.js

module.exports = {
   darkMode: ["class"],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './@/**/*.{ts,tsx}', // <- HERE
     ],

The Problem:

After installing Shadcn UI, Tailwind CSS styling no longer works in a NextJS 13 app. The issue is related to globals.css and tailwind.config.js, but the specific cause is unknown.

The Solutions:

Solution 1: Add ‘@’ folder to Content

In your tailwind.config.js file, add the ‘@’ folder to the content array. This ensures that Tailwind knows where to look for CSS classes to extract and include in your CSS bundle.

module.exports = {
   darkMode: ["class"],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './@/**/*.{ts,tsx}', // <- HERE
     ],

Solution 2: Adjust tailwind.config.js content paths

The issue arises from incorrect directory mapping in the tailwind.config.js file. The content paths should point to the correct directories containing the application code. To resolve this, modify the content array as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './src/app/**/*.{ts,tsx}', './src/components/**/*.{ts,tsx}',
	],
};

By updating the paths to point to the correct directories within the src folder, Tailwind CSS will be able to correctly process and apply the styles to your application.

Solution 3: Ensure Tailwind Plugins Array Includes Necessary Plugins

The Shadcn UI installation can remove essential Tailwind plugins, such as @tailwindcss/forms. To resolve this, manually add the missing plugins back to the plugins array in tailwind.config.js. For example, to include the forms plugin:

module.exports = {
  ...
  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
};

Solution 4: Overwrite and Merge Tailwind Config Manually

The installation process for Shadcn UI involves modifying the `tailwind.config.js` file. However, it’s crucial to note that this process may overwrite existing Tailwind CSS settings. To prevent this, it’s advisable to back up your original `tailwind.config.js` file before running the installation command (`npx shadcn-ui init`). After the installation, manually merge the Shadcn UI-specific settings into your original `tailwind.config.js` file to ensure that your desired Tailwind CSS configurations are preserved.

Solution 5: Tailwind Dark Mode Switch from “class” to “media”

To resolve the issue where Shadcn UI installation breaks Tailwind CSS, try changing the darkMode property in your tailwind.config.js file from class to media.

Before:

module.exports = {
  darkMode: "class",
  ...
};

After:

module.exports = {
  darkMode: "media",
  ...
};

This change allows Tailwind to support toggling dark mode manually instead of relying on the operating system preference.

Video Explanation:

The following video, titled "shadcn/ui — Theming Wrapped in a Tailwind Plugin/Preset - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

In this video, I wrap the theming strategy from the shadcn/ui components within a Tailwind Plugin and Preset, to make it reusable across ...