How to fix Angular warning: @import tailwindcss: Sass @import rules are deprecated and will be removed

Problem

In your Angular project using SASS and Tailwind CSS, you encounter the following build warning:

▲ [WARNING] Deprecation [plugin angular-sass]

    src/styles.sass:2:8:
      2 │ @import "tailwindcss";
        ╵         ^


  Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
  
  More info and automated migrator: https://sass-lang.com/d/import

  The plugin "angular-sass" was triggered by this import

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.sass';
        ╵         ~~~~~~~~~~~~~~~~~

Solution

First, it is important to know that you can typically just ignore this warning.

Nevertheless, here’s how you can fix it. Find the following line in your styles.sass or wherever you have imported Tailwind CSS:

@import "tailwindcss";

And replace it with:

@use "tailwindcss";

You must place the @use rule before any other styles or imports at the top of the file.