37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
---
|
|
title: Adding CSS
|
|
---
|
|
|
|
import Callout from "nextra-theme-docs/callout";
|
|
|
|
# Adding CSS
|
|
|
|
<Callout>
|
|
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.
|
|
</Callout>
|
|
|
|
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 a single CSS file, `global.css`. We suggest not to add to this file, 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/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";
|
|
```
|
|
|
|
<Callout type="warning" emoji="⚠️">
|
|
These styles will apply to all pages and components in your application.
|
|
</Callout>
|
|
|
|
Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside `pages/_app.tsx`**.
|