Content Paths Configuration in Tailwind Config

Content Paths Configuration

The content array tells Tailwind which files to scan for class names. This is critical for production builds -- any class not found in scanned files will be purged.

Basic Configuration

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  ],
};

Common Patterns by Framework

Next.js (App Router):

content: [
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/**/*.{js,ts,jsx,tsx,mdx}",
]

Vite + React:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
]

Laravel + Blade:

content: [
  "./resources/**/*.blade.php",
  "./resources/**/*.{js,vue}",
]

Including External Packages

If a package uses Tailwind classes internally:

content: [
  "./src/**/*.{js,ts,jsx,tsx}",
  "./node_modules/@acme/ui/**/*.{js,ts,jsx,tsx}",
]

Safelist: Keep Specific Classes

For dynamically generated class names that Tailwind's scanner cannot detect:

safelist: [
  "bg-red-500",
  "bg-green-500",
  "bg-blue-500",
  { pattern: /^bg-(red|green|blue)-(100|500|900)$/ },
]

Debugging Missing Styles

If a class is not being applied in production:

1. Verify the file path is covered by content
2. Check if the class is dynamically constructed (split across strings)
3. Add the class to safelist as a last resort