Conventions for Adding Custom Styles in Tailwind

Custom Utility Classes

If you want to add a custom utility CSS class, it should be added inside packages/utils/tailwind-plugins/utilities/index.js.

The agreed prefix nomenclature for custom classes is u-, for example u-your-class.

Standalone Keyframes

If you want to add a keyframe that is not meant to be publicly exposed, it should be added inside packages/utils/tailwind-plugins/animations/index.js.

The agreed prefix nomenclature for standalone keyframes is standalone-, for example:

// inside keyframes field
keyframes: {
  standaloneFoo: ...
}

And inside the animations field:

// inside animations field
animations: {
  'standalone-foo': 'standaloneFoo 0.5s ease-in-out',
}