首先 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>