# Tailwind & SCSS

The default styling in Gravity is Tailwind, but you can add your own custom styling with SCSS if you prefer.

### Using SCSS

Every component supports a custom className prop, so you can create your own SCSS module and pass the styling to the component

```javascript
import { Button } from 'components/lib';
import Style from './dashboard.module.scss';

export function Dashboard(){

  return (
    <div>
      <Button className={ Style.button }
    </div>
  );
}
```

### Using Custom Tailwind Styles

You can feed a custom style to any component by passing it in the `className` prop as per the above example.

## Live Reloading

Live reloading is automatically configured. The `start` script will watch for changes while the `build` script adds the output CSS file to your static build folder.

## Colors

There is also a brand colour configured inside the `tailwind.config.js` file that you can modify with your brand colours.

## Dark Mode

Dark mode is included and can be toggled on or off in the user dropdown nav on the top right corner (click the avatar to open it).

The setting is stored in both the `authContext` on the client and in the user table of the database so it will persist across user sessions.

## Further Help

If you're new to Tailwind and need more help, the [Tailwind documentation](https://tailwindcss.com/docs/utility-first) provides a comprehensive guide to the principles along with a full reference guide to each utility class helper.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/tailwind-and-scss.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.