Tailwind

Whether you're working on Starfield itself, or building a project that uses Starfield, we recommend using its Tailwind conventions to make sure your IDE and linter work the same way.

It won't break anything if you don't follow these rules, though.

Conventions

1. Use (.*)ClassName whenever designating a prop that accepts classnames as input. For example, if a component needs classes when disabled, use disabledClassName. This is a good default for variable names, too.
2. If class lists are getting long, or you need lots of conditional classes, use @netlify/classnames-template-literals (NPM). Wrap any class list strings in the ctl function. You can, but don't have to, use backticks and newlines to better organize and sort these classes. This is also handy with conditional classes, where you can use the ${var ? 'ring-1 : 'ring-0'} syntax.
3. We perform linting against custom class names that aren't valid tailwind classes, to have some degree of "type safety" to our CSS classes. If you need an escape hatch around this, prefix class names with sfc-.

Recommended settings

If you use an IntelliJ IDE, enable the tailwindcss plugin in Preferences > Plugin. Once enabled, under Preferences > Languages & Frameworks > Style Sheets > Tailwind CSS, under the experimental key, change the classRegex:

1  {
2    "experimental": {
3      "configFile": null,
4      "classRegex": ["[a-zA-Z]*ClassName=\"([^']+)\"",
5        "ctl\(`([^`]*)`\)",
6        "ctl\('([^']*)'\)"
7      ]
8    }
9  }

The same configuration for VSCode in settings.json:

1  "tailwindCSS.experimental.classRegex": [
2      "[a-zA-Z]*ClassName=\"([^']+)\"",
3      "ctl\\(`([^`]*)`\\)",
4      "ctl\\('([^']*)'\\)"
5  ],

This enables tailwind class autocomplete for (.*)ClassName attributes, as well as any strings wrapped in ctl(). We also enable ESLint linting of tailwind classes for the same contexts.