A tiny utility for construction conditional CSS classes, with tailwind group variants and merging of identical classes.
Fork for custom extendTailwindMerge in withTailant function, example:
withTailant({...}, {
classGroups: {
'font-size': [ { text: [ validators.isLength ] } ]
}
})
- Supports Tailwind v3.0 up to v3.3
- Works in all modern browsers and Node >=16
- Fully typed
- Framework agnostic
- To use Tailant in your project, you can install it as a dependency:
# npm
npm i tailant
# yarn
yarn add tailant
# pnpm
pnpm add tailant
- You need to add the Tailant
wrapper
to your TailwindCSS configuration filetailwind.config.js
:
// tailwind.config.js
import { withTailant } from 'tailant'
/** @type {import('tailwindcss').Config} */
module.exports = withTailant({
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
})
Why do I need to add the transformer?
If you're wondering why you need to add the transformer, it's because TailwindCSS uses something called JIT (Just-In-Time) that compiles your CSS on-demand based on the classes you use in your HTML/JSX/etc. files. Some functionalities are specific to Tailant, the JIT compiler doesn't know which classes to compile. That's why we need to add the transformer to inform the compiler which classes to include in the compilation process. This ensures that the unique features provided by Tailant are properly recognized and compiled by the JIT compiler.- After adding it, you can call the
css
function to use Tailant's features:
import { css } from 'tailwant'
return (
<button
className={css(`
h-10
px-4
py-2
bg-white
text-black
hover:(bg-white/90)
focus-visible:(outline-none ring-2 ring-ring ring-offset-2)
disabled:(pointer-events-none opacity-50)
`)}
>
Click me
</button>
)
You can add these settings on your user config:
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.experimental.classRegex" : [
["css\\((.*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
],
Tailant offers the css function, which provides several features:
-
Conditional classes
Use it to apply classes conditionally.
import { css } from 'tailant' // String const classes = css('text-black text-sm', true && 'visible', 'italic') // → "text-black text-sm visible italic" // Object const classes = css({ 'px-4 py-2': true, italic: false, 'bg-white': true }) // → 'px-4 py-4 bg-white' // Array const classes = css(['bg-blue-600 focus:outline-none', false, true && 'text-white']) // → "bg-blue-600 focus:outline-none text-white"
-
Class merging
Merge your identical classes to avoid potential conflicts.
import { css } from 'tailant' const classes = css('w-full px-4 py-2 rounded-xs text-white', 'w-auto rounded-[3px]') // → "px-4 py-2 text-white w-auto rounded-[3px]"
-
Variant Groups
Apply utilities for the same variant by grouping them with a parenthesis.
import { css } from 'tailant' const classes = css('hover:(bg-white/90) focus-visible:(outline-none ring-2 ring-ring ring-offset-2)') // → "hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
- Tailwind Merge (Dany Castillo) We utilize its features to merge classes in the available functions in Tailant.
Licensed under the MIT License.
See LICENSE for more information.