Tailwind

Enforce a consistent and logical order of the Tailwind CSS classnames

function MyComponent() {
  return (
    <div className="text-red-500 p-4 flex justify-center bg-blue-200">
      Hello, World!
    </div>
  );
}

• Enforcing a consistent order of Tailwind CSS classnames improves readability and maintainability of the code by making it easier for developers to locate and understand the purpose of each class applied to an element.
• This rule can help prevent the duplication of classnames by sorting and organizing them logically, which could lead to a reduction in CSS specificity issues and unintended styling behaviors.
• By standardizing the format in which classnames are written, it aids in the team’s collaboration efforts, as every developer follows the same guideline, reducing the overhead in code review processes focused on styling consistency.
• Automating the process of ordering classnames reduces the risk of human error, ensuring that even in large projects with extensive stylesheets, the classnames remain organized and easy to manage.

Warns about dash prefixed classnames using arbitrary values

// Bad example case: Incorrect syntax for negative arbitrary values in a Tailwind CSS class
const badComponent = () => {
  return <div className="mt-[-100px]">Content goes here</div>;
};

• This rule specifically targets the usage of negative arbitrary values in class names, a common pattern in Tailwind CSS for applying negative values to various CSS properties. Enforcing a consistent format for these values helps maintain code consistency and prevents the introduction of errors due to incorrect syntax.
• By automatically identifying instances where a dash-prefixed classname with an arbitrary value does not follow Tailwind CSS conventions, this rule aids developers in adhering to best practices and leveraging the full power of the framework without risking breaking styles due to minor syntactical errors.
• Tailwind CSS relies heavily on utility classes to apply styling, and arbitrary values expand the framework’s flexibility. Ensuring that negative arbitrary values are correctly formatted is crucial for generating the correct CSS. This rule mitigates the risk of generating non-functional or unexpected styles that could lead to significant layout issues.
• The rule includes a comprehensive list of CSS properties that can accept negative arbitrary values (e.g., margin, inset, scale, etc.), ensuring that developers do not overlook or misapply syntax rules to different properties. This specificity reduces the learning curve for new developers and minimizes the potential for bugs in the codebase related to incorrect utility class usage.

Enforces the usage of shorthand Tailwind CSS classnames

/* Assume we have the following JSX in a React component where classes could be condensed using Tailwind shorthand but are not. */
import React from 'react';

function Badge() {
  return (
    <div className="pt-2 pb-2 pl-4 pr-4 bg-green-500 text-white font-bold">
      Success
    </div>
  );
}

export default Badge;

• This ESLint rule specifically enforces the usage of shorthand Tailwind CSS classnames, which promotes consistency in coding style by ensuring developers use Tailwind’s optimized shorthand syntax where applicable. For instance, converting individual padding classes to a single shorthand p-2 class in the provided example.
• It helps in reducing the overall file size of the stylesheets by condensing multiple class declarations into fewer shorthand declarations. This can contribute to faster load times and better performance of web applications.
• By analyzing complex class equivalences and enforcing shorthand where multiple classes achieve the same styling effect, the rule aids in the readability and maintainability of the codebase. For example, replacing separate declarations for each padding direction with one shorthand property makes it easier to understand and modify the padding applied to an element.
• The rule includes detailed logic to parse and validate classnames, ensuring that only applicable shorthand replacements are suggested and applied. This includes handling edge cases and ensuring that shorthands are only used when they precisely match the intended design, minimizing the risk of unintended side effects in the styling of components.

Detect obsolete classnames when upgrading to Tailwind CSS v3

// JSX component using obsolete class names from Tailwind CSS v2
function MyComponent() {
  return <div className="flex-grow-0 flex-shrink-0 bg-opacity-75"></div>;
}

• This ESLint rule specifically targets the migration process from Tailwind CSS v2 to v3 by identifying class names that have either become obsolete or have updated naming conventions in the newer version, making the upgrade smoother and ensuring that the project’s styling remains consistent without manual checks.
• By automatically detecting and suggesting fixes for deprecated or changed class names, this rule not only reduces the time needed for developers to manually search and replace outdated classes but also minimizes the risk of errors that could lead to inconsistent UI/UX throughout the application.
• The rule caters to various scenarios where class names might be defined, including static class attributes, JSX expression containers, call expressions, and even within complex expressions like template literals, conditionals, and arrays, ensuring comprehensive coverage and enhancing the robustness of the migration process.
• It contributes to maintaining code quality by programmatically enforcing the use of the latest Tailwind CSS features and conventions, which can lead to more efficient, readable, and maintainable code that leverages the improvements and new functionalities introduced in Tailwind CSS v3.

Forbid using arbitrary values in classnames

// Assuming this is part of a React component
function MyComponent() {
    return (
        <div className="text-[13px] mt-[23px] bg-[#123456]">
            This is an example.
        </div>
    );
}

• Ensuring consistency: This rule helps maintain consistency in the use of Tailwind CSS class names across the project by disallowing arbitrary values directly in classnames. Arbitrary values can lead to inconsistencies and harder-to-manage codebases where similar styles could be defined with slight variations.

• Encourages best practices: By forbidding arbitrary values, developers are encouraged to define their custom values in the Tailwind configuration file. This aligns with Tailwind CSS’s best practices, making the Tailwind configuration the single source of truth for custom styles and promoting better manageability and scalability of the style definitions.

• Improves maintainability: When all customizations are centralized in the Tailwind configuration, it’s much easier to update and maintain styles. Changing a value only needs to happen in one place, reducing the risk of missing an update in one of the many arbitrary values scattered through the codebase.

• Enhances readability: Code readability improves when arbitrary values are replaced with descriptive class names defined in the Tailwind configuration. It provides clearer intentions of what the styles are meant to achieve, making it easier for new developers to understand the codebase and for teams to collaborate effectively.

Avoid contradicting Tailwind CSS classnames (e.g. “w-3 w-5”)

const MyComponent = () => {
  return (
    <div className="text-blue-500 w-3 w-5 p-4">
      This is a bad example.
    </div>
  );
};

• Prevents the use of contradicting or redundant Tailwind CSS class names within the same element, ensuring that styles are applied as intended without unintentional overrides (e.g., “w-3 w-5” where “w-5” would override “w-3”).

• Enhances the readability and maintainability of code by alerting developers to unnecessary or conflicting classes that could lead to confusion during debugging or further development.

• Optimizes the final CSS bundle size by encouraging the removal of redundant classes, indirectly contributing to improved loading times and performance of the web application.

• Supports best practices in CSS and framework usage by promoting the use of precise and conflict-free class names, leading to more predictable styling outcomes and reducing the need for excessive debugging.

Detect classnames which do not belong to Tailwind CSS

// Bad: Using a custom, non-TailwindCSS class name
function Component() {
  return <div className="text-center non-tailwind-class">Hello, World!</div>;
}

• Ensures consistency in styling by detecting and reporting the use of non-Tailwind CSS class names. This rule reinforces the exclusive use of Tailwind CSS utility classes for styling, thereby maintaining a unified and predictable styling approach across the project.

• Enhances code readability and maintainability by promoting the use of a predefined set of utility classes from Tailwind CSS. This simplifies the understanding of the styles applied to elements at a glance, reducing the cognitive load on developers when reading or reviewing code.

• Reduces the likelihood of CSS bloat and conflicting styles. By discouraging the use of custom class names, this rule helps in keeping the stylesheets lean and focused, leveraging Tailwind’s utility-first approach for all styling needs. Thus, it indirectly contributes to better performance and load times for web pages.

• Encourages the use of Tailwind’s configuration and utility generation instead of manual CSS or class names. This rule nudges developers towards utilizing Tailwind’s customization options (like extending the theme or generating new utilities) for any specific styling needs, thereby making full use of Tailwind CSS’s features and promoting a deeper understanding of the framework.