Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make negative values a first-class feature, rather than theme-driven #5709

Merged
merged 5 commits into from
Oct 6, 2021

Conversation

adamwathan
Copy link
Member

This PR makes the negative prefix in Tailwind (like -mt-4) a true feature of Tailwind, rather than something that is generated because you have negative values in your config file.

Using a negative prefix in a key in your config file will still work the way it always has and will take precedence over this new "automatic" negative value support, but this PR does remove all the explicit negative values from the default config.

With this change, you can now use negative versions of anything "negatable" automatically, whether or not it's defined in your config, and even including arbitrary values:

Class CSS
-mt-2 margin-top: -0.5rem
-mt-[5px] margin-top: -5px
-mt-[-10px] margin-top: 10px
-mt-[var(--whatever)] margin-top: calc(var(--whatever) * -1)
-mt-0 margin-top: 0
-mt-auto Ignored

This adds a lot of new power to Tailwind, while also letting us really simplify the default config. It also fixes a common hang up people run into where they expect -mt-[500px] to work, and I've always had to tell them to write mt-[-500px] instead.

There is a tiny breaking change here, which is that the negative helper function passed in to theme callbacks no longer returns the untouched value for values that cannot be made negative, for example:

negative({
  1: '1px',
  2: '2px',
  auto: 'auto'
})

// Old output
{
  '-1': '-1px',
  '-2': '-2px',
  '-auto': 'auto'
}

// New output
{
  '-1': '-1px',
  '-2': '-2px',
}

The getClassList test is currently failing, because completions were relying on the config information to generate the negative values. We will need to fix this before merging, so going to leave this open until then.

adamwathan and others added 5 commits October 5, 2021 11:00
* Add `supportsNegativeValues` plugin option

* Update `getClassList` to support dynamic negative values

* Add test for using a negative scale value with a plugin that does not support dynamic negative values
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.

None yet

2 participants