Update Tailwind CSS to the latest version

Oct 13, 2025 by pinkandtrash.com 133 views

Bug: Using Tailwind 3.4.17 with @carbon/colors Results in Error: Can't find stylesheet to import

When using Tailwind CSS version 3.4.17 in conjunction with the @carbon/colors package, developers may encounter an error that prevents the stylesheet from being imported. This issue is particularly relevant for developers working on Next.js projects that utilize Tailwind CSS and the Carbon Design System. In this article, we will delve into the details of this bug, explore the reproduction steps, and provide a suggested solution to resolve the issue.

To better understand the context of this bug, let's take a look at the relevant package information:

Package

@carbon/react: 1.77.0
@carbon/colors: 11.30.0
@carbon/styles: 1.76.0

Browser

Firefox

Package Version

├── @carbon/colors@11.30.0
├── @carbon/react@1.77.0
├── @carbon/styles@1.76.0

React Version

├── react-dom@19.0.0
├── react@19.0.0

The error message indicates that the stylesheet cannot be found when attempting to import the @carbon/colors package. The error message is as follows:

Error evaluating Node.js code
Error: Can't find stylesheet to import.
  ╷
1 │ @use "@carbon/colors";
  │ ^^^^^^^^^^^^^^^^^^^^^
  ╵

To reproduce this issue, follow these steps:

Create a new Next.js project with Tailwind enabled: Run the command npx create-next-app my-app --ts --use-tailwindcss to create a new Next.js project with Tailwind CSS enabled.
Downgrade Tailwind to 3.4.17: Run the command npm install tailwindcss@3.4.17 to downgrade Tailwind CSS to version 3.4.17.
Install the @carbon packages: Run the command npm install @carbon/react @carbon/colors @carbon/styles to install the required @carbon packages.
Install Sass and set up for Next.js: Run the command npm install sass to install Sass, and then create a new file styles.scss in the src/app directory.
Paste the code snippet into src/app/styles.scss: Copy the following code snippet and paste it into the styles.scss file:

@use "@carbon/colors";

@tailwind base;
@tailwind components;
@tailwind utilities;

Run npm run dev: Run the command npm run dev to start the development server.
Open up http://localhost:3000: Open up the development server in your web browser by navigating to http://localhost:3000.
Observe the error: You should see the error message indicating that the stylesheet cannot be found when attempting to import the @carbon/colors package.

The suggested severity of this issue is None, as it is a known bug that can be resolved by following the suggested solution.

To resolve this issue, you can try the following solution:

Update Tailwind CSS to the latest version: Run the command npm install tailwindcss@latest to update Tailwind CSS to the latest version.
Remove the @use statement: Remove the @use statement for the @carbon/colors package from the styles.scss file.
Import the @carbon/colors package using the @import statement: Replace the @use statement with the @import statement, like this:

@import "@carbon/colors";

@tailwind base;
@tailwind components;
@tailwind utilities;

Run npm run dev again: Run the command npm run dev again to start the development server.
Observe the result: You should no longer see the error message indicating that the stylesheet cannot be found when attempting to import the @carbon/colors package.

By following these steps, you should be able to resolve the issue and successfully import the @carbon/colors package in your Next.js project.
Q&A: Resolving the Bug with Tailwind 3.4.17 and @carbon/colors

In our previous article, we explored the bug that occurs when using Tailwind CSS version 3.4.17 with the @carbon/colors package. We provided a suggested solution to resolve the issue, but we understand that you may still have questions about the bug and its resolution. In this article, we will address some of the most frequently asked questions about the bug and provide additional guidance on how to resolve it.

A: The bug is caused by a compatibility issue between Tailwind CSS version 3.4.17 and the @carbon/colors package. The @carbon/colors package uses a different syntax for importing stylesheets, which is not compatible with the @use statement used in Tailwind CSS version 3.4.17.

A: The bug only occurs with Tailwind CSS version 3.4.17 because this version uses the @use statement to import stylesheets, which is not compatible with the @carbon/colors package. Later versions of Tailwind CSS use the @import statement, which is compatible with the @carbon/colors package.

A: To update Tailwind CSS to the latest version, run the command npm install tailwindcss@latest in your terminal. This will install the latest version of Tailwind CSS, which should resolve the compatibility issue with the @carbon/colors package.

A: If you don't want to update Tailwind CSS to the latest version, you can try using the @import statement instead of the @use statement to import the @carbon/colors package. This should resolve the compatibility issue, but it may require additional configuration.

A: To configure the @import statement to work with the @carbon/colors package, you need to add the following code to your styles.scss file:

@import "@carbon/colors";

@tailwind base;
@tailwind components;
@tailwind utilities;

This code imports the @carbon/colors package using the @import statement and then imports the Tailwind CSS base, components, and utilities using the @tailwind statement.

A: If you're still experiencing issues after trying the suggested solution, please try the following:

Check your package versions to ensure that you're using the latest versions of Tailwind CSS and the @carbon/colors package.
Verify that you've correctly configured the @import statement to work with the @carbon/colors package.
Try removing and reinstalling the @carbon/colors package to ensure that it's properly installed.
If you're still experiencing issues, please reach out to the Tailwind CSS or @carbon/colors community for further assistance.

By following these steps and troubleshooting tips, you should be able to resolve the bug and successfully use the @carbon/colors package with Tailwind CSS version 3.4.17.