当前位置：首页 > news >正文

Vue学习记录之十八 Vue3集成tailwindcss

news 2024/10/21 23:47:49

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>