JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q12492F
  • License MIT

Package Exports

  • twvg
  • twvg/tailwind
  • twvg/vite

Readme

twvg - Tailwind Variant Group

Adds runtime grouping of tailwind classes. Optional static replacement in the form of bundler plugins are opt-in (current only Vite is available).

Installation

$ npm i twvg

Usage

import { twvg } from 'twvg'

twvg("hover", "underline text-blue-500") // hover:underline hover:text-blue-500

Static Replacement

During builds we can replace twvg calls with the resulting string as long as there are no dynamic conditions within the second arg.

Currently only a vite plugin is done.

import { defineConfig } from 'vite';
import twvgPlugin from 'twvg/vite';

export default defineConfig({
  plugins: [twvgPlugin()],
});

React example before:

import { ComponentProps } from 'react';
import { twvg } from 'twvg';
import { clsx } from 'clsx';

interface Props extends ComponentProps<'button'> {
  isRedDisabled: boolean?
}

export function Button(props: Props) {
  return (
    <button
      className={clsx([
        'px-5 py-10 bg-blue-100 rounded',
        twvg('hover', 'bg-blue-200 text-blue-900'),
        twvg('disabled', props.isRedDisabled ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'),
        props.className
      ])}
    />
      Clicky Clicky
    </button>
  )
}

React example after:

import { twvg } from 'twvg';
import { clsx } from 'clsx';

export function Button(props) {
  return (
    <button
      className={clsx([
        'px-5 py-10 bg-blue-100 rounded',
        'hover:bg-blue-200 hover:text-blue-900', // replaced
        twvg('disabled', props.isRedDisabled ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'),
        props.className
      ])}
    />
      Clicky Clicky
    </button>
  )
}