/** * Tailwind v3 config for building a PURGED CSS bundle for Easy Invoice. * * Why this exists: * - The shipped tailwind.min.css is 2.8 MB (full CDN dump, no purge). * - Only ~572 utility classes are actually used across all templates + * addons + admin chrome. A purged build is ~40-90 KB. * - That's a 30-90× reduction on every admin page load, which is the * single largest performance win in the perf audit. * * Behavior is opt-in. The build outputs `tailwind.purged.min.css` next to * the existing `tailwind.min.css` — the admin enqueue keeps using the * original until a future PR adds the switch. Verify visually on a few * representative pages (Dashboard, Invoice Builder, Addons grid, every * addon settings page, Settings, Reports) before enabling the swap. * * Build steps (requires Node 18+ and npm): * * cd tools/tailwind-build * npm install * npm run build * * Output: ../../assets/lib/tailwind/tailwind.purged.min.css */ module.exports = { // The `content` array tells Tailwind which files to scan for class names. // Anything matched anywhere in these files (PHP, JS, HTML, any string // literal containing what looks like a class name) gets kept. // // Paths are relative to this config file (tools/tailwind-build/). // The pro plugin lives in a sibling dir, so we use ../../../ to reach it. content: [ '../../templates/**/*.php', '../../includes/**/*.php', '../../assets/js/**/*.js', '../../../easy-invoice-pro/includes/**/*.php', '../../../easy-invoice-pro/addons/**/*.php', '../../../easy-invoice-pro/assets/js/**/*.js', ], // Safelist: classes we KNOW are used but Tailwind's scanner might miss // (dynamically composed in JS, built via string concat, etc.). The // ./safelist.txt file is generated by scanning every class= attribute // across the codebase — read it at build time. safelist: (function () { const fs = require('fs'); const path = require('path'); const file = path.join(__dirname, 'safelist.txt'); if (!fs.existsSync(file)) return []; return fs.readFileSync(file, 'utf-8') .split(/\r?\n/) .map(s => s.trim()) .filter(Boolean); })(), theme: { extend: {}, }, // No plugins by default — the codebase uses only stock utilities. // Add @tailwindcss/forms, @tailwindcss/typography etc. here if templates // start using their classes. plugins: [], };