A comprehensive Tailwind CSS showcase and learning resource built as a production-ready React TypeScript monorepo. Demonstrates modern web development patterns, design systems, and component architecture.
Live Site: Tailwind.makeboldspark.com • Full Documentation • Repository Story
TailwindSpark demonstrates modern React patterns with Tailwind CSS 4's @theme directive, semantic design tokens, and comprehensive component examples in a production-ready TypeScript monorepo.
Live Site: Tailwind.makeboldspark.com
Built by Mark Hazleton — Technical Solutions Architect Part of the MakeBoldSpark portfolio of technical demonstrations.
Learn by Example: Explore cutting-edge React patterns with Tailwind CSS 4's @theme directive, semantic design tokens, and comprehensive component examples.
Production Quality: Built with strict TypeScript, 40% test coverage minimum, WCAG AA accessibility, automated CI/CD, and formal code governance via a project constitution.
Modern Architecture: Turborepo monorepo with shared design tokens, reusable UI components, and optimized build pipeline demonstrating scalable patterns.
Active Maintenance: Automated dependency updates via Dependabot, security scanning, performance monitoring, and regular constitutional compliance audits.
📊 Read the full development history and metrics analysis
git clone https://github.com/markhazleton/TailwindSpark.git
cd TailwindSpark
npm install
npm run devOpen http://localhost:5173 to explore interactive components, design system examples, and production patterns.
TailwindSpark/
├── apps/demo-app/ # Main React application
├── packages/
│ ├── design-tokens/ # Shared design system
│ └── ui-components/ # Reusable UI components
├──🏗️ Project Structure
TailwindSpark/ ├── apps/demo-app/ # Showcase application ├── packages/ │ ├── design-tokens/ # Tailwind CSS 4 @theme definitions │ └── ui-components/ # Reusable component library └── .documentation/ # Guides, governance, and history
## 📚 Documentation
**Getting Started**
- [Setup & Development Guide](./.documentation/guides/GETTING_STARTED.md)
- [Architecture Overview](./.documentation/guides/ARCHITECTURE.md)
- [Testing Standards](./.documentation/guides/TESTING.md)
**Project Governance**
- [Constitution](./.documentation/memory/constitution.md) - Formal coding standards and principles
- [Repository Story](./.documentation/repo-story/repo-story-2026-04-11.md) - Development history and metrics
**Resources**
- [Deployment Guide](./.documentation/guides/DEPLOYMENT.md)
- [Branding Guidelines](./.documentation/guides/BRANDING.md)
- [Changelog](./.documentation/guides/CHANGELOG.md)
## 🛠️ Key Scripts
```bash
npm run dev # Development server with HMR
npm run build # Production build (all packages)
npm run sync:data # Explicitly refresh tracked content snapshots
npm run version:bump # Explicit release version update
npm run test # Vitest with coverage reporting
npm run lint # ESLint + custom rules
For detailed technical specifications, architecture decisions, and development quality metrics, see the Repository Story for details.
Mark Hazleton
- Website: markhazleton.com
- GitHub: @markhazleton
- LinkedIn: Mark Hazleton
View Live Site • Documentation • Report Bug
Built with ❤️ using React, TypeScript, and Tailwind CSS Contributions welcome! Review the Constitution for coding standards.
MIT License - see LICENSE file for details.
Part of the MakeBoldSpark Portfolio • Created by Mark Hazleton • Built with React 19, TypeScript 5, and Tailwind CSS 4