@bronzelabs/tribe-tailwind-preset

This package contains the Tribe Tailwind preset.

The default exported preset includes all of the Tribe's foundation styles (typography, colors, spacing, etc…) and all the needed configuration for component-specific classes used internally.

Installation

yarn add -D @bronzelabs/tribe-tailwind-preset

# or with npm:

npm i --save-dev @bronzelabs/tribe-tailwind-preset

Usage

In your tailwind.config.js file (or equivalent), add the following:

import tribe from "@bronzelabs/tribe-tailwind-preset"

module.exports = {
  presets: [tribe],
}

As an example, the classNames applied below become available right away. They apply, respectively, the CSS properties color with the value of the theme token blue.tone and background-color with the value of the theme token grey.alpha30.

export const MyComponent = () => {
  return (
    <p className="text-blue-tone bg-grey-alpha30">
      Hello World
    </p>
  )
}