Deployment & Build

Learn how to build, customize, and deploy Thrynd CSS in your projects.

Installation

There are several ways to use Thrynd CSS in your project.

Via npm (Recommended)

npm Installation

# Install via npm
npm install thrynd

# Or with yarn
yarn add thrynd

# Or with pnpm
pnpm add thrynd

Then import in your project:

Import in JavaScript/TypeScript

// Import in your entry file (main.js, App.tsx, etc.)
import 'thrynd';

// Or import in CSS
@import 'thrynd';

Via CDN (Rapid Prototyping)

For quick prototypes, CodePen experiments, or static sites:

CDN Installation

<!-- In your HTML <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/thrynd@latest/dist/thrynd.min.css">

<!-- Apply a theme to your body -->
<body class="theme-modern">
  <!-- Your content -->
</body>

Download & Self-Host

Manual Download

Download the latest release from GitHub
Extract the dist folder
Copy thrynd.min.css to your project
Link it in your HTML: <link rel="stylesheet" href="/path/to/thrynd.min.css">

Building from Source

Clone the repository and build the CSS yourself for maximum customization.

Build Process

# Clone the repository
git clone https://github.com/yourusername/thrynd-css.git
cd thrynd-css

# Install dependencies
npm install

# Build all CSS files
npm run build:all

# Or build specific parts
npm run build:core      # Core styles only
npm run build:components # Components only
npm run build:utilities  # Utilities only
npm run build:themes     # All themes

# Watch for changes during development
npm run watch

Customization

CSS Variables

Override CSS variables to customize colors, spacing, and more without rebuilding.

Custom Variables

/* In your custom CSS file */
:root {
  /* Override primary color */
  --color-primary: #your-color;
  --color-primary-hover: #your-hover-color;

  /* Adjust spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;

  /* Modify border radius */
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Change font family */
  --font-sans: 'Your Font', system-ui, sans-serif;
}

Custom Theme

Create your own theme by defining a new class with custom variables.

Custom Theme Class

/* custom-theme.css */
.theme-custom {
  /* Semantic colors */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Background colors */
  --color-background: #ffffff;
  --color-surface: #f9fafb;

  /* Text colors */
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-heading: #000000;

  /* Border and divider */
  --color-border: #e5e7eb;

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

/* Apply to body */
body.theme-custom {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-background);
}

PostCSS Configuration

Customize the build process with your own PostCSS configuration.

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-custom-properties')({
      preserve: false
    }),
    require('autoprefixer'),
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true
        }
      }]
    })
  ]
}

Framework Integration

React / Next.js

Next.js Integration

// app/layout.tsx or pages/_app.js
import 'thrynd';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="theme-modern">
        {children}
      </body>
    </html>
  )
}

// Dynamic theme switching in a component
import { useState } from 'react'

function ThemeSwitcher() {
  const [theme, setTheme] = useState('theme-modern')

  return (
    <div className={theme}>
      <button
        className="btn-primary"
        onClick={() => setTheme('theme-neon')}
      >
        Switch Theme
      </button>
    </div>
  )
}

Vue / Nuxt

Vue Integration

<!-- In main.js or app.vue -->
<script setup>
import 'thrynd';
import { ref } from 'vue'

const theme = ref('theme-modern')

function toggleTheme() {
  theme.value = theme.value === 'theme-modern'
    ? 'theme-neon'
    : 'theme-modern'
}
</script>

<template>
  <div :class="theme">
    <button class="btn-primary" @click="toggleTheme">
      Switch Theme
    </button>
  </div>
</template>

Svelte / SvelteKit

Svelte Integration

<!-- In +layout.svelte -->
<script>
  import 'thrynd';
  let theme = 'theme-modern';

  function toggleTheme() {
    theme = theme === 'theme-modern'
      ? 'theme-neon'
      : 'theme-modern';
  }
</script>

<div class={theme}>
  <button class="btn-primary" on:click={toggleTheme}>
    Switch Theme
  </button>
  <slot />
</div>

Vite

Vite Configuration

// In your main.js or main.ts
import 'thrynd';

// That's it! No additional configuration needed.

Production Optimization

🗜️ Minification

The production build is automatically minified with cssnano, reducing file size by ~40%.

Development: ~85KB

Production: ~50KB

Gzip Compression

Enable gzip compression on your server for an additional 70% reduction.

Minified: ~50KB

Gzipped: ~15KB

Tree Shaking

Import only the components you need by importing source files directly and using PurgeCSS.

CDN Caching

Use a CDN like unpkg or jsDelivr for automatic caching and global distribution.

PurgeCSS Setup

PurgeCSS Configuration

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production'
      ? [
          purgecss({
            content: [
              './src/**/*.html',
              './src/**/*.jsx',
              './src/**/*.tsx',
              './src/**/*.vue',
            ],
            safelist: [
              /^theme-/,
              /^is-/,
              /^has-/,
            ]
          }),
          require('cssnano')
        ]
      : [])
  ]
}

Deployment Checklist

Pre-Deployment

Build production CSS with npm run build:all
Test all pages in target browsers
Verify responsive design on mobile/tablet/desktop
Run accessibility audit with Lighthouse
Enable gzip/brotli compression on server
Set proper cache headers for CSS files
Configure CDN if using
Test theme switching functionality

Troubleshooting

Styles not applying?

Check that CSS file is properly linked in HTML
Verify class names match documentation exactly
Ensure no conflicting CSS is overriding Thrynd styles
Check browser console for 404 errors

Theme not switching?

Ensure theme class is on <body> or parent wrapper
Verify theme CSS file is loaded
Check for typos in theme class names (e.g., theme-modern)
Inspect element to see if CSS variables are being applied

Build failing?

Delete node_modules and reinstall dependencies
Check Node.js version (requires 16+)
Ensure PostCSS and plugins are properly installed
Review build logs for specific error messages

← Templates Next: LLM Guide →