# How to add custom CSS

{% hint style="warning" %}
Adding or modifying CSS counts as changing the code, so as per [our license](https://github.com/calcom/cal.com/blob/main/LICENSE) **you must either open-source your modified version or purchase an enterprise license.**
{% endhint %}

Cal.com uses [TailwindCSS](https://tailwindcss.com/) as a replacement for traditional CSS styling within the application, but some people prefer to add CSS styles themselves.

CSS files should be stored in the `styles` directory within the codebase.

Within the `styles` directory, you will find two CSS files, `fonts.css` and `global.css`. We suggest not to add to these files, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.

### Adding new stylesheets

Firstly, create the CSS file inside the `styles` directory.

Then, open the `pages/_app.tsx` file, and you will see the following two lines:

```javascript
import "../styles/fonts.css";
import "../styles/globals.css";
```

Duplicate one of these import statements and change the path to link to your new CSS stylesheet, like so:

```javascript
import "../styles/your-new-stylesheet.css";
```

{% hint style="info" %}
These styles will apply to all pages and components in your application.
{% endhint %}

Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside `pages/_app.tsx`**.


---

# 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://calcom.gitbook.io/docs/how-to-guides/how-to-add-custom-css.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.