Tailwind scans your source files for class names, generates only the CSS you use, and orders utilities so variants (responsive, hover) compose predictably.
Build pipeline (production)
- Content paths — tell Tailwind which files to scan (
./src/**/*.{jsx,tsx,html}) - JIT engine — generates rules on demand; arbitrary values like
w-[137px]work at build time - Purge / content — unused utilities never ship, keeping bundles small
The playground uses the CDN build for convenience. Production apps install tailwindcss via npm and integrate with PostCSS or Vite.
Important interview questions and answers
- Q: Why is Tailwind’s bundle small if it has thousands of classes?
A: Only classes found in your content are emitted; purge/content configuration strips the rest. - Q: What is JIT?
A: Just-In-Time generation: utilities are created when detected in source, enabling arbitrary values and faster builds vs. pre-generating every permutation. - Q: CDN vs npm?
A: CDN is fine for demos; npm + build gives purge, plugins, custom theme, and no runtime compiler in production.
Self-check
- What step prevents shipping unused utility CSS?
- Why is the CDN approach different from a Vite + Tailwind setup?
Interview prep
- What does the build step actually generate?
A CSS file containing only the utility rules your
contentpaths reference—JIT scans class names at compile time.