Getfly UI Common

Tailwind config

1. Import config to tailwind.css

@import 'tailwindcss';

@config '@getfly-ui/common/tailwind-config';

OR

@import '@getfly-ui/common/tailwind.css';

2. Preset for text

import { textPresets, useTextPresets, type TextPresetNames } from '@getfly-ui/common';

const style = { ...textPresets.body_l_semibold };

// React hooks

const preset = useTextPresets();
const style = { ...preset.body_l_semibold };

3. Radius config

import { radius, type Radius } from '@getfly-ui/common';

const style = { ..., borderRadius: radius['radius-1'] };

4. Spacing config

import { spacing, type Spacing } from '@getfly-ui/common';

const style = { ..., padding: spacing['spacing-1'] };

5. Colors Palette

import { colors, useColors, type Colors } from '@getfly-ui/common';

const style = { ..., color: color['blue-600']};

// React hooks

const color = useColors();

const style = { ..., color: color['blue-600']};

6. Emotion Convert style to class

import emotion from '@getfly-ui/common/emotion';

const { css, cx } = emotion;
const baseButton = css({
  // object style sheet
  width: 100,
  height: 100,
});