@myevery/tailwind v0.1.1

My UI - Tailwind CSS

This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in My UI.

Installation

pnpm install -D @myevery/tailwind

Usage

The simplest way to register My UI is to use withMyUI helper function.

// tailwind.config.ts
import { withMyUI } from '@myevery/tailwind'

export default withMyUI({
  // your config
})

You can also direcly import the preset and use it in your config.

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import preset from '@myevery/tailwind/preset'

export default {
  presets: [myUIPreset],
  // your config
} satisfies Config

Customization

My UI is fully customizable. You can override components by using the theme option.

export default withMyUI({
  theme: {
    extend: {
      myUi: {
        dropdownDivider: {
          space: '2',
          border: 'muted-200', // you can use arbitrary value like '[#fff]'
          borderDark: 'muted-600',
        },
        focus: {
          offset: '2',
          width: '1',
          style: 'dashed',
          color: 'muted-300',
          colorDark: 'muted-600',
        },
        label: {
          font: 'alt',
          text: 'muted-400',
          textDark: 'muted-400/80',
        },
        mark: {
          bg: 'primary-100',
          bgDark: 'primary-800',
          text: 'primary-800',
          textDark: 'primary-200',
        },
        slimscroll: {
          width: '[6px]',
          bg: 'black/5',
          bgDark: 'white/5',
          bgHover: 'black/20',
          bgHoverDark: 'white/20',
        },
        tooltip: {
          font: 'sans',
          bg: '[#1e293b]',
          bgDark: '[#ec4899]',
          text: '[#fff]',
          textDark: '[#fff]',
          minWidth: '3rem',
          maxWidth: '21rem',
        },
      },
    },
  },
})