tailwind2-10  Exercise 3: One check Command, Seeded Errors, and the dist Folder Trap
=====================================================================================

Setup: in the kit folder npm install prettier prettier-plugin-tailwindcss eslint eslint-plugin-better-tailwindcss @typescript-eslint/parser

--- .prettierrc ---
{ "plugins": ["prettier-plugin-tailwindcss"], "tailwindStylesheet": "./src/ui/tokens.css", "tailwindFunctions": ["cn", "cva"], "printWidth": 140, "singleQuote": true }

--- eslint.config.js ---
import btw from 'eslint-plugin-better-tailwindcss';
import parser from '@typescript-eslint/parser';
export default [
  {
    files: ['src/**/*.{ts,tsx}'],
    languageOptions: { parser, parserOptions: { ecmaFeatures: { jsx: true } } },
    plugins: { 'better-tailwindcss': btw },
    settings: { 'better-tailwindcss': { entryPoint: 'src/ui/tokens.css' } },
    rules: { ...btw.configs.recommended.rules, 'better-tailwindcss/enforce-consistent-line-wrapping': 'off' },
  },
];

--- package.json scripts ---
"check": "tsc --noEmit && prettier --check src && eslint src"

npm run check    ->  exit 0 on the clean project ("All matched files use Prettier code style!")

Before formatting, the first run reported: prettier 5 files; eslint 6 warnings, including
  "-translate-x-1/2, -translate-y-1/2" can be simplified to "-translate-1/2"
  "focus-visible:outline-offset-[-2px]" can be simplified to "focus-visible:-outline-offset-2"
  Incorrect class order (starting:opacity-0 should follow motion-reduce:transition-none)
Fixed with  npx prettier --write src  and  npx eslint --fix src ; the browser tests gave the same results afterwards.

Seeded errors in card.tsx (bg-raised -> bg-raisd, and p-3 added next to p-5):
  npm run check  ->  exit 1 at the Prettier step (the typo also unsorted the list), so ESLint never ran
  after  npx prettier --write src/ui/card.tsx  then  npx eslint src :
    5:30  error  Unknown class detected: bg-raisd                                                better-tailwindcss/no-unknown-classes
    5:72  error  Conflicting class detected: "p-3" and "p-5" apply the same CSS properties: "padding"   better-tailwindcss/no-conflicting-classes
    5:76  error  Conflicting class detected: "p-5" and "p-3" apply the same CSS properties: "padding"
  the file was then restored and  npm run check  gave exit 0 again.

The dist folder trap (the kit project, vite build run twice in a row):
  no .gitignore, dist/ absent at start:   build 1 -> dist/assets/index-*.css 14.06 kB ;   build 2 -> 28.82 kB   (the first build's 308 kB JavaScript bundle is scanned)
  .gitignore containing "node_modules" and "dist":   build 1 -> 14.06 kB ;   build 2 -> 14.06 kB ;   build 3 -> 14.06 kB
  (my first guess, that the test scripts in the project folder were being scanned, was wrong: moving them out changed nothing; deleting dist/ and building twice found the cause)

WHY THIS WORKS AS AN ANSWER
---------------------------
The check command runs the three kinds of tool the chapter relies on: types, formatting and class linting. The seeded errors prove the linter is wired to the project's own stylesheet (it knows bg-raised is real and bg-raisd is not) and
that conflicts are caught even inside a cn() call. The note about && matters: a chain stops at its first failure, so a failing formatter hides the linter's report; run each tool alone once, or use a runner that reports all. The dist experiment
shows an output folder is just another folder to the scanner unless it is ignored: the stylesheet doubled on the second build with no change to any source file. Compare the size of two consecutive builds as part of shipping.