Tailant NPM | npm.io

Features

Supports Tailwind v3.0 up to v3.3
Works in all modern browsers and Node >=16
Fully typed
Framework agnostic

Quick Start

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 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: [],
})

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>
)

VSCode IntelliSense autocomplete

You can add these settings on your user config:

"editor.quickSuggestions": {
  "strings": true
},
"tailwindCSS.experimental.classRegex" : [
  ["css\\((.*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
],

Usage

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"