vite+vue3.0 使用tailwindcss

 参考资料： 安装 - TailwindCSS中文文档 | TailwindCSS中文网

npm install -D tailwindcss

npm install postcss

npm install autoprefixer

npx tailwindcss init -p

 生成/src/tailwind.config.js和/src/postcss.config.js配置文件

在/src/tailwind.config.js配置文件中添加所有模板文件路径

新建/src/resources/tailwind.css文件；在文件中添加：

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

在/src/main.ts中进行引用

import "./resources/tailwind.css";

 在vue文件中使用

<template>
  <div class="h-full">
    <h1 class="text-3xl font-bold underline">Hello world!h1>
    <div class="flex">
      <div class="flex-none h-10 w-[80px] bg-red-400" >11div>
      <div class="flex-1 h-10 bg-orange-400">22div>
      <div class="flex-1 h-10 bg-lime-400">33div>
    div>
  div>
template>
 
<script setup lang="ts">script>
 
<style lang="scss" scoped>
 
style>

在VScode编辑器中添加扩展