@sveltevietnam/ui

A design system for the Svelte Vietnam project, packaged as Tailwind presets.

Installation

Install the necessary packages using your package manger of choice:

pnpm add -D tailwindcss postcss svelte @sveltevietnam/ui

Re-export the predefined Postcss config:

// postcss.config.js
import config from '@sveltevietnam/ui/css/postcss';

export default config;

Add the preset to your tailwind.config.js:

// tailwind.config.js
import sveltevietnam from '@sveltevietnam/ui/css/tailwind';

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

In your entry CSS, import fonts.css:

/* app.css */
@import url('@sveltevietnam/ui/css/fonts.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

Editor Support

It is recommended, if possible, that you install the appropriate editor plugin/extension that adds support for TailwindCSS Language Server. If you are using VSCode, install the official Tailwind CSS IntelliSense. This greatly improves code discovery and developer productivity.

Documentation

...Coming soon...