feat(tailwindcss-transformer): Scaffold package

[alexcarpenter]

Description

Initializes a new package tailwindcss-transformer. This is an experimental package we will be using to rebuild AIO components using Elements and Tailwind CSS.

↓ Input ↓

export function Example({ flag }){
  let className = cn('absolute inset-0', flag && 'uppercase')
  return <div className={cn('flex items-center text-sm', className)} />
}

↓ Transform ↓

export function Example({ flag }){
  let className = cn('cl-7601190e', flag && 'cl-d2cf63c7')
  return <div className={cn('cl-f64ae6a6', className)} />
}

.cl-7601190e {
  @apply absolute inset-0;
}

.cl-d2cf63c7 {
  @apply uppercase;
}

.cl-f64ae6a6 {
  @apply flex items-center text-sm;
}

↓ Compile CSS ↓

.cl-7601190e {
  position: absolute;
  inset: 0;
}

.cl-d2cf63c7 {
  text-transform: uppercase;
}

.cl-f64ae6a6 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

Checklist

• [ ] npm test runs as expected.
• [ ] npm run build runs as expected.
• [ ] (If applicable) JSDoc comments have been added or updated for any package exports
• [ ] (If applicable) Documentation has been updated

Type of change

• [ ] 🐛 Bug fix
• [ ] 🌟 New feature
• [ ] 🔨 Breaking change
• [ ] 📖 Refactoring / dependency upgrade / documentation
• [ ] other:

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 482fd0f722b5ed708e94f4350307e4f13a6320a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alexcarpenter]

Closing in favor of the work done in https://github.com/clerk/javascript/pull/3402