Configuring Content Paths, Safelist, and Prefix

The content array in tailwind.config.js is the instruction set for Tailwind's JIT engine. It accepts glob patterns that tell the scanner which files to parse for class names. Getting this right is critical — missing a file path causes its Tailwind classes to be purged from the output. For monorepos or component libraries, you may need to add paths to node_modules packages that export JSX with Tailwind classes. The safelist option explicitly preserves classes even if they do not appear in your template files. This is essential for dynamically constructed class names — if you build class strings from database values or user input (e.g., `bg-${color}-500`), Tailwind cannot detect those at build time. You can safelist individual class names or use pattern with a regex: { pattern: /bg-(red|green|blue)-(400|500|600)/ } generates all matching combinations. The prefix option adds a namespace to all Tailwind utilities, preventing conflicts when adding Tailwind to an existing project that has its own CSS. Setting prefix: 'tw-' means all Tailwind classes become tw-flex, tw-bg-blue-500, tw-text-lg. The separator option (default: colon) changes how variants are delimited — some templating engines that treat colons specially may need separator: '_' instead.

Example

// tailwind.config.js — advanced content, safelist, and prefix config
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Local templates
    './resources/views/**/*.blade.php',
    './resources/js/**/*.{js,jsx,ts,tsx,vue}',

    // Include a component library from node_modules
    './node_modules/@my-org/ui-kit/dist/**/*.js',

    // Inline content object for programmatic class names
    {
      raw: String.raw`
        <div class="col-span-1 col-span-2 col-span-3 col-span-4 col-span-6 col-span-12">
        </div>
      `,
    },
  ],

  safelist: [
    // Individual classes always included
    'sr-only',
    'not-sr-only',

    // Pattern: preserve all color variants for dynamic status badges
    {
      pattern: /bg-(red|yellow|green|blue|purple)-(100|200|500|600)/,
      variants: ['hover', 'dark'],
    },

    // Preserve grid column spans used from a CMS config
    {
      pattern: /col-span-(1|2|3|4|5|6|7|8|9|10|11|12)/,
      variants: ['sm', 'md', 'lg'],
    },
  ],

  // Optional: prefix to avoid conflicts with legacy CSS
  // prefix: 'tw-',

  // Optional: change variant separator (useful for Blade / Twig)
  // separator: '_',

  theme: { extend: {} },
  plugins: [],
};

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned