0.0.3 • Published 3 years ago
tailshake v0.0.3
Tailshake
Tailshake combines TailwindCSS classes and shakes off any conflicts. It helps compose and toggle Tailwind styles.
Install
yarn add tailshake
// or
npm install tailshake
Usage examples
import tailshake from 'tailshake'
A simple example:
tailshake("text-white", "text-gray-100") // => "text-gray-100"
Falsy values are ignored, which means you can use tailshake to easily toggle classlists:
tailshake("text-blue-400", isDisabled && "text-gray-400")
isDisabled = false // => "text-blue-400"
isDisabled = true // => "text-gray-400"
Examples use React but the library does not care where you use it. :)
Compose classlists for legibility
const Button = (
<button className={tailshake(
'bg-white text-blue',
'hover:bg:blue hover:text-white'
)}>
Neat, I have hover!
</button>
)
Compose classlists to allow extension or overrides
const Card = ({ className }) => (
<div className={tailshake(
'bg-white rounded-md',
className
)}>
Neat!
</div>
)
// Customise radius, notice this overrides the default rounded-md class
<Card className="rounded-lg">
// Add spacing
<Card className="mb-6">
Compose classlists to support multiple styles
const buttonBaseClasses = 'p-3 rounded'
const buttonAppearanceClasses = {
blue: 'bg-white text-blue',
red: 'bg-white text-red',
}
const Button = ({ appearance }) => (
<button className={tailshake(
buttonBaseClasses,
buttonAppearanceClasses[appearance],
)}>
Neat!
</button>
)
Toggle classes
Simple example
<main
className={mergeClasses(
'flex flex-col',
isFullHeight && 'min-h-screen',
)}
/>
Known issues
Nobody is perfect.
- overrides don't work for classes without a value or unrelated classnames, examples:
border-8
will not overrideborder
, this is practically ok because the specific class is declared later and winsblock
will not overrideflex
, you should use toggling as a workaround (or create a PR with a fix!)
- this library assumes a close-to-default Tailwind configuration, so no promises when you're using custom plugins lots of customisation. Please do create an issue describing any problems with custom configurations!
Alternatives
Some other options you might consider:
Both of these packages appear to be unmaintained, they have served as inspiration for the approach and test cases for Tailshake.