1 安装依赖

npm install -D tailwindcss postcss autoprefixer

2 生成配置

npx tailwindcss init -p

3 修改配置 tailwind.config.js 改成如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

4 添加css
style.css中加入

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

5 示例

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

6 启动项目查看效果
在这里插入图片描述
博主开发了一个浏览器aweb123.com

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐