https://github.com/workadventure/design-system

WorkAdventure's Tailwind themes.
https://github.com/workadventure/design-system

design tailwind workadventure

Last synced: 1 day ago
JSON representation

WorkAdventure's Tailwind themes.

• Host: GitHub
• URL: https://github.com/workadventure/design-system
• Owner: workadventure
• Created: 2023-03-28T16:12:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-26T13:17:25.000Z (7 months ago)
• Last Synced: 2024-05-01T11:41:30.076Z (7 months ago)
• Topics: design, tailwind, workadventure
• Language: HTML
• Homepage: https://workadventure.github.io/design-system/
• Size: 21.1 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        

# @workadventure/design-system

[WorkAdventure](https://workadventu.re)'s Tailwind themes.

## Requirements

- Node < v18

- TailwindCSS < v3.3

## Installation

Add the dependency:

```bash

  npm install @workadventure/design-system

```ncnp

Add the plugin to the Tailwind configuration:

```js

// tailwind.config.js

import workadventureUi from "@workadventure/design-system";

/** @type {import('tailwindcss').Config} */

export default {

    content: ["./index.html", "./src/**/*.{js,ts}"],

    theme: {

        extend: {},

    },

    plugins: [workadventureUi],

    workadventureUi: {

        oswaldFontUrl: './path/to/font.ttf',

    },

};

```

> [!IMPORTANT]

> Replace './path/to/font.ttf' by the path to your font file in ttf format

## Contribute

How to run the example:

```bash

    npm install

    cd example

    npm install

    cd ..

    npm run dev

```

After that, you can open the example in your browser.

To build the package:

```bash

    npm run build

```

## Example sheet

![Design System](https://github.com/workadventure/design-system/blob/main/DesignSystem.jpg?raw=true)