Tailwindcss
Tailwindcss是一个css框架，它将css和html合并，通过书写特定的类就可以将预设好的css注入进去。
- 它提供了很多设计规范，如颜色、字体大小、圆角大小、阴影等，适合不会设计的前端人员学习。
- 只需要使用简单的类就可以添加css，无需再书写css文件，对vue，react这样的组件化开发友好
文档地址：[www.tailwindcss.cn/]
在vue3中使用
1.通过 npm 安装 Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2.创建您的配置文件
npx tailwindcss init
这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。
3.引入样式
// main.ts
import "tailwindcss/tailwind.css"
4.配置tailwind.config.js文件
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
5.vite.config.js增加配置
css: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
测试
<template>
<div class="bg-green-600 w-12 h-12">1</div>
</template>
出现绿色方框就代表成功啦～
