The natural place for your stylesheets is the [`assets/` directory](/docs/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.
::
### Working With Fonts
Place your local fonts files in your `~/public/` directory, for example in `~/public/fonts`. You can then reference them in your stylesheets using `url()`.
Then reference your fonts by name in your stylesheets, pages or components:
```vue
<style>
h1 {
font-family: 'FarAwayGalaxy', sans-serif;
}
</style>
```
### Stylesheets Distributed Through NPM
You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example.
```bash
npm install animate.css
```
Then you can reference it directly in your pages, layouts and components:
```vue [app.vue]
<script>
import 'animate.css'
</script>
<style>
@import url("animate.css");
</style>
```
The package can also be referenced as a string in the css property of your Nuxt configuration.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
css: ['animate.css']
})
```
## External Stylesheets
You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this.
External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/defer-non-critical-css/).
To use a preprocessor like SCSS, Sass, Less or Stylus, install it first.
::code-group
```bash [Sass & SCSS]
npm install sass
```
```bash [Less]
npm install less
```
```bash [Stylus]
npm install stylus
```
::
The natural place to write your stylesheets is the `assets` directory.
You can then import your source files in your `app.vue` (or layouts files) using your preprocessor's syntax.
```vue [pages/app.vue]
<stylelang="scss">
@use "~/assets/scss/main.scss";
</style>
```
Alternatively, you can use the `css` property of your Nuxt configuration.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
css: ['~/assets/scss/main.scss']
})
```
::alert{type=info}
In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.
::
If you need to inject code in pre-processed files, like a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the vite [preprocessors options](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions).
Create some partials in your `assets` directory:
::code-group
```scss [assets/_colors.scss]
$primary: #49240F;
$secondary: #E4A79D;
```
```sass [assets/_colors.sass]
$primary: #49240F
$secondary: #E4A79D
```
::
Then in your `nuxt.config` :
::code-group
```ts [SCSS]
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/_colors.scss" as *;'
}
}
}
}
})
```
```ts [SASS]
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
sass: {
additionalData: '@use "@/assets/_colors.sass" as *\n'
}
}
}
}
})
```
::
Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader/).
## Single File Components (SFC) Styling
One of the best thing about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://pinceau.dev/).
You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features.html) for a comprehensive reference about styling components in SFC.
### Class And Style Bindings
You can leverage Vue SFC features to style your components with class and style attributes.
You can use [CSS Modules](https://github.com/css-modules/css-modules) with the module attribute. Access it with the injected `$style` variable.
```vue
<template>
<p:class="$style.red">This should be red</p>
</template>
<stylemodule>
.red {
color: red;
}
</style>
```
### Preprocessors Support
SFC style blocks support preprocessors syntax. Vite come with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. You just need to install them first, and they will be available directly in SFC with the lang attribute.
::code-group
```vue [SCSS]
<stylelang="scss">
/* Write scss here */
</style>
```
```vue [Sass]
<stylelang="sass">
/* Write sass here */
</style>
```
```vue [LESS]
<stylelang="less">
/* Write less here */
</style>
```
```vue [Stylus]
<stylelang="stylus">
/* Write stylus here */
</style>
```
::
You can refer to the [Vite CSS docs](https://vitejs.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org/).
## Using PostCSS
Nuxt comes with postcss built-in. You can configure it in your `nuxt.config` file.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
postcss: {
plugins: {
'postcss-nested': {}
"postcss-custom-media": {}
}
}
})
```
For proper syntax highlighting in SFC, you can use the postcss lang attribute.
```vue
<stylelang="postcss">
/* Write stylus here */
</style>
```
By default, Nuxt comes with the following plugins already pre-configured:
- [postcss-import](https://github.com/postcss/postcss-import): Improves the `@import` rule
Nuxt isn't opinionated when it comes to styling and provides you with a wide variety of options. You can use any styling tool that you want, such as popular libraries like [UnoCSS](https://unocss.dev/) or [Tailwind CSS](https://tailwindcss.com/).
The community and the Nuxt team have developed plenty of Nuxt modules to makes the integration easier.
You can discover them on the [modules section](https://nuxt.com/modules) of the website.
Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](https://nuxt.com/modules) if you do!
### Easily Load Webfonts
You can use [the Nuxt Google Fonts module](https://github.com/nuxt-modules/google-fonts) to load Google Fonts.
If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it comes with a [web fonts presets](https://unocss.dev/presets/web-fonts) to conveniently load fonts from common providers, including Google Fonts and more.
Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls/). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
::alert{type="info"}
Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!
