Clay > Customizing Design > Tailwind CSS
Search docs
Sign InClay utilizes the Tailwind CSS utility-first CSS framework for styling its components.
index.css
Clay's primary and only CSS file is found at src/css/index.css.
This file not only includes typical Tailwind CSS directives, but also defines a variety of custom components.
For all text elements, a family of custom txt-* components is defined. These components combine font weight, font size, and line height.
tailwind.config.js
The Tailwind configuration file is located at tailwind.config.js.
A noteworthy feature of this configuration is that it establishes a custom color palette exclusively used by Clay. Below is a comprehensive list of the defined colors:
| Name | Color | Hex |
|---|---|---|
| ash | #262338 | |
| background | #F7F7FC | |
| black | #000000 | |
| blue | #1790C8 | |
| body | #4E4B66 | |
| button-disabled | #F9F8FD | |
| button-disabled-text | #747083 | |
| button-primary | #232323 | |
| button-primary-active | #232323 | |
| button-primary-focused | #232323 | |
| button-primary-hover | #373739 | |
| button-primary-text | #FFFFFF | |
| button-secondary | #FFFFFF | |
| button-secondary-active | #F6F5FF | |
| button-secondary-focused | #F6F5FF | |
| button-secondary-hover | #F6F5FF | |
| button-secondary-text | #373739 | |
| error | #FB312E | |
| errorbg | #FFF2F9 | |
| info | #406CFF | |
| infobg | #DFF1FF | |
| input | #EFF0F6 | |
| label | #6E7191 | |
| line | #D9DBE9 | |
| off | #14142B | |
| off | #FCFCFC | |
| placeholder | #878AA4 | |
| red | #D62319 | |
| success | #00CC67 | |
| successbg | #E5FFF2 | |
| warning | #F7BD29 | |
| warningbg | #FFF4BE | |
| white | #FFFFFF |