@bitcurve/reactor-tw-core

Core tailwind presets + plugins for projects that use reactor-* packages.

This preset:

• replaces default tailwind colour palette with oklch @evilmartians/harmony palette
• adds the official tailwind plugins: @tailwindcss/container-queries, @tailwindcss/forms, and @tailwindcss/typography
• adds the community plugin tailwindcss-animate
• installs and configures fluid-tailwind (fluid.tw) including setting theme screens and fontSize to use rem values to enable fluid responsive design
• defines CSS custom properties (CSS variables) and corresponding tailwind utilities via theme.extend.colors to define a colour palette and typography configuration that follows project conventions
• adds various utilities
• adds global CSS styles

Optionally use this preset alongside @bitcurve/reactor-tw-shadcn to support shadcn/ui and load its default palette.

The preset uses Nunito + Nunito Sans from (this can be overridden by an upstream project).

The preset follows the palette naming convention to use a 'P' (for palette) prefix to denote colours e.g. bg-P-background which also relates to their corresponding css variable names e.g. --P-background.

All colour values in CSS variables are defined using CSS colour channel values (arguments to CSS color space functions) to support tailwind opacity variants. Refer to docs for details: https://tailwindcss.com/docs/customizing-colors#using-css-variables

This package is published as both ESM + CJS with types and source maps targeting ES2022.

Installation

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

Install Peer Dependencies

Install required peer dependencies:

pnpm add -D @bitcurve/reactor-style
pnpm add -D @bitcurve/reactor-tw-shadcn

This package includes the following required packages in its dependencies array of package.json so they should also be installed by virtue of installing this package: @evilmartians/harmony, @tailwindcss/container-queries, @tailwindcss/forms, @tailwindcss/typography, and tailwindcss-animate.

Install this Package

Install this package as a dev dependency:

pnpm add -D @bitcurve/reactor-tw-core

Configure Tailwind

In your tailwind configuration file e.g. tailwind.config.ts import the preset and add it to the presets array:

import { reactorPreset } from '@bitcurve/reactor-tw-core'

const tailwindConfig = {
  // ...

  presets: [reactorPreset],

  // ...
}

export default tailwindConfig

Add fluid-tailwind

For maintainability and clarity it is recommended to install fluid-tailwind and configure fluid-tailwind per the installation instructions at https://fluid.tw/#installation to define it at the tailwind config level.

In tailwind.config.ts (as per the installation guide):

• set content.extract to the fluid-tailwind extractor
• add the fluid plugin to the plugins array

Add font packages

If you plan on sticking to the preset default typeface choices of Nunito (Variable) and Nunito Sans (Variable) then add the packages published by Fontsource and install them per the installation guide:

pnpm add @fontsource-variable/nunito @fontsource-variable/nunito-sans

Otherwise you can override theme.fontFamily.sans and theme.fontFamily.heading with your own choices.

Note on Precedence with Tailwind Presets

In case your project has multiple presets remember that tailwindcss will intelligently merge them in the order of the presets array.

Later presets will override conflicting values from earlier presets. Any theme or plugins values defined directly in a tailwind configuration file will in turn override any conflicting values from any presets.

Usage

Merge css class names with cn()

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