快捷導(dǎo)航

vue3+vite配置tailwindcss全過程

更新時間：2025年06月12日 09:46:31 作者：不想起名55

這篇文章主要介紹了vue3+vite配置tailwindcss全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

安裝

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 項目中

我的版本

修改配置文件

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é)

報錯的時候先去官網(wǎng)看案例，查博客版本依賴不一樣可能會被帶偏；

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用v-model實現(xiàn)父子組件傳值之子父組件同步更新方式
文章主要介紹了Vue2和Vue3中父子組件間通過props和emit實現(xiàn)雙向綁定的方法,Vue2中,子組件通過props接收值,通過$emit觸發(fā)change事件修改父組件數(shù)據(jù)；Vue3中方法類似,但語法略有不同
2026-05-05
Vue3 keep-alive用法及說明
這篇文章主要介紹了Vue3 keep-alive用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2026-03-03
Vue3組件通信的具體用法實例
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-09-09
vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼
這篇文章主要介紹了vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
淺析vue 函數(shù)配置項watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項watch及函數(shù) $watch 源碼分享 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實現(xiàn)方法
基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下
2018-12-12
Vue中如何使用ElementUI實現(xiàn)圖片上傳
這篇文章主要介紹了Vue中如何使用ElementUI實現(xiàn)圖片上傳,這里用了elementUI的一個簡單的例子，給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2024-03-03
vue3?hook自動導(dǎo)入原理及使用
最近學(xué)習(xí)了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動導(dǎo)入原理及使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
Vue中保存用戶登錄狀態(tài)實例代碼
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。、
2017-06-06