Tailwind CSS Cheat Sheet

Tailwind CSS cheat sheet with real commands and snippets for setup, core workflows, debugging, and production-safe automation patterns. If you are working across tools, pair this with the CSS Cheat Sheet and Next.js Cheat Sheet.

Setup and Installation

Goal: Create a fresh project

# Scaffold project using official starter
npm init -y

# Install dependencies after scaffold completes
npm install -D tailwindcss @tailwindcss/cli

Goal: Verify local toolchain versions

# Print Node.js runtime version
node --version

# Print npm version for lockfile consistency
npm --version

# Inspect package scripts in project
cat package.json | rg "scripts" -n

Core Development Workflow

Goal: Run local development server

# Start framework dev server with hot reload
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

# Check local endpoint health
curl -I http://localhost:3000 || curl -I http://localhost:5173 || true

Goal: Build and preview production output

# Build optimized production assets
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

# Run production preview server
npx http-server .

Goal: Implement a core feature snippet

/* Import Tailwind layers in your source stylesheet */
@import "tailwindcss";

/* Optional component class */
.btn-primary {
  @apply inline-flex items-center rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700;
}

Testing and Quality

Goal: Run tests and static checks

# Execute project tests
npx @tailwindcss/cli --help

# Run type checking when available
npm run check || npx tsc --noEmit || true

# Run linting for fast feedback
npm run lint || true

Deployment and Operations

Goal: Prepare deployment artifacts

# Create production build before deployment
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

# Validate environment variables are set
node -e "console.log('NODE_ENV=', process.env.NODE_ENV || 'unset')"

# Smoke-test production route after deploy
curl -I https://devcheatsheets.com

Debugging and Troubleshooting

Goal: Inspect build and runtime failures

# Reinstall dependencies from lockfile
rm -rf node_modules && npm ci

# Re-run build with clean cache
npm run build

# Search source for suspect route/config patterns
rg "route|middleware|config" src app -n

Common Gotchas

• Run Tailwind CSS builds locally before shipping to CI/CD environments.
• Keep environment secrets outside the repository and load them per environment.
• Avoid stale dependency locks by using npm ci in automation.
• Validate route and middleware behavior with explicit smoke tests.
• Keep framework and plugin versions aligned to avoid build regressions.

Related Sheets

• CSS Cheat Sheet — daily CSS commands and production-ready examples.
• Next.js Cheat Sheet — daily Next.js commands and production-ready examples.
• Astro Cheat Sheet — daily Astro commands and production-ready examples.