Installation

Install Hypergood CSS

npm install @hypergood/css

Create a hypergood.config.ts file.

src/hypergood.config.ts

import type { CSSProp, StyleConfig } from "@hypergood/css";
import { RECOMMENDED_MEDIA, RECOMMENDED_UTILS } from "@hypergood/css/presets";

export const styleConfig = {
  media: RECOMMENDED_MEDIA,
  utils: RECOMMENDED_UTILS,
} satisfies StyleConfig;

// Register your config with Hypergood CSS for type inference
declare module "@hypergood/css" {
  interface Register {
    config: typeof styleConfig;
  }
}

// Register a CSS prop
type CustomCSS = CSSProp<typeof styleConfig>;

// If using Solid:
declare module "solid-js" {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: CustomCSS;
    }
    interface CustomAttributes<T> {
      css?: CustomCSS;
    }
  }
}

// If using React:
declare module "react" {
  interface HTMLAttributes<T> {
    css?: CustomCSS;
  }
}

Add Hypergood CSS to your Vite config, passing in your config.

app.config.ts

import hypergoodCss from "@hypergood/css/vite";
import { defineConfig } from "@solidjs/start/config";
import { styleConfig } from "./src/hypergood.config";

export default defineConfig({
  vite: {
    plugins: [
      hypergoodCss({
        config: styleConfig,
      }),
    ],
  },
});

Introduction

Styling

On this page