Pack
Docs
Features
CSS

CSS

CSS parsing and transformation is handled by Lightning CSS (opens in a new tab).

Global CSS

Importing CSS into global scope is built-in in Turbopack.

import "./globals.css";

CSS Modules

Turbopack handles CSS Modules. 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.

CSS nesting

Turbopack handles CSS Nesting (opens in a new tab) syntax. This is officially part of the CSS specification (opens in a new tab) and 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 is supported. This gives you the ability to combine several CSS files together into a single module:

@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.

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

Sass and SCSS and LESS

.scss and .sass files let you utilize the Sass (opens in a new tab) language.

Sass is currently supported when using Next.js with Turbopack.

This is likely to be available via plugins/loaders in the future when using Turbopack directly.

Less

.less files let you utilize the Less (opens in a new tab) language.

This is likely to be available via plugins/loaders 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.