Angular集成Tailwind CSS

背景：

Angular 8.3.20 + Tailwind CSS 3.0.24

 

一、npm 安装 Tailwind CSS

npm install -D tailwindcss

 

二、初始化 Tailwind CSS

npx tailwindcss init

初始化以后，会在project根目录下生成 tailwind.config.js 文件，编辑该文件，添加如下内容：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

三、在project根目录的styles.scss引入 Tailwind CSS

把下面的内容添加到styles.scss

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

 

四、编译Tailwind CSS的css文件到assets目录

npx tailwindcss -i ./src/styles.scss -o ./src/assets/output.css --watch

 

五、把编译的output.css添加到index.html

<link href="assets/output.css" rel="stylesheet">

 

六、测试

在index.html添加下面的一段html，使用 ng serve 启动，即可看到应用tailwind css样式的效果

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