Gamudes

A modern web application built with Nuxt 3, featuring a custom CSS architecture that combines Tailwind CSS v4 beta with SCSS and modern CSS features.

Project Structure

The codebase uses Nuxt 3 with a carefully crafted styling approach:

CSS Architecture

The project implements a four-layer CSS architecture: theme, base, components, and utilities. This layering system ensures proper cascade and specificity management while keeping styles organized and maintainable.

Modern CSS Features

• CSS Nesting with PostCSS for better style organization and maintainability
• Custom selectors for semantic grouping of elements (like headings)
• Modern text wrapping with balance for headings and pretty for paragraphs
• Enhanced font rendering with smoothing optimizations

Tailwind Integration

Using Tailwind CSS v4 beta (4.0.0-beta.8) with thoughtful customizations:

• Tailwind classes use the tw: prefix to prevent conflicts with custom styles
• Integration with the layered architecture
• Theme system with CSS variables for fonts, spacing, and design tokens
• Advanced PostCSS configuration supporting modern CSS features and optimizations

Nuxt Modules & Plugins

• @nuxt/eslint: Code linting and formatting
• @nuxt/fonts: Font optimization with:
  • CSS Variables processing
  • System font optimization
• ESLint configuration:
  • Prettier integration
  • Simple Import Sort plugin
  • Custom import/export sorting rules

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Clean and start dev server
pnpm dev:clean

# Lint code
pnpm lint

# Format code
pnpm format

# Build for production
pnpm build

# Preview production build
pnpm preview

Requirements

• Node.js >=20
• Package Manager: pnpm 9.15.1
• Supported Browsers: Modern browsers with CSS Nesting support