tailwindcss v4发布了有一段时间了，在使用方面跟v3有些不一样。

1、创建一个项目

ng new my-project --style=scss
cd my-project

2、安装tailwindcss相关的依赖

npm i tailwindcss @tailwindcss/postcss postcss --force

3、创建.postcssrc.json文件

内如一下

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

4、在src/styles.scss文件中引入需要的tailwindcss

@import "tailwindcss";

如果你想按需引入

// 主题配置
@use "tailwindcss/theme";
// 一些核心功能
@use "tailwindcss/utilities";
// 基础样式，有时候并不需要样式格式化，可以不用引入这个
@use "tailwindcss/index";

5、试一试

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

6、注意事项

在组件的scss文件中使用@apply的时候会报错，或者是不起效，这时候需要再当前css文件的最上方引入tailwindcss

// 这个就够用了
@use "tailwindcss/theme";
// 不行就在引入这个
@use "tailwindcss/utilities";


// 或者直接引入（这样会带初始化样式）
@import "tailwindcss";

完成！