Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-tailwind-rules) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

eslint-plugin-tailwind-rules

🚫 ESLint plugin to prevent using px font sizes in Tailwind CSS. Use rem or em instead for better accessibility and responsiveness.

Installation

To install the plugin, run the following command:

npm install --save-dev eslint-plugin-tailwind-rules

Configuration

Once installed, you need to add the plugin to your ESLint configuration.

In .eslintrc.js (or your preferred ESLint config file, such as .eslintrc.json or eslint.config.js):

module.exports = {
  plugins: ["tailwind-rules"], // Add the plugin
  rules: {
    "tailwind-rules/no-px-font-size": "warn", // Enable the rule
  },
};

In .eslintrc.json:

{
  "plugins": ["tailwind-rules"],
  "rules": {
    "tailwind-rules/no-px-font-size": "warn"
  }
}

Rule Options

"tailwind-rules/no-px-font-size": "warn": This will trigger a warning when px units are used in Tailwind class names.
"tailwind-rules/no-px-font-size": "error": This will trigger an error when px units are used in Tailwind class names.
"tailwind-rules/no-px-font-size": "off": This will disable the rule.

Example

✅ Correct Usage (using `rem` or `em`):

<p class="text-[1rem]">This is correct ✅</p>
<p class="text-[1.2rem]">Another correct example ✅</p>

❌ Incorrect Usage (using `px`):

<p class="text-[16px]">This is incorrect ❌</p>
<p class="text-[14px]">Another incorrect example ❌</p>

Why use this plugin?

Accessibility: rem (relative to root font size) ensures better scaling for accessibility, as it adapts to the user's settings.
Responsiveness: Using relative units like rem and em makes the layout more flexible and adaptive to different screen sizes and user preferences.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! If you find a bug or want to suggest a feature, feel free to open an issue or submit a pull request.