vite+ts+vue3 知识点（使用 TailWindCss）

首先 vscode 下载插件 Tailwind

安装 Tailwind 和其依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

生成配置文件

npx tailwindcss init -p

配置

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 src 下创建文件夹 TailWindCss 创建一个 index.css 文件

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

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
const app = createApp(App);
// 引入 index.css
import "./TailWindCss/index.css";
app.mount("#app");

使用

<template>
  <div>
    <text class="text-pink-200">1111</text>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

</style>