tailwindcss介绍
号称只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。tailwindcss 其实就是一个css框架，可以选择你需要的样式，快速构建自己的网站。
官方地址：
https://www.tailwindcss.cn/
一、安装
pnpm create vite@latest demo1
二、安装tailwindcss
# 安装 Tailwind CSS 及其所需的依赖
npm install -D tailwindcss postcss autoprefixer
同时在vs中搜索tailwind 插件
三、配置模板文件路径
先生成配置文件
npx tailwindcss init -p
在tailwind.config.js添加代码
/** @type {import('tailwindcss').Config} */
export default {// 在content中添加 './index.html','./src/**/*.{vue,js,ts,jsx,tsx}'content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}
四、在src下新建一个index.css，内容如下：
@tailwind base;
@tailwind components;
@tailwind utilities;
然后在main.ts中引入index.css
import './index.css'
五、使用
在App.vue中加入下面代码
<template><div class="w-screen h-screen bg-red-600 flex justify-center items-center text-8xl text-slate-200">hello tailwindcss</div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'</script>
<style scoped></style>
