How to add custom CSS

Adding or modifying CSS counts as changing the code, so as per our license you must either open-source your modified version or purchase an enterprise license.

Cal.com uses TailwindCSS 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:

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:

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

These styles will apply to all pages and components in your application.

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