vue tailwindcss安装配置教程示例详解

更新时间：2023年09月01日 09:59:00 作者：风如也

这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Tailwind CSS with Vue

创建Vue项目

npm create vite@latest my-project -- --template vue
cd my-project

安装Tailwind CSS

创建tailwind.config.js和postcss.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Tailwind指令到全局css文件中

此处文件地址比如在./src/style.css

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

在main.js入口引入style.css

import { createApp } from 'vue'
import './style.css'

启动项目

npm run dev

在模板中使用tailwindcss

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

可以看到页面上此时已经有效果了，具体使用教程可以查看官方文档。

以上就是vue tailwindcss安装配置教程示例详解的详细内容，更多关于vue tailwindcss安装配置的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue中如何使用elementUI表格动态行合并
这篇文章主要介绍了vue中如何使用elementUI表格动态行合并，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
如何实现echarts markline标签名显示自己想要的
这篇文章主要介绍了实现echarts markline标签名显示自己想要的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue项目打包编译优化方案
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
2020-09-09
vue在标签中如何使用(data-XXX)自定义属性并获取
这篇文章主要介绍了vue在标签中如何使用(data-XXX)自定义属性并获取，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
element动态路由面包屑的实现示例
本文主要介绍了element动态路由面包屑的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue项目中实现el-dialog组件可拖拽效果
本文主要介绍了vue项目中实现el-dialog组件可拖拽效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
解决vue生产环境,页面卡死的问题
这篇文章主要介绍了解决vue生产环境,页面卡死的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue中使用wangeditor富文本编辑的问题
这篇文章主要介绍了Vue中使用wangeditor富文本编辑的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
Vue实现docx/xlsx/pdf等类型文件预览功能
这篇文章主要为大家详细介绍了如何溧阳Vue实现docx/xlsx/pdf等类型文件预览功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-02
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
2022-08-08