tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Make --theme(…) return CSS variables (#17036 )

Closes #16945

This PR changes the `--theme(…)` function now return CSS `var(…)`
definitions unless used in places where `var(…)` is not valid CSS (e.g.
in `@media (width >= theme(--breakpoint-md))`):

```css
/* input */
@theme {
  --color-red: red;
}
.red {
  color: --theme(--color-red);
}

/* output */
:root, :host {
  --color-red: red;
}
.red {
  color: var(--color-red);
}
```

Furthermore, this adds an `--theme(… inline)` option to the `--theme(…)`
function to force the resolution to be inline, e.g.:

```css
/* input */
@theme {
  --color-red: red;
}
.red {
  color: --theme(--color-red inline);
}

/* output */
.red {
  color: red;
}
```

This PR also changes preflight and the default theme to use this new
`--theme(…)` function to ensure variables are prefixed correctly.

## Test plan

- Added unit tests and a test that pulls in the whole preflight under a
prefix theme.

2025-03-20 12:51:22 +01:00

codemods

Make --theme(…) return CSS variables (#17036 )

2025-03-20 12:51:22 +01:00

commands/help

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

template

Make --theme(…) return CSS variables (#17036 )

2025-03-20 12:51:22 +01:00

utils

Upgrade: Report errors when updating dependencies (#16504 )