chore(docs): align Tailwind usage with official documentation in docs and Stylelint config

Author: canerakdas

COLLABORATOR_GUIDE.md

@@ -187,14 +187,14 @@ Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind wi
 #### Guidelines when writing CSS
 
 - We use camelCase for defining CSS classes
-- We use Tailwind's `@apply` selector to apply Tailwind Tokens
+- We use Tailwind's `@apply` selector to apply Tailwind utility classes
   - We discourage the usage of any plain CSS styles and tokens, when in doubt ask for help
-  - We require that you define one Tailwind Token per line, just as shown on the example above, since this improves readability
+  - We require that you define one Tailwind utility class per line, just as shown on the example above, since this improves readability
 - Only write CSS within CSS Modules, avoid writing CSS within JavaScript files
 
 > \[!NOTE]\
 > Tailwind is already configured for this repository. You don't need to import any Tailwind module within your CSS module.\
-> You can apply Tailwind Tokens with Tailwind's `@apply` CSS rule. [Read more about applying Tailwind classes with `@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
+> You can apply Tailwind utility classes with Tailwind's `@apply` CSS rule. [Read more about applying Tailwind utility classes with `@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
 
 > \[!IMPORTANT]\
 > When using IDEs such as Visual Studio Code, we recommend installing the official [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

apps/site/.stylelintrc.mjs

@@ -26,7 +26,7 @@ export default {
   plugins: [
     'stylelint-order',
     'stylelint-selector-bem-pattern',
-    '@node-core/ui-components/stylelint/one-mixin-per-line.mjs',
+    '@node-core/ui-components/stylelint/one-utility-class-per-line.mjs',
   ],
   rules: {
     // Enforces Element Class Names to be camelCase
@@ -49,6 +49,6 @@ export default {
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
     'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
-    'nodejs/one-mixin-per-line': true,
+    'nodejs/one-utility-class-per-line': true,
   },
 };

packages/ui-components/.stylelintrc.mjs

@@ -26,7 +26,7 @@ export default {
   plugins: [
     'stylelint-order',
     'stylelint-selector-bem-pattern',
-    './stylelint/one-mixin-per-line.mjs',
+    './stylelint/one-utility-class-per-line.mjs',
   ],
   rules: {
     // Enforces Element Class Names to be camelCase
@@ -49,7 +49,7 @@ export default {
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
     'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
-    'nodejs/one-mixin-per-line': true,
+    'nodejs/one-utility-class-per-line': true,
     // We need complex `:not()` for headings with anchor
     'selector-not-notation': null,
   },

…ponents/stylelint/one-mixin-per-line.mjs …stylelint/one-utility-class-per-line.mjspackages/ui-components/stylelint/one-mixin-per-line.mjs renamed to packages/ui-components/stylelint/one-utility-class-per-line.mjs packages/ui-components/stylelint/one-mixin-per-line.mjs renamed to packages/ui-components/stylelint/one-utility-class-per-line.mjs

@@ -7,13 +7,13 @@ const {
   utils: { report, ruleMessages },
 } = stylelint;
 
-const name = 'nodejs/one-mixin-per-line';
+const name = 'nodejs/one-utility-class-per-line';
 
 const messages = ruleMessages(name, {
-  className: tokens =>
-    `Each line should contain only one Tailwind token; "${tokens}"`,
-  spacing: tokens =>
-    `Each class used with @apply should be indented by 2 spaces on a new line; ${tokens}`,
+  className: classNames =>
+    `Each line should contain only one Tailwind utility class; "${classNames}"`,
+  spacing: classNames =>
+    `Each utility class used with @apply should be indented by 2 spaces on a new line; ${classNames}`,
 });
 
 const meta = {