# Styling your site
You use React to build your site. So, you can add CSS classes to any React Component using the `className` prop:
```javascript highlightLines="10"
function Menu() {
return Menu
;
}
```
We **don't** recommend applying inline styles directly using JavaScript objects because the performance of CSS classes is generally better than inline styles. Still, you can use it if you want to.
```javascript highlightLines="10"
function Menu() {
return Menu!
}
```
### Global CSS
Since commercetools Frontend is based on Next.js, you can import CSS files directly from a JavaScript file. To make your CSS classes globally available in your site, you have to import the CSS into `app/layout.tsx`:
```javascript
import './app.css';
export default function RootLayout({ children, params }: LayoutProps) {
const { locale } = params;
return (
{children}
);
}
export default appWithTranslation(FrontasticStarter);
```
You can also import stylesheets on the component level. Still, due to the global nature of CSS, we recommend against it and instead use CSS Modules or something similar to properly scope your CSS ([see below](/frontend-development/styling-your-site.md#css-modules)).
Multiple CSS files are merged and minified into a single `.css` file in production.
### Styles from node\_modules
You can also import CSS files directly from the`node_modules`folder. The import path starts with the package name (for example,`bootstrap\`) and then the file's location inside that package.
```typescript highlightLines="10"
import 'bootstrap/dist/css/bootstrap.css';
```
For global CSS like `bootstrap` you should import those styles inside `app/layout.tsx`. For component-level CSS, you can import the styles inside a component directly:
```javascript
import { Dialog } from '@reach/dialog';
import VisuallyHidden from '@reach/visually-hidden';
import '@reach/dialog/styles.css';
```
### CSS Modules
CSS Modules locally scope CSS by automatically creating unique class names, making it ideal to use on the component level.
To use CSS Modules, a CSS file needs to have the `.module.css` extension.
Classes from CSS Modules are imported and accessible as a regular JS Object. For example:
```css highlightLines="10"
.heading {
color: yellow;
background-color: blue;
margin: 0 0 1rem;
}
.titleHighlighted {
padding: 1rem 2rem;
text-align: center;
}
```
And then inside your component:
```javascript
import React, { Component } from 'react';
import myStyles from './styles.css';
function Subtitle() {
return (
My Title
My Title
);
}
export default Subtitle;
```
### Sass
commercetools Frontend lets you import [Sass](https://github.com/sass/sass) using both the `.scss` and `.sass` extensions. You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
Install Sass before using it by running the following command.
```shell title="Install Sass"
yarn add sass
```
Sass supports two syntaxes, each with their own extension. The `.scss` extension requires the SCSS syntax, while the `.sass` extension requires the Indented Syntax (Sass). If you don't know which one to choose, start with the `.scss` extension, since it is a superset of CSS and doesn't require learning the Indented Syntax (Sass).
### styled-jsx/CSS-in-JS
CSS-in-JS refers to a pattern where CSS is composed using JavaScript instead of defined in external files.
[styled-jsx](https://github.com/vercel/styled-jsx) is 1 CSS-in-JS approach that you can use directly:
```javascript
export default () => (
);
```
Besides `styled-jsx` you can use any other CSS-in-JS technology. Here are a few recommendations:
- [Styled Components](https://www.styled-components.com/)
- [JSS](https://cssinjs.org/)
- [Emotion](https://emotion.sh/)
### Tailwind CSS
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center`, and `rotate-90` that can be composed to build any design directly in your markup.
commercetools Frontend comes with Tailwind CSS installed and pre-configured. Tailwind is configured in the file `packages//frontend/tailwind.config.js`. It provides a default configuration that you can adjust to your own needs.
## Related pages
- [Area overview page with navigation](/frontend-development.md)
- [Next page: Sitemaps](/frontend-development/sitemaps.md)
- [Search documentation and API specs](/search.md)