Framework
v1.0.116Colors introduction
You can control the colors of any element using the generic tailwind class names:
| Text | .text-{color} | .text-ui-100 |
| Background | .bg-{color} | .bg-ui-100 |
| Border | .border-{color} | .border .border-ui-100 |
To create a gradient background, first indicate the direction of the gradient using one of the following class names:
| Linear gradient to the bottom | .bg-gradient-to-b | Creates a gradient from top to bottom |
| Linear gradient to the right | .bg-gradient-to-r | Creates a gradient from top to right |
| Linear gradient to the top | .bg-gradient-to-t | Creates a gradient from top to top |
| Linear gradient to the left | .bg-gradient-to-l | Creates a gradient from top to left |
| Linear gradient to the bottom right | .bg-gradient-to-br | Creates a gradient from top to bottom right |
| Linear gradient to the bottom left | .bg-gradient-to-bl | Creates a gradient from top to bottom left |
| Linear gradient to the top right | .bg-gradient-to-tr | Creates a gradient from top to top right |
| Linear gradient to the top left | .bg-gradient-to-tl | Creates a gradient from top to top left |
| Radial gradient from the center | .bg-gradient-radial | Creates a radial gradient from the center |
| Radial gradient spotlight | .bg-gradient-radial-spotlight | Creates a spotlight radial gradient |
| Radial gradient to the bottom | .bg-gradient-radial-to-b | Creates a radial gradient to the bottom |
Then indicates the color stops for your gradient:
| From (0%) | .from-{color} | .from-interaction-500 |
| Via (50%) optional | .via-{color} | .via-interaction-300 |
| To (100%) | .to-{color} | .to-blue-500 |
You can apply gradient to text elements by adding the background class names explained above and that following class name. Note that you cannot add strokes or shadows to text gradients.
| Enables text gradient | .text-gradient | .text-gradient .bg-gradient-to-b .from-main .to-blue-500 |