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.