@peace_node/vite

ClubStyle design system for Vite projects. A comprehensive design system with Tailwind CSS tokens, typography, and semantic styling optimized for Vite.

Installation

npm install @peace_node/vite

Quick Setup

Run the interactive setup:

npx clubstyle-setup

This will:

• Install required dependencies (tailwindcss, autoprefixer, postcss)
• Create src/index.css with all design tokens
• Setup tailwind.config.js and postcss.config.js

Manual Setup

1. Install dependencies:

npm install --save-dev tailwindcss autoprefixer postcss

2. Create your Tailwind config:

// tailwind.config.js
const { createViteConfig } = require('@peace_node/vite');

module.exports = createViteConfig();

3. Create your CSS file:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import in your main file:

// main.tsx or main.jsx
import './index.css'

Usage

Use all ClubStyle design tokens in your components:

function App() {
  return (
    <div className="bg-background text-foreground">
      <h1 className="text-sans-4xl font-bold text-primary">
        Welcome to ClubStyle
      </h1>
      <p className="text-serif-lg text-muted-foreground">
        Beautiful typography and colors
      </p>
      <button className="bg-dodger-blue-500 text-white px-4 py-2 rounded">
        Get Started
      </button>
    </div>
  )
}

Features

• 🎨 OKLCH Color System: Dodger blue and hydrant red palettes
• 📝 Typography Tokens: Sans, serif, and mono with xs-9xl sizes
• 🌙 Dark Mode: Automatic CSS variable switching
• 🎯 Semantic Colors: Primary, secondary, muted, destructive, etc.
• 📱 Semantic HTML: Automatic styling for headings, paragraphs, lists
• ⚡ Vite Optimized: Perfect integration with Vite projects

License

MIT