简书链接:Vite安装TailwindCSS入坑笔记
文章字数：147,阅读全文大约需要1分钟
参考文档
https://www.tailwindcss.cn/docs/installation
https://tailwindcss.com/docs/guides/vite#vue

1
2
3
4
5
npm create vite@latest
cnpm i
tailwindcss 
framework   use vue 
npm install -D tailwindcss postcss autoprefixer

执行下面命令自动创建配置文件

1
npx tailwindcss init -p

tailwind.config.js

需要修改content部分，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"

  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


postcss.config.js

1
2
3
4
5
6
7
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/style.css添加

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

如果是自己定义的项目，确保入口 main.ts 使用了import ‘./style.css’
npm install

vscode提示 安装 tailwind css intellisense
然后测试使用
如果字体颜色发生变化则代表成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
        <!-- 左  -->
        <div>
<div class="text-red-600 text-3xl">hellow world</div>

        </div>
        <!-- 中  -->
        <div></div>
        <!-- 右 -->
        <div></div>
    </div>
</template>