Skip to content

Conversation

Sweet-KK
Copy link

@Sweet-KK Sweet-KK commented May 1, 2025

Add enforces-arbitrary-value-syntax rule

Description

This PR adds the new "enforces-arbitrary-value-syntax" rule which automatically enforces the correct Tailwind CSS arbitrary value syntax by replacing direct values (e.g. p-10px) with the proper arbitrary value syntax using square brackets (e.g. p-[10px]).

Key motivations for this rule:

  1. Facilitate migration from competing CSS frameworks that support arbitrary values without square brackets, making the transition to Tailwind CSS smoother.
  2. Improve developer experience by allowing users to write arbitrary values without typing square brackets, which can be tedious when frequently using arbitrary values. The rule automatically fixes the syntax.

Fixes # (issue number if applicable)

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

  • Unit tests verifying rule functionality with various CSS units
  • Integration tests with common frameworks (React, Vue)
  • Manual testing with different Tailwind configuration files

Test Configuration:

  • OS + version: macOS 15.4.1
  • NPM version: 10.9.2
  • Node version: 22.14.0

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant