Pack
Docs
Features
CSS

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 (opens in a new tab) - letting you easily distinguish between global and scoped CSS.

postcss-nested

Turbopack handles postcss-nested (opens in a new tab) 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.

When Turbopack finds a postcss.config.js file, it will automatically process your CSS files with PostCSS in a Node.js worker pool.

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

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

Tailwind CSS can be used via PostCSS plugins. You can use the official Tailwind Next.js guide (opens in a new tab) to get started.

FrameworksDev Server