Frequency Style Guide

Svelte + Storybook + TailwindCSS

Prerequisites

This package is designed to work specifically with Svelte + Tailwind projects.

Installation

When installing this package into your project, follow the steps below.

1. Install the style guide package:

npm i @frequency-chain/style-guide

2. Install and configure Tailwind.

3. Edit your tailwind.config file to contain the style guide config as a preset. See the example below.

import frequencyConfig from "@frequency-chain/style-guide/tailwind.config";

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        // ... custom theme config
    },
    presets: [frequencyConfig]
};

4. You should now be able to access the Frequency Style Guide Tailwind theme and custom css classes in your Svelte components!

---

Development

Storybook Quickstart

To spin up the style guide and see what icons, features, atoms, typography, and colors are included, run the commands below.

npm i
npm run storybook

Package Testing

1. Build the /dist.

npm run build

2. Create pack.

cd dist
npm pack

3. Install local package into a new project.
   • Navigate to a new Svelte project.
   • Follow the installation steps.
   • When installing the package, remember to use the local version you just created!

Dev Notes

• Anything that should be exported for the package should be in src/lib.
• Any components that you wish to export must be exported in index.ts.