vue3+vite配置tailwindcss全過程
更新時(shí)間：2025年06月12日 09:46:31 作者：不想起名55
這篇文章主要介紹了vue3+vite配置tailwindcss全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
安裝
npm install autoprefixer tailwindcss @uni-helper/vite-plugin-uni-tailwind -D
- autoprefixer ：自動管理瀏覽器前綴的插件，可以解析css文件并且添加前綴到css內(nèi)容里。
- @uni-helper/vite-plugin-uni-tailwind: 將 Tailwind CSS 框架集成到使用 Vite 作為構(gòu)建工具的 UniApp 項(xiàng)目中
我的版本
修改配置文件
tailwind.config.ts
module.exports = {
content: ["index.html", "./src/**/*.{html,js,ts,vue}"],
theme: {
extend: {},
},
plugins: [],
};postcss.config.ts
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}vite.config.ts
import tailwindcss from "tailwindcss";
import uniTailwind from "@uni-helper/vite-plugin-uni-tailwind";
export default defineConfig({
plugins: [uni(), uniTailwind()],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
});
引入tailwindcss 指令
在src目錄下新建assets目錄，新建tailwind.css 文件
@tailwind base; @tailwind components; @tailwind utilities;
在App.vue中引入
測試
<view class="bg-black text-orange-500"> <text>1</text> <text>2</text> </view>
總結(jié)
- 報(bào)錯(cuò)的時(shí)候先去官網(wǎng)看案例，查博客版本依賴不一樣可能會被帶偏；
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用v-model實(shí)現(xiàn)父子組件傳值之子父組件同步更新方式
文章主要介紹了Vue2和Vue3中父子組件間通過props和emit實(shí)現(xiàn)雙向綁定的方法,Vue2中,子組件通過props接收值,通過$emit觸發(fā)change事件修改父組件數(shù)據(jù)；Vue3中方法類似,但語法略有不同2026-05-05
這篇文章主要介紹了Vue3 keep-alive用法及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
vue移動端項(xiàng)目中如何實(shí)現(xiàn)頁面緩存的示例代碼
這篇文章主要介紹了vue移動端項(xiàng)目中如何實(shí)現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
淺析vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實(shí)現(xiàn)方法
基于Vue-cli 項(xiàng)目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下2018-12-12
Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳
這篇文章主要介紹了Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳,這里用了elementUI的一個(gè)簡單的例子，給大家介紹的非常詳細(xì)，需要的朋友可以參考下2024-03-03
最近學(xué)習(xí)了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動導(dǎo)入原理及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、2017-06-06