No description
Find a file
Robin Malfait 224294122b
Refactor gradient implementation to work around prettier/prettier#17058 (#16072)
This PR fixes an issue where tools like Prettier remove important
trailing commas in CSS variables, making gradients invalid.

We encoded the `,` in the `--tw-gradient-position` to ensure that _if_
the `var(--tw-gradient-position)` is used, that the `,` was there. And
if the variable was _not_ used that we didn't end up with a double `,,`
rendering the gradient invalid.

However, when running Prettier (there might be other tools that do this
as well), the trailing comma in the `--tw-gradient-position` was removed
which made the entire gradient invalid. E.g.:
```diff
  .bg-gradient-to-r {
-   --tw-gradient-position: to right in oklab,;
+   --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
```
Notice how the `,` is removed.

This PR fixes that, by moving the `,` to where the variable is being
used. The only side effect is that we have to guarantee that the
`--tw-gradient-position` is always present. In our testing (and using UI
tests) this should be the case.

Related Prettier issue:
https://github.com/prettier/prettier/issues/17058

Fixes: #16037
2025-01-30 15:46:29 +00:00
.github Rename next to main (#15980) 2025-01-28 11:31:54 -05:00
crates Prepare v4.0.1 release (#16018) 2025-01-29 14:14:35 -05:00
integrations Do not scan tailwind-merge sources for candidates (#16005) 2025-01-29 17:32:06 +01:00
packages Refactor gradient implementation to work around prettier/prettier#17058 (#16072) 2025-01-30 15:46:29 +00:00
patches Upgrade lightningcss to 1.29.1 (#15593) 2025-01-10 14:09:13 +01:00
playgrounds Update @types/react-dom 19.0.2 → 19.0.3 (patch) (#15669) 2025-01-28 16:55:56 +01:00
scripts Prepare v4.0.1 release (#16018) 2025-01-29 14:14:35 -05:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Refactor gradient implementation to work around prettier/prettier#17058 (#16072) 2025-01-30 15:46:29 +00:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Update postcss 8.4.49 → 8.5.1 (minor) (#15675) 2025-01-20 21:50:29 +01:00
pnpm-lock.yaml Revert "Update bun 1.1.43 → 1.2.0 (minor) (#15922)" 2025-01-28 17:03:17 +01:00
pnpm-workspace.yaml Upgrade lightningcss to 1.29.1 (#15593) 2025-01-10 14:09:13 +01:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
rust-toolchain.toml Bring back rust-toolchain.toml (#14585) 2024-10-03 14:37:24 +00:00
turbo.json Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.