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

1. 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

2. You need to add the Tailant wrapper to your TailwindCSS configuration file tailwind.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: [],
})

3. 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:

1. 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"

2. 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]"

3. 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.

• Luiz Felipe - @meluiz
• João Pedro Magalhães - @joaom00
• Daniel Gabriel - @revogabe

Licensed under the MIT License.

See LICENSE for more information.