Hello
Writing Correct Values
Regular Value
Regular value is just simple CSS values such as 1rem
, red
, space-between
, hex color
and so on. You can wtite them directly in your class name like this:
html
<div class="bg-rebeccapurple p-1rem">Hello</div>
CSS Variable Value
By using $
before the value name, it will treated as CSS variable value. Example:
Hello
html
<div class="[--c-brand]-#ccf654 bg-$c-brand text-black p-1rem">Hello</div>
Arbitrary Value
Basic Usage
You can write value that needs spaces
, function
, and something like that by writing them inside []
. Example:
Hello
html
<div class="bg-[linear-gradient(to_right,_red,_blue)] p-1rem">Hello</div>
If you need spaces, you can just use _
(underscore), it will treated as space.
Accessing Custom Values
You can also access values from value alias. Here's the example:
Hello
js
// tenoxui
tenoxui({
values: {
'my-red': '255 0 0'
}
})
// @tenoxui/core
new MakeTenoxUI({
values: {
'my-red': '255 0 0'
}
})
html
<div class="bg-[rgb({my-red})] p-1rem">Hello</div>