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.js Mixins 混入使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件,本文给大家介绍了Vue使用Props实现组件数据交互,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了分享一个vue项目“脚手架”项目的实现步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
<keep-alive> 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染,这意味着当组件在<keep-alive> 内部切换时,其状态将被保留,而不是被销毁和重新创建,这篇文章主要介绍了Vue中的keep-alive缓存组件的理解,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue 实现拨打电话操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了解决Vue大括号字符换行踩的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了详解vue 数组和对象渲染问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下2023-11-11
这篇文章主要介绍了vue中的正则表达式校验、验证方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue @scroll监听滚动条事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论