Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// 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: [],
};