Fresh 2 + Tailwind CSS Skeleton

A modern, production-ready skeleton for building web applications with Fresh 2 and Tailwind CSS.

🚀 Quick Start

1. Start the development server:

   deno task dev

2. Open your browser: Visit http://localhost:5173 to see the skeleton app.

📦 What's Included

Core Technologies

• Fresh 2.0 - The next-gen web framework for Deno
• Tailwind CSS 3.4 - Utility-first CSS framework
• Vite 7.1 - Fast build tool and dev server
• TypeScript - Type-safe development

Pre-configured Features

• ✅ Hot module reloading (HMR)
• ✅ Server-side rendering (SSR)
• ✅ PostCSS with Tailwind processing
• ✅ Custom Tailwind components
• ✅ Beautiful gradient themes
• ✅ Inter font integration
• ✅ Responsive design utilities

🎨 Custom Tailwind Components

The skeleton includes pre-built component classes:

Cards

<div class="card">Basic card with shadow and hover effects</div>
<div class="card-selected">Selected state card</div>
<div class="card shadow-glow">Card with blue glow effect</div>

Buttons

<button class="btn-primary">Primary action button</button>
<button class="btn-secondary">Secondary button</button>

Form Elements

<input class="input-field" type="text" placeholder="Styled input">
<select class="select-field">...</select>

Utilities

<h1 class="text-gradient">Gradient text</h1>
<div class="bg-gradient-fresh">Fresh gradient background</div>

🎨 Color Palette

Fresh Blue

• fresh-blue-50 to fresh-blue-900
• Primary: fresh-blue-500 (#3b82f6)

Fresh Green

• fresh-green-50 to fresh-green-900
• Primary: fresh-green-500 (#22c55e)

📁 Project Structure

fresh-tailwind-skeleton/
├── components/          # Reusable components
├── islands/            # Interactive client-side components
├── routes/             # File-based routing
│   ├── _app.tsx       # Root app component
│   └── index.tsx      # Home page
├── static/            # Static assets
│   └── styles.css     # Tailwind CSS file
├── tests/             # Test files
├── client.ts          # Client entry point
├── main.ts           # Server entry point
├── utils.ts          # Utilities
├── deno.json         # Deno configuration
├── vite.config.ts    # Vite configuration
└── tailwind.config.js # Tailwind configuration

🔧 Configuration Files

deno.json

• Task definitions (dev, build, test)
• Import map with all dependencies
• TypeScript compiler options
• JSX configuration for Preact

vite.config.ts

• Fresh plugin integration
• PostCSS with Tailwind processing
• Auto-prefixer for browser compatibility

tailwind.config.js

• Content paths for purging unused CSS
• Custom color palette (fresh-blue, fresh-green)
• Inter font family
• Custom animations and keyframes

client.ts

• CSS imports for HMR
• Client-side hydration setup

🚀 Building for Production

1. Build the application:

   deno task build

2. Start the production server:

   deno task start

🧪 Testing

Unit Tests

deno task test

E2E Testing with Playwright

For browser testing, use Playwright via MCP (Model Context Protocol) rather than installing it as a dependency. This provides better integration and avoids bloating your project with testing dependencies.

If you're using Claude Code or similar tools with MCP support, Playwright will be available as a server for automated testing.

📝 Development Tips

Adding New Routes

Create files in the routes/ directory:

• routes/about.tsx → /about
• routes/api/users.ts → /api/users
• routes/blog/[slug].tsx → /blog/:slug

Creating Interactive Components

Add client-side components in the islands/ directory:

// islands/counter.tsx
import { signal } from "@preact/signals";

const count = signal(0);

export default function Counter() {
  return (
    <div class="card p-6 text-center">
      <p class="text-2xl mb-4">{count.value}</p>
      <button 
        class="btn-primary" 
        onClick={() => count.value++}
      >
        Increment
      </button>
    </div>
  );
}

Custom Tailwind Classes

Add new component classes in static/styles.css:

@layer components {
  .my-custom-button {
    @apply bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition-colors;
  }
}

🔍 Key Features Explained

CSS Processing Pipeline

1. Tailwind directives in static/styles.css
2. CSS imported in client.ts for Vite processing
3. PostCSS processes Tailwind with purging
4. Auto-prefixer adds browser compatibility
5. Vite serves processed CSS with HMR

SSR + Hydration

• Pages render on the server for SEO and performance
• Islands hydrate on the client for interactivity
• Shared state via Preact Signals

File-based Routing

• Routes automatically generated from file structure
• Support for dynamic routes, API endpoints, and middleware
• Layouts via _app.tsx and _layout.tsx

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - feel free to use this skeleton for any project!

---

Happy coding! 🎉