@bitcurve/flint-tailwind

An opinionated package containing presets, plugins, and utilities for web development projects powered by Tailwind CSS.

For use in projects by Bitcurve Systems, its clients, and anyone else who may find it useful or interesting.

This package is published as both ESM + CJS with types and source maps targeting ES2021 for workstations and CI build environments that run Node v18+ or a compatible runtime.

All documentation and examples assume ESM; revise the syntax accordingly if you are using CommonJS.

The preset defines a set of custom sizes, variants, and utilities. This package exports a custom cn() function for merging class names that incorporates a special configuration of tailwind-merge that can recognize and merge these custom names.

Dependencies

This package assumes that the consuming project is using tailwindcss configured to use the preset exported by this package.

The @bitcurve/flint-style package provides a custom cn() function that is configured to recognize and merge the classnames of custom tailwindcss variants and utilities defined by the preset and plugins exported by this package.

That package exports a set of conventions for sizing, spacing, and palette related class names that are adhered to by this package.

Installation

Install the package as a dev dependency.

pnpm add -D @bitcurve/flint-tailwind

Then import the preset and add it to the presets array in your project's taiwind config, e.g. tailwind.config.ts:

import { flintPreset } from '@bitcurve/flint-tailwind'

const tailwindConfig = {
  // ...

  presets: [flintPreset],

  // ...
}

export default tailwindConfig

In case your project has multiple presets remember that tailwindcss intelligently merges them and that the order of the presets array matters.

Subsequent presets will override conflicting values from previous presets. Actual config values in turn override any conflicting values from any of the presets.

Usage

Merge css class names with cn()

import { cn } from '@bitcurve/flint-style'