import React, { useState } from 'react'
import clsx from 'clsx'
import { twgroup } from '../lib/twgroup'
export const Page(){
return (
<div className="p-4 max-w-[800px] mx-auto">
<div
className={clsx(
'text-blue-500',
twgroup`md:(text-red-500 text-xl)`,
twgroup`md:hover:(font-bold font-medium)`,
)}
>
Hi!
</div>
</div>
)
}
tailwind.config.js
const { twgroupTransform } = require('./src/lib/twgroup')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: {
files: ['./src/**/*.tsx'],
transform: {
tsx: twgroupTransform,
},
},
}