On This Page

Edit this page on GitHub

CSS

CSS bundling is handled by SWC, using a Rust crate called swc_css. We haven't yet documented swc_css separately, but it's integrated into Turbopack and supports several CSS features:

Global CSS

Importing CSS into global scope is supported out-of-the-box in Turbopack.

import './globals.css';

CSS Modules

Turbopack handles CSS Modules out-of-the-box. Any file with a .module.css extension will be considered a CSS module, and you can import it into a JavaScript or TypeScript file:

import cssExports from './phone.module.css'

This follows the same rules set out by Next.js - letting you easily distinguish between global and scoped CSS.

postcss-nested

Turbopack handles postcss-nested syntax out-of-the-box. This useful library lets you nest CSS declarations inside each other:

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

@import syntax

Using the CSS @import syntax to import other CSS files works out-of-the-box. This gives you the ability to combine several CSS files together into a single module:

globals.css
@import './modal.css';
@import './dark.css';

PostCSS

PostCSS gives you the ability to use plugins to enhance your CSS toolchain. It's been an invaluable tool for integrating libraries like Tailwind and autoprefixer into applications.

The most common pattern is adding a postcss.config.js file to the root of your application, where you can import and configure your plugins.

We don't currently offer the ability to use PostCSS plugins. We may end up adding these out-of-the-box, or make them available via a plugin.

Workaround for PostCSS

As a workaround, we recommend running the PostCSS CLI in a sidecar process.

npm install --save-dev postcss postcss-cli concurrently
package.json
{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"postcss input.css --output output.css --watch\"",
    "build": "postcss input.css --output output.css && next build"
  }
}

SCSS and LESS

.scss and .less files let you utilize SCSS and LESS - languages which enhance CSS in various ways. These languages don't currently work out-of-the-box with Turbopack.

These are likely to be available via plugins in the future.

Tailwind CSS

We currently don't support Tailwind CSS out of the box. Since it can be used as a PostCSS plugin, we'll likely support it through the plugin system.

It can be used today by using a sidecar process:

npm install --save-dev tailwindcss autoprefixer concurrently
package.json
{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input input.css --output output.css --watch\"",
    "build": "tailwindcss input.css --output output.css && next build"
  }
}
Last updated on June 5, 2025
FrameworksDev Server