Tailwind Config Package

A package for combining default tailwind config values with project specifc values.

To install run

npm: npm install --save-dev @unionco/tailwind-config yarn: yarn add -D @unionco/tailwind-config

Building the package

This package is built with tsup, the script command is yarn build. This package will also be built by running the global yarn packages:build

Using this package

This package has two main exports values & generateTailwindConfig().

Using values

The values export contains common values that can be used inside of a tailwind config. Example: gutterDefault: clamp(1rem, calc(0.96rem + 0.18vw), 1.125rem) A dynamic spacing value using clamp.

// Tailwind configs don't support es modules, so they need to be imported using the require syntax
/**
 * DO:
 * Destructure values out of package, then any individual values
 */
const { values } = require('@unionco/tailwind-config')
const { gutterDefault } = values

/**
 * Don't:
 * Destructure individual values! This will throw an error
 */
const { values: { gutterDefault } } = require('@unionco/tailwind-config')

Using generateTailwindConfig()

The generateTailwindConfig() accepts an object where all bottom level key values are strings. It takes that as a tailwind config and merges it with the defaults provided by the package then returns the merged obj which can be used as a config.

const { generateTailwindConfig } = require('@unionco/tailwind-config')

const config = {
    // Write custom config code here
}

module.exports = generatTailwindConfig(config)

@TODO: Look into https://utopia.fyi/ for visualization of scales for dynamic sizing and spacing

Limitations

When using external packages that aren't built with next.js you can't set the baseUrl of those packages. https://github.com/facebook/create-react-app/issues/9127| Original Error Discussion https://github.com/vercel/next.js/pull/22867|Original PR https://github.com/vercel/next.js/discussions/26420|Discussion