Replies: 4 comments
-
With the addition of arbitrary properties, this is now possible with <div class="[--color:theme(colors.blue.500)]" /> |
Beta Was this translation helpful? Give feedback.
0 replies
-
code error at runtime .. PrepaidCardStatus |
Beta Was this translation helpful? Give feedback.
0 replies
-
@Olson227 you need to be using the insider / nightly builds (what will become 3.0) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Current
I find myself needing to access the Tailwind color palette as CSS variables often, particularly when working with components in Svelte/Vue/React.
I currently use a plugin to expose the entire palette on
:root
...but this has drawbacks:
While you can currently access the theme within a
<style>
block using the theme() directive, this takes extra wiring, naming another class, etc...Proposal
Expose palette as css variables using one of the following (or mix of)...
Which would set:
--color-blue-500: #3b82f6
or possibly using an
theme()
and setting a css variable:Which would set:
--color: #3b82f6
.or an arbitrary value:
Which would set:
--color: #123456
.or setting an specific css variable:
Which would set:
--color-bg: #3b82f6
.This would allow control of the CSS variable. You could be more verbose if not supporting arbitrary variables with something like...
since Tailwind thus far only processes
class
attributes. Ifstyle
attributes were also processed, it could be something like...Beta Was this translation helpful? Give feedback.
All reactions