Prefer tailwind design tokens

nextjs
Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
1. Use Tailwind's spacing scale instead of arbitrary pixel values
2. Use Tailwind's color palette instead of custom color codes
3. Use Tailwind's z-index scale instead of arbitrary z-index values
4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
Bad:

Install this rule for wispbit

Quick Install

Recommended
View install script

Run this one command to automatically install the rule:

curl -fsSL https://wispbit.com/api/install?rule=tailwind-design-tokens | bash

Manual install

1

Copy the rule

---
include: *.tsx
---
Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
1. Use Tailwind's spacing scale instead of arbitrary pixel values
2. Use Tailwind's color palette instead of custom color codes
3. Use Tailwind's z-index scale instead of arbitrary z-index values
4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
Bad:
```html
<div class="mt-[37px] text-[#3366FF] z-[9999] top-[37%] w-[142px]">
  Custom content
</div>
```
Good:
```html
<div class="mt-10 text-blue-600 z-50 top-1/3 w-36">Custom content</div>
```
2

Add the rule into your project

Save the copied content as: .wispbit/rules/tailwind-design-tokens.md

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.tsx"
      instructions: |
                
        Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
        
        1. Use Tailwind's spacing scale instead of arbitrary pixel values
        2. Use Tailwind's color palette instead of custom color codes
        3. Use Tailwind's z-index scale instead of arbitrary z-index values
        4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
        
        Bad:
        
        ```html
        <div class="mt-[37px] text-[#3366FF] z-[9999] top-[37%] w-[142px]">
          Custom content
        </div>
        ```
        
        Good:
        
        ```html
        <div class="mt-10 text-blue-600 z-50 top-1/3 w-36">Custom content</div>
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
1. Use Tailwind's spacing scale instead of arbitrary pixel values
2. Use Tailwind's color palette instead of custom color codes
3. Use Tailwind's z-index scale instead of arbitrary z-index values
4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
Bad:
```html
<div class="mt-[37px] text-[#3366FF] z-[9999] top-[37%] w-[142px]">
  Custom content
</div>
```
Good:
```html
<div class="mt-10 text-blue-600 z-50 top-1/3 w-36">Custom content</div>
```

File Path Patterns:

*.tsx

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
1. Use Tailwind's spacing scale instead of arbitrary pixel values
2. Use Tailwind's color palette instead of custom color codes
3. Use Tailwind's z-index scale instead of arbitrary z-index values
4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
Bad:
```html
<div class="mt-[37px] text-[#3366FF] z-[9999] top-[37%] w-[142px]">
  Custom content
</div>
```
Good:
```html
<div class="mt-10 text-blue-600 z-50 top-1/3 w-36">Custom content</div>
```

File Path Patterns:

*.tsx

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

Use Tailwind's predefined design tokens instead of arbitrary values. Do not use custom pixel values, color codes, or arbitrary numbers in your Tailwind CSS classes.
1. Use Tailwind's spacing scale instead of arbitrary pixel values
2. Use Tailwind's color palette instead of custom color codes
3. Use Tailwind's z-index scale instead of arbitrary z-index values
4. Use Tailwind's percentage-based positioning values instead of arbitrary percentages
Bad:
```html
<div class="mt-[37px] text-[#3366FF] z-[9999] top-[37%] w-[142px]">
  Custom content
</div>
```
Good:
```html
<div class="mt-10 text-blue-600 z-50 top-1/3 w-36">Custom content</div>
```

File Path Patterns:

*.tsx