vue3 + vite项目中集成tailwindcss_vue3和vite使用tailwindcss

1 安装依赖

npm install -D tailwindcss postcss autoprefixer
1

2 生成配置

npx tailwindcss init -p
1

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

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

1
2
3
4
5
6
7
8
9

4 添加css
style.css中加入

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

5 示例

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

6 启动项目查看效果

博主开发了一个浏览器aweb123.com