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.