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请求接口并且携带token的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要为大家介绍了Vue.js中安装一个路由器demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
使用element-ui的Pagination分页的注意事项及说明
这篇文章主要介绍了使用element-ui的Pagination分页的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue-cli脚手架-bulid下的配置文件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了如何在Vue.JS中使用图标组件，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-08-08
本文通过案例场景给大家介绍vue点击弹窗自动触发点击事件的解决办法，通过两种方法给大家分享vue 自动触发点击事件的处理方法，对vue自动触发点击事件相关知识感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了解决Vue router-link绑定事件不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue 使用lodash实现对象数组深拷贝操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论