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

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>