tailwind-generator

Convert CSS declarations into TailwindCSS class names

⚠️ TailwindCSS version support: >= 3.4.3

Example

Base:

import { gen } from 'tailwind-generator';

const result = gen({
  'align-items': 'flex-start',
  background: '#FFF',
  display: 'flex',
  'flex-direction': 'column',
  gap: '16px',
  padding: '24px',
  width: '1152px',
});

console.log(result);

// {
//   success: 'items-start flex flex-col bg-white gap-[16px] p-6 w-[1152px]',
//   failed: [],
// }

CSS Variables:

import { gen } from 'tailwind-generator';

const result = gen(
  {
    height: 'var(--var-height)',
  },
  {
    'var-height': '12px',
  },
);

console.log(result);

// {
//   success: 'h-3',
//   failed: [],
// }