Drop Tailwind CLI from the build

Tailwind was wired into the build but the project didn't actually use it:
no @tailwind/@theme/@apply directives in source CSS, no utility classes
in any HTML or JS, no tailwindcss dependency in package.json, and no
HTML page linked to the compiled styles.css output.

Bun's HTML loader already handles main.css's @import chain transparently
in both `bun run dev` and `bun run build`. Removing the Tailwind step:

- Deletes buildTailwindCSS() from scripts/build.js (and the now-unused
  execSync import)
- Removes public/css/styles.css (dead compiled output that nothing read)
- Updates CLAUDE.md to drop the "must rebuild Tailwind after CSS edits"
  instruction

Verified: `bun run build` produces the same 104 KB CSS chunk linked from
index.html via Bun's HTML loader. No more rebuild step after CSS edits.
This commit is contained in:
Paul Bakaus
2026-04-07 19:52:27 -07:00
parent 30d1e06a75
commit 038d281247
3 changed files with 10 additions and 5776 deletions
+8 -8
View File
@@ -1,17 +1,17 @@
# Project Instructions for Claude
## CSS Build Process
## CSS
**IMPORTANT**: After modifying any CSS files in `public/css/` (especially `workflow.css` or `main.css`), you MUST rebuild the Tailwind CSS:
```bash
bunx @tailwindcss/cli -i public/css/main.css -o public/css/styles.css
```
Plain hand-written CSS, no Tailwind, no build step. Bun's HTML loader resolves
`<link rel="stylesheet">` and inlines `@import` chains automatically for both
`bun run dev` and `bun run build`.
The CSS architecture:
- `public/css/main.css` - Main entry point, imports Tailwind and all other CSS files
- `public/css/main.css` - Main entry point, imports the partials and defines tokens/reset
- `public/css/workflow.css` - Commands section, glass terminal, case studies styles
- `public/css/styles.css` - **Compiled output** (do not edit directly)
- `public/css/gallery.css`, `skill-demos.css`, `problem-section.css` - section partials
Edit any of these directly and reload — no rebuild needed.
## Development Server
File diff suppressed because it is too large Load Diff
+2 -27
View File
@@ -20,7 +20,6 @@ import { fileURLToPath } from 'url';
import { readSourceFiles, readPatterns } from './lib/utils.js';
import { createTransformer, PROVIDERS } from './lib/transformers/index.js';
import { createAllZips } from './lib/zip.js';
import { execSync } from 'child_process';
/**
* Generate authoritative counts from source data and write to public/js/generated/counts.js.
@@ -181,30 +180,9 @@ const __dirname = path.dirname(__filename);
const ROOT_DIR = path.resolve(__dirname, '..');
const DIST_DIR = path.join(ROOT_DIR, 'dist');
/**
* Build Tailwind CSS using the CLI
* Tailwind v4 uses @theme directive which Bun's CSS bundler doesn't understand
*/
function buildTailwindCSS() {
const inputFile = path.join(ROOT_DIR, 'public', 'css', 'main.css');
const outputFile = path.join(ROOT_DIR, 'public', 'css', 'styles.css');
console.log('🎨 Building Tailwind CSS...');
try {
execSync(`bunx @tailwindcss/cli -i "${inputFile}" -o "${outputFile}" --minify`, {
cwd: ROOT_DIR,
stdio: 'inherit'
});
console.log('✓ Tailwind CSS compiled\n');
} catch (error) {
console.error('Failed to build Tailwind CSS:', error.message);
process.exit(1);
}
}
/**
* Build static site using Bun's HTML bundler
* CSS is pre-compiled by Tailwind CLI, then bundled with HTML/JS
* Bun's HTML loader resolves <link rel="stylesheet"> and inlines CSS @imports.
*/
async function buildStaticSite() {
const entrypoints = [
@@ -441,10 +419,7 @@ function generateCFConfig(buildDir) {
async function build() {
console.log('🔨 Building cross-provider design skills...\n');
// Build CSS with Tailwind CLI (handles @theme directive)
buildTailwindCSS();
// Bundle HTML, JS, and compiled CSS with Bun
// Bundle HTML, JS, and CSS with Bun
await buildStaticSite();
// Copy root-level static assets that need stable (unhashed) URLs