Skip to content

Latest commit

 

History

History
68 lines (47 loc) · 1.82 KB

README.md

File metadata and controls

68 lines (47 loc) · 1.82 KB

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