Group TailwindCSS classnames
Tried of managing ungrouped tailwindcss classnames.
Use TailwindCSSX to group tailwindcss classnames.
Using Array
import twx from "tailwindcssx";
export default const App = () => {
return (
<div className={twx([
'border-red-100',
'text-sm'
])}>
Group classnames
</div>
)
}
/*
result classname: 'border-red-100 text-sm'
*/
You can use array in an array
import twx from "tailwindcssx";
export default const App = () => {
return (
<div className={twx([
['border-red-500', 'text-sm'],
['text-red-400', 'font-semibold'],
])}>
Multiple Groups
</div>
)
}
/*
result classname: 'border-red-500 text-sm text-red-400 font-semibold'
*/
You can disable or enable groups with variables
import twx from "tailwindcssx";
export default const App = ({theme}) => {
return (
<div className={twx([
'font-semibold',
theme === "red" && ['border-red-500', 'text-sm'],
theme === "blue" && ['border-blue-500', 'text-md'],
])}>
Multiple Groups with conditions.
</div>
)
}
/*
result classname:
if theme === 'red': 'font-semibold border-red-500 text-sm'
if theme === 'blue: 'font-semibold border-blue-500 text-md'
*/
You can have separate group for each variant using object syntax
import twx from "tailwindcssx";
export default const App = () => {
return (
<div className={twx({
'': [
'border-red-500', // with no separator
],
hover: [
'border-blue-500',
],
md: {
'': [
'text-red-600'
],
hover: [
'text-green-600',
'text-sm'
]
}
})}>
Object Grouping
</div>
)
}
/*
result classname: 'border-red-500 hover:border-blue-500 md:text-red-600 md:hover:text-green-600 md:hover:text-sm'
*/
If you have a custom separator other than default separator ':'.
// twx.js
import twx from "tailwindcssx";
export default (classNames) => {
return twx(classNames, '', '_'); // last argument is the separator
}
import twx from "./twx";
export default const App = () => {
return (
<div className={twx({
'': [
'border-red-500', // with no separator
],
hover: [
'border-blue-500',
],
md: {
'': [
'text-red-600'
],
hover: [
'text-green-600',
]
}
})}>
With Custom Separator
</div>
)
}
/*
result classname: 'border-red-500 hover_border-blue-500 md_text-red-600 md_hover_text-green-600 md_hover_text-sm'
*/